Merge pull request #45 from apivideo/add-video-style-methods

Add video style methods

Author: olivier-lando

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Changelog
 All changes to this project will be documented in this file.
 
+## [1.2.20] - 2022-05-23
+- Add `setVideoStyleObjectFit()` and `setVideoStyleTransform()` methods.
+  
 ## [1.2.19] - 2022-05-19
 - When loadConfig() is called, apply the last config settings
 

README.md

@@ -35,6 +35,8 @@
       - [`setPlaybackRate(rate: number)`](#setplaybackraterate-number)
       - [`setCurrentTime(time: number)`](#setcurrenttimetime-number)
       - [`setVolume(volume: number)`](#setvolumevolume-number)
+      - [`setVideoStyleObjectFit(value: "contain" | "cover" | "fill" | "none" | "scale-down")`](#setvideostyleobjectfitvalue-contain--cover--fill--none--scale-down)
+      - [`setVideoStyleTransform(value: string)`](#setvideostyletransformvalue-string)
       - [`setTheme(theme: PlayerTheme)`](#setthemetheme-playertheme)
       - [`requestFullscreen()`](#requestfullscreen)
       - [`exitFullscreen()`](#exitfullscreen)
@@ -264,6 +266,22 @@ The sdk instance has the following methods:
 > ```javascript
 >     player.setVolume(0.75); // Set the volume to 75% 
 > ``` 
+#### `setVideoStyleObjectFit(value: "contain" | "cover" | "fill" | "none" | "scale-down")` 
+> Change the [object-fit](https://developer.mozilla.org/fr/docs/Web/CSS/object-fit) CSS value of the video tag.
+
+> Example:
+> ```javascript
+>     player.setVideoStyleObjectFit("cover"); // Set the object-fit to cover
+> ``` 
+
+#### `setVideoStyleTransform(value: string)` 
+> Change the [transform](https://developer.mozilla.org/fr/docs/Web/CSS/transform) CSS value of the video tag.
+
+> Example:
+> ```javascript
+>     player.setVideoStyleTransform("rotateY(180deg)"); // Apply a 180deg rotation around the Y axis (mirroring)
+> ``` 
+
 #### `setTheme(theme: PlayerTheme)` 
 > Change the appearance of the player.
 > 

dist/index.d.ts

@@ -78,6 +78,8 @@ export declare class PlayerSdk {
     constructor(targetSelector: string | Element, userOptions?: SdkOptions);
     loadConfig(options: SdkOptions): void;
     play(): void;
+    setVideoStyleTransform(value: string): void;
+    setVideoStyleObjectFit(value: "contain" | "cover" | "fill" | "none" | "scale-down"): void;
     hideControls(controls?: ControlName[]): void;
     showControls(controls?: ControlName[]): void;
     hideSubtitles(): void;

dist/index.js

@@ -149,6 +149,15 @@ export class PlayerSdk {
     play() {
         this.postMessage({ message: 'play' });
     }
+
+    setVideoStyleTransform(value: string) {
+        this.postMessage({ message: 'setStyleProperty', query: "video", property: "transform", value }, undefined, true);
+    }
+
+    setVideoStyleObjectFit(value: "contain" | "cover" | "fill" | "none" | "scale-down") {
+        this.postMessage({ message: 'setStyleProperty', query: "video", property: "object-fit", value }, undefined, true);
+    }
+
     hideControls(controls?: ControlName[]) {
         if(!controls) {
             this.options.hideControls = true;

index.ts

@@ -1,6 +1,6 @@
 {
   "name": "@api.video/player-sdk",
-  "version": "1.2.19",
+  "version": "1.2.20",
   "description": "api.video player SDK",
   "repository": {
     "type": "git",