Merge pull request #7 from apivideo/add-video-style-attributes

Fix style attributes on instantiation

Author: olivier-lando

CHANGELOG.md

@@ -1,7 +1,7 @@
 # Changelog
 All changes to this project will be documented in this file.
 
-## [1.0.0] - 2022-06-23
+## [1.0.1] - 2022-06-23
 - Add `videoStyleObjectFit` and `videoStyleTransform` attributes
 
 ## [0.1.3] - 2022-04-27

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@api.video/react-player",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "api.video React player component",
   "keywords": [
     "player",

package.json

@@ -138,6 +138,13 @@ export default class ApiVideoPlayer extends React.Component<ApiVideoPlayerProps,
         this.playerSdk.addEventListener("userinactive", () => this.props.onUserInactive && this.props.onUserInactive());
         this.playerSdk.addEventListener("volumechange", (v) => this.props.onVolumeChange && this.props.onVolumeChange(v.volume));
 
+        if(this.props.videoStyleObjectFit) {
+            this.playerSdk.setVideoStyleObjectFit(this.props.videoStyleObjectFit);
+        }
+
+        if(this.props.videoStyleTransform) {
+            this.playerSdk.setVideoStyleTransform(this.props.videoStyleTransform);
+        }
 
         this.playerSdk.addEventListener("ready", () => {
             this.playerSdk.getVolume().then(d => this.props.onVolumeChange && this.props.onVolumeChange(d));
@@ -206,11 +213,11 @@ export default class ApiVideoPlayer extends React.Component<ApiVideoPlayerProps,
         if (nextProps.playbackRate !== undefined && nextProps.playbackRate !== this.props.playbackRate) {
             this.playerSdk.setPlaybackRate(nextProps.playbackRate);
         }
-        if (nextProps.videoStyleObjectFit !== undefined && nextProps.videoStyleObjectFit !== this.props.videoStyleObjectFit) {
-            this.playerSdk.setVideoStyleObjectFit(nextProps.videoStyleObjectFit);
+        if (nextProps.videoStyleObjectFit !== this.props.videoStyleObjectFit) {
+            this.playerSdk.setVideoStyleObjectFit(nextProps.videoStyleObjectFit || "none");
         }
-        if (nextProps.videoStyleTransform !== undefined && nextProps.videoStyleTransform !== this.props.videoStyleTransform) {
-            this.playerSdk.setVideoStyleTransform(nextProps.videoStyleTransform);
+        if (nextProps.videoStyleTransform !== this.props.videoStyleTransform) {
+            this.playerSdk.setVideoStyleTransform(nextProps.videoStyleTransform || "");
         }
 
         if (nextProps.controls !== undefined) {