diff --git a/README.md b/README.md index eb37809..b0f60d7 100644 --- a/README.md +++ b/README.md @@ -225,6 +225,12 @@ export default Player; Watermark No No + + + theme + Theme + No + No localStorage @@ -298,6 +304,18 @@ type Watermark = }; ``` +##### Theme +```ts +type Theme = { + subtitles?: { + /** Base font size in em. */ + textSize: number; + textAlign: 'left' | 'center'; + textLength: 'auto' | number; + }; +}; +``` + ## Events diff --git a/dist/kinescope.d.ts b/dist/kinescope.d.ts index fad9550..7f74950 100644 --- a/dist/kinescope.d.ts +++ b/dist/kinescope.d.ts @@ -48,6 +48,15 @@ export interface PlaylistItemOptions { }; }; } +export interface ThemeSubtitles { + /** Base font size in em. */ + textSize: number; + textAlign: 'left' | 'center'; + textLength: 'auto' | number; +} +export interface Theme { + subtitles?: ThemeSubtitles; +} export type VideoQuality = 'auto' | 'index' | 144 | 240 | 360 | 480 | 576 | 720 | 1080 | 1440 | 2160 | 4320; export type VideoQualityLevels = { [quality in VideoQuality]: { @@ -147,6 +156,7 @@ export interface KinescopeCreateOptions { playbackRateButton?: boolean; watermark?: WatermarkTypes; }; + theme?: Theme; settings?: { externalId?: string; }; diff --git a/dist/player.d.ts b/dist/player.d.ts index 70fbdc5..c28f4d8 100644 --- a/dist/player.d.ts +++ b/dist/player.d.ts @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { VideoQuality, VideoQualityLevels, ActionCallToAction, ActionToolBar, WatermarkTypes, PreloadTypes } from './kinescope'; +import { VideoQuality, VideoQualityLevels, ActionCallToAction, ActionToolBar, WatermarkTypes, PreloadTypes, Theme } from './kinescope'; export type VttTypes = { label: string; src: string; @@ -105,6 +105,7 @@ export type PlayerPropsTypes = { bookmarks?: BookmarkTypes[]; watermark?: WatermarkTypes; localStorage?: boolean; + theme?: Theme; onReady?: (data: EventReadyTypes) => void; onQualityChanged?: (data: EventQualityChangedTypes) => void; onCurrentTrackChanged?: (data: EventCurrentTrackChangedTypes) => void; diff --git a/dist/player.js b/dist/player.js index 1012436..d4954a1 100644 --- a/dist/player.js +++ b/dist/player.js @@ -301,14 +301,15 @@ var Player = /*#__PURE__*/function (_Component) { mainPlayButton = _this$props.mainPlayButton, playbackRateButton = _this$props.playbackRateButton, watermark = _this$props.watermark, - localStorage = _this$props.localStorage; + localStorage = _this$props.localStorage, + theme = _this$props.theme; if (muted !== prevProps.muted) { muted ? _this.mute() : _this.unmute(); } var _temp2 = function () { - if (!reactFastCompare(videoId, prevProps.videoId) || !reactFastCompare(query, prevProps.query) || width !== prevProps.width || height !== prevProps.height || autoPause !== prevProps.autoPause || autoPlay !== prevProps.autoPlay || loop !== prevProps.loop || playsInline !== prevProps.playsInline || preload !== prevProps.preload || language !== prevProps.language || controls !== prevProps.controls || mainPlayButton !== prevProps.mainPlayButton || playbackRateButton !== prevProps.playbackRateButton || !reactFastCompare(watermark, prevProps.watermark) || !reactFastCompare(localStorage, prevProps.localStorage)) { + if (!reactFastCompare(videoId, prevProps.videoId) || !reactFastCompare(query, prevProps.query) || width !== prevProps.width || height !== prevProps.height || autoPause !== prevProps.autoPause || autoPlay !== prevProps.autoPlay || loop !== prevProps.loop || playsInline !== prevProps.playsInline || preload !== prevProps.preload || language !== prevProps.language || controls !== prevProps.controls || mainPlayButton !== prevProps.mainPlayButton || playbackRateButton !== prevProps.playbackRateButton || !reactFastCompare(watermark, prevProps.watermark) || !reactFastCompare(localStorage, prevProps.localStorage) || !reactFastCompare(theme, prevProps.theme)) { return Promise.resolve(_this.create()).then(function () {}); } }(); @@ -679,7 +680,8 @@ var Player = /*#__PURE__*/function (_Component) { bookmarks = _this$props4.bookmarks, actions = _this$props4.actions, watermark = _this$props4.watermark, - localStorage = _this$props4.localStorage; + localStorage = _this$props4.localStorage, + theme = _this$props4.theme; var options = { url: _this.getIFrameUrl(), size: { @@ -716,6 +718,7 @@ var Player = /*#__PURE__*/function (_Component) { playbackRateButton: playbackRateButton, watermark: watermark }, + theme: theme, settings: { externalId: externalId } diff --git a/dist/player.module.js b/dist/player.module.js index 5c40022..b4fdf0e 100644 --- a/dist/player.module.js +++ b/dist/player.module.js @@ -297,14 +297,15 @@ var Player = /*#__PURE__*/function (_Component) { mainPlayButton = _this$props.mainPlayButton, playbackRateButton = _this$props.playbackRateButton, watermark = _this$props.watermark, - localStorage = _this$props.localStorage; + localStorage = _this$props.localStorage, + theme = _this$props.theme; if (muted !== prevProps.muted) { muted ? _this.mute() : _this.unmute(); } var _temp2 = function () { - if (!reactFastCompare(videoId, prevProps.videoId) || !reactFastCompare(query, prevProps.query) || width !== prevProps.width || height !== prevProps.height || autoPause !== prevProps.autoPause || autoPlay !== prevProps.autoPlay || loop !== prevProps.loop || playsInline !== prevProps.playsInline || preload !== prevProps.preload || language !== prevProps.language || controls !== prevProps.controls || mainPlayButton !== prevProps.mainPlayButton || playbackRateButton !== prevProps.playbackRateButton || !reactFastCompare(watermark, prevProps.watermark) || !reactFastCompare(localStorage, prevProps.localStorage)) { + if (!reactFastCompare(videoId, prevProps.videoId) || !reactFastCompare(query, prevProps.query) || width !== prevProps.width || height !== prevProps.height || autoPause !== prevProps.autoPause || autoPlay !== prevProps.autoPlay || loop !== prevProps.loop || playsInline !== prevProps.playsInline || preload !== prevProps.preload || language !== prevProps.language || controls !== prevProps.controls || mainPlayButton !== prevProps.mainPlayButton || playbackRateButton !== prevProps.playbackRateButton || !reactFastCompare(watermark, prevProps.watermark) || !reactFastCompare(localStorage, prevProps.localStorage) || !reactFastCompare(theme, prevProps.theme)) { return Promise.resolve(_this.create()).then(function () {}); } }(); @@ -675,7 +676,8 @@ var Player = /*#__PURE__*/function (_Component) { bookmarks = _this$props4.bookmarks, actions = _this$props4.actions, watermark = _this$props4.watermark, - localStorage = _this$props4.localStorage; + localStorage = _this$props4.localStorage, + theme = _this$props4.theme; var options = { url: _this.getIFrameUrl(), size: { @@ -712,6 +714,7 @@ var Player = /*#__PURE__*/function (_Component) { playbackRateButton: playbackRateButton, watermark: watermark }, + theme: theme, settings: { externalId: externalId } diff --git a/dist/player.umd.js b/dist/player.umd.js index e22bf87..c707166 100644 --- a/dist/player.umd.js +++ b/dist/player.umd.js @@ -304,14 +304,15 @@ mainPlayButton = _this$props.mainPlayButton, playbackRateButton = _this$props.playbackRateButton, watermark = _this$props.watermark, - localStorage = _this$props.localStorage; + localStorage = _this$props.localStorage, + theme = _this$props.theme; if (muted !== prevProps.muted) { muted ? _this.mute() : _this.unmute(); } var _temp2 = function () { - if (!reactFastCompare(videoId, prevProps.videoId) || !reactFastCompare(query, prevProps.query) || width !== prevProps.width || height !== prevProps.height || autoPause !== prevProps.autoPause || autoPlay !== prevProps.autoPlay || loop !== prevProps.loop || playsInline !== prevProps.playsInline || preload !== prevProps.preload || language !== prevProps.language || controls !== prevProps.controls || mainPlayButton !== prevProps.mainPlayButton || playbackRateButton !== prevProps.playbackRateButton || !reactFastCompare(watermark, prevProps.watermark) || !reactFastCompare(localStorage, prevProps.localStorage)) { + if (!reactFastCompare(videoId, prevProps.videoId) || !reactFastCompare(query, prevProps.query) || width !== prevProps.width || height !== prevProps.height || autoPause !== prevProps.autoPause || autoPlay !== prevProps.autoPlay || loop !== prevProps.loop || playsInline !== prevProps.playsInline || preload !== prevProps.preload || language !== prevProps.language || controls !== prevProps.controls || mainPlayButton !== prevProps.mainPlayButton || playbackRateButton !== prevProps.playbackRateButton || !reactFastCompare(watermark, prevProps.watermark) || !reactFastCompare(localStorage, prevProps.localStorage) || !reactFastCompare(theme, prevProps.theme)) { return Promise.resolve(_this.create()).then(function () {}); } }(); @@ -682,7 +683,8 @@ bookmarks = _this$props4.bookmarks, actions = _this$props4.actions, watermark = _this$props4.watermark, - localStorage = _this$props4.localStorage; + localStorage = _this$props4.localStorage, + theme = _this$props4.theme; var options = { url: _this.getIFrameUrl(), size: { @@ -719,6 +721,7 @@ playbackRateButton: playbackRateButton, watermark: watermark }, + theme: theme, settings: { externalId: externalId } diff --git a/package-lock.json b/package-lock.json index cb3d143..10faa54 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1981,9 +1981,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001559", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001559.tgz", - "integrity": "sha512-cPiMKZgqgkg5LY3/ntGeLFUpi6tzddBNS58A4tnTgQw1zON7u2sZMU7SzOeVH4tj20++9ggL+V6FDOFMTaFFYA==", + "version": "1.0.30001643", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001643.tgz", + "integrity": "sha512-ERgWGNleEilSrHM6iUz/zJNSQTP8Mr21wDWpdgvRwcTXGAq6jMtOUPP4dqFPTdKqZ2wKTdtB+uucZ3MRpAUSmg==", "dev": true, "funding": [ { @@ -10304,9 +10304,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001559", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001559.tgz", - "integrity": "sha512-cPiMKZgqgkg5LY3/ntGeLFUpi6tzddBNS58A4tnTgQw1zON7u2sZMU7SzOeVH4tj20++9ggL+V6FDOFMTaFFYA==", + "version": "1.0.30001643", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001643.tgz", + "integrity": "sha512-ERgWGNleEilSrHM6iUz/zJNSQTP8Mr21wDWpdgvRwcTXGAq6jMtOUPP4dqFPTdKqZ2wKTdtB+uucZ3MRpAUSmg==", "dev": true }, "chalk": { diff --git a/src/kinescope.ts b/src/kinescope.ts index 823155d..ff07405 100644 --- a/src/kinescope.ts +++ b/src/kinescope.ts @@ -51,6 +51,17 @@ export interface PlaylistItemOptions { }; } +export interface ThemeSubtitles { + /** Base font size in em. */ + textSize: number; + textAlign: 'left' | 'center'; + textLength: 'auto' | number; +} + +export interface Theme { + subtitles?: ThemeSubtitles; +} + export type VideoQuality = | 'auto' | 'index' @@ -167,6 +178,7 @@ export interface KinescopeCreateOptions { playbackRateButton?: boolean; watermark?: WatermarkTypes; }; + theme?: Theme; settings?: { externalId?: string; }; diff --git a/src/player.tsx b/src/player.tsx index 2c4dd90..99f45b7 100644 --- a/src/player.tsx +++ b/src/player.tsx @@ -11,6 +11,7 @@ import { KinescopeCreateOptions, WatermarkTypes, PreloadTypes, + Theme, } from './kinescope'; import Loader from './loader'; import {VIDEO_HOST, VIDEO_PLAYLIST_HOST} from './constant'; @@ -142,6 +143,7 @@ export type PlayerPropsTypes = { bookmarks?: BookmarkTypes[]; watermark?: WatermarkTypes; localStorage?: boolean; + theme?: Theme; onReady?: (data: EventReadyTypes) => void; onQualityChanged?: (data: EventQualityChangedTypes) => void; @@ -234,6 +236,7 @@ class Player extends Component { playbackRateButton, watermark, localStorage, + theme, } = this.props; if (muted !== prevProps.muted) { @@ -255,7 +258,8 @@ class Player extends Component { mainPlayButton !== prevProps.mainPlayButton || playbackRateButton !== prevProps.playbackRateButton || !isEqual(watermark, prevProps.watermark) || - !isEqual(localStorage, prevProps.localStorage) + !isEqual(localStorage, prevProps.localStorage) || + !isEqual(theme, prevProps.theme) ) { await this.create(); } @@ -510,6 +514,7 @@ class Player extends Component { actions, watermark, localStorage, + theme, } = this.props; let options: KinescopeCreateOptions = { @@ -547,6 +552,7 @@ class Player extends Component { playbackRateButton: playbackRateButton, watermark: watermark, }, + theme: theme, settings: { externalId: externalId, },