Skip to content

Commit

Permalink
feat: theme subtitles
Browse files Browse the repository at this point in the history
  • Loading branch information
@pushpush
pushpush committed Jul 24, 2024
1 parent 21114c3 commit 838aeca
Show file tree
Hide file tree
Showing 9 changed files with 73 additions and 17 deletions.
18 changes: 18 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,12 @@ export default Player;
<td><a href="#watermark">Watermark</a></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>theme</td>
<td><a href="#theme">Theme</a></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>localStorage</td>
Expand Down Expand Up @@ -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
<table>
<tr>
Expand Down
10 changes: 10 additions & 0 deletions dist/kinescope.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]: {
Expand Down Expand Up @@ -147,6 +156,7 @@ export interface KinescopeCreateOptions {
playbackRateButton?: boolean;
watermark?: WatermarkTypes;
};
theme?: Theme;
settings?: {
externalId?: string;
};
Expand Down
3 changes: 2 additions & 1 deletion dist/player.d.ts
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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;
Expand Down
9 changes: 6 additions & 3 deletions dist/player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {});
}
}();
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -716,6 +718,7 @@ var Player = /*#__PURE__*/function (_Component) {
playbackRateButton: playbackRateButton,
watermark: watermark
},
theme: theme,
settings: {
externalId: externalId
}
Expand Down
9 changes: 6 additions & 3 deletions dist/player.module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {});
}
}();
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -712,6 +714,7 @@ var Player = /*#__PURE__*/function (_Component) {
playbackRateButton: playbackRateButton,
watermark: watermark
},
theme: theme,
settings: {
externalId: externalId
}
Expand Down
9 changes: 6 additions & 3 deletions dist/player.umd.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {});
}
}();
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -719,6 +721,7 @@
playbackRateButton: playbackRateButton,
watermark: watermark
},
theme: theme,
settings: {
externalId: externalId
}
Expand Down
12 changes: 6 additions & 6 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 12 additions & 0 deletions src/kinescope.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -167,6 +178,7 @@ export interface KinescopeCreateOptions {
playbackRateButton?: boolean;
watermark?: WatermarkTypes;
};
theme?: Theme;
settings?: {
externalId?: string;
};
Expand Down
8 changes: 7 additions & 1 deletion src/player.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
KinescopeCreateOptions,
WatermarkTypes,
PreloadTypes,
Theme,
} from './kinescope';
import Loader from './loader';
import {VIDEO_HOST, VIDEO_PLAYLIST_HOST} from './constant';
Expand Down Expand Up @@ -142,6 +143,7 @@ export type PlayerPropsTypes = {
bookmarks?: BookmarkTypes[];
watermark?: WatermarkTypes;
localStorage?: boolean;
theme?: Theme;

onReady?: (data: EventReadyTypes) => void;
onQualityChanged?: (data: EventQualityChangedTypes) => void;
Expand Down Expand Up @@ -234,6 +236,7 @@ class Player extends Component<PlayerPropsTypes> {
playbackRateButton,
watermark,
localStorage,
theme,
} = this.props;

if (muted !== prevProps.muted) {
Expand All @@ -255,7 +258,8 @@ class Player extends Component<PlayerPropsTypes> {
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();
}
Expand Down Expand Up @@ -510,6 +514,7 @@ class Player extends Component<PlayerPropsTypes> {
actions,
watermark,
localStorage,
theme,
} = this.props;

let options: KinescopeCreateOptions = {
Expand Down Expand Up @@ -547,6 +552,7 @@ class Player extends Component<PlayerPropsTypes> {
playbackRateButton: playbackRateButton,
watermark: watermark,
},
theme: theme,
settings: {
externalId: externalId,
},
Expand Down

0 comments on commit 838aeca

Please sign in to comment.