@gcorevideo/player 2.26.6 → 2.26.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/core.js +19 -13
- package/dist/index.css +729 -729
- package/dist/index.embed.js +18 -11
- package/dist/index.js +20 -13
- package/dist/player.d.ts +18 -2
- package/docs/api/player.md +11 -11
- package/docs/api/player.thumbnails.md +1 -0
- package/docs/api/player.thumbnailspluginsettings.backdropheight.md +11 -0
- package/docs/api/player.thumbnailspluginsettings.backdropmaxopacity.md +11 -0
- package/docs/api/player.thumbnailspluginsettings.backdropminopacity.md +11 -0
- package/docs/api/player.thumbnailspluginsettings.md +154 -9
- package/docs/api/player.thumbnailspluginsettings.spotlightheight.md +11 -0
- package/docs/api/player.thumbnailspluginsettings.sprite.md +11 -0
- package/docs/api/player.thumbnailspluginsettings.vtt.md +13 -0
- package/lib/plugins/thumbnails/Thumbnails.d.ts +18 -2
- package/lib/plugins/thumbnails/Thumbnails.d.ts.map +1 -1
- package/lib/plugins/thumbnails/Thumbnails.js +1 -0
- package/package.json +1 -1
- package/src/plugins/thumbnails/Thumbnails.ts +20 -3
- package/temp/player.api.json +170 -16
- package/tsconfig.tsbuildinfo +1 -1
package/dist/index.embed.js
CHANGED
|
@@ -6118,9 +6118,12 @@ var Core = /*#__PURE__*/function (_UIObject) {
|
|
|
6118
6118
|
var _this3 = this;
|
|
6119
6119
|
this.disableResizeObserver();
|
|
6120
6120
|
var checkSizeCallback = function checkSizeCallback() {
|
|
6121
|
+
var _this3$el$clientWidth, _this3$el$clientHeigh;
|
|
6122
|
+
var width = (_this3$el$clientWidth = _this3.el.clientWidth) !== null && _this3$el$clientWidth !== void 0 ? _this3$el$clientWidth : _this3.options.width;
|
|
6123
|
+
var height = (_this3$el$clientHeigh = _this3.el.clientHeight) !== null && _this3$el$clientHeigh !== void 0 ? _this3$el$clientHeigh : _this3.options.height;
|
|
6121
6124
|
_this3.triggerResize({
|
|
6122
|
-
width:
|
|
6123
|
-
height:
|
|
6125
|
+
width: width,
|
|
6126
|
+
height: height
|
|
6124
6127
|
});
|
|
6125
6128
|
};
|
|
6126
6129
|
this.resizeObserverInterval = setInterval(checkSizeCallback, 500);
|
|
@@ -6210,12 +6213,15 @@ var Core = /*#__PURE__*/function (_UIObject) {
|
|
|
6210
6213
|
}, {
|
|
6211
6214
|
key: "handleWindowResize",
|
|
6212
6215
|
value: function handleWindowResize(event) {
|
|
6216
|
+
var _this$el$clientWidth, _this$el$clientHeight;
|
|
6213
6217
|
var orientation = window.innerWidth > window.innerHeight ? 'landscape' : 'portrait';
|
|
6214
6218
|
if (this._screenOrientation === orientation) return;
|
|
6215
6219
|
this._screenOrientation = orientation;
|
|
6220
|
+
var width = (_this$el$clientWidth = this.el.clientWidth) !== null && _this$el$clientWidth !== void 0 ? _this$el$clientWidth : this.options.width;
|
|
6221
|
+
var height = (_this$el$clientHeight = this.el.clientHeight) !== null && _this$el$clientHeight !== void 0 ? _this$el$clientHeight : this.options.height;
|
|
6216
6222
|
this.triggerResize({
|
|
6217
|
-
width:
|
|
6218
|
-
height:
|
|
6223
|
+
width: width,
|
|
6224
|
+
height: height
|
|
6219
6225
|
});
|
|
6220
6226
|
this.trigger(Events$1.CORE_SCREEN_ORIENTATION_CHANGED, {
|
|
6221
6227
|
event: event,
|
|
@@ -6531,7 +6537,7 @@ var Loader = (function () {
|
|
|
6531
6537
|
plugins: {},
|
|
6532
6538
|
playbacks: []
|
|
6533
6539
|
};
|
|
6534
|
-
var currentVersion = "0.11.
|
|
6540
|
+
var currentVersion = "0.11.5";
|
|
6535
6541
|
return /*#__PURE__*/function () {
|
|
6536
6542
|
/**
|
|
6537
6543
|
* builds the loader
|
|
@@ -7671,7 +7677,7 @@ var HTML5Video$1 = /*#__PURE__*/function (_Playback) {
|
|
|
7671
7677
|
key: "supportedVersion",
|
|
7672
7678
|
get: function get() {
|
|
7673
7679
|
return {
|
|
7674
|
-
min: "0.11.
|
|
7680
|
+
min: "0.11.5"
|
|
7675
7681
|
};
|
|
7676
7682
|
}
|
|
7677
7683
|
}, {
|
|
@@ -8433,7 +8439,7 @@ var HTML5Audio = /*#__PURE__*/function (_HTML5Video) {
|
|
|
8433
8439
|
key: "supportedVersion",
|
|
8434
8440
|
get: function get() {
|
|
8435
8441
|
return {
|
|
8436
|
-
min: "0.11.
|
|
8442
|
+
min: "0.11.5"
|
|
8437
8443
|
};
|
|
8438
8444
|
}
|
|
8439
8445
|
}, {
|
|
@@ -8490,7 +8496,7 @@ var HTMLImg = /*#__PURE__*/function (_Playback) {
|
|
|
8490
8496
|
key: "supportedVersion",
|
|
8491
8497
|
get: function get() {
|
|
8492
8498
|
return {
|
|
8493
|
-
min: "0.11.
|
|
8499
|
+
min: "0.11.5"
|
|
8494
8500
|
};
|
|
8495
8501
|
}
|
|
8496
8502
|
}, {
|
|
@@ -8573,7 +8579,7 @@ var NoOp = /*#__PURE__*/function (_Playback) {
|
|
|
8573
8579
|
key: "supportedVersion",
|
|
8574
8580
|
get: function get() {
|
|
8575
8581
|
return {
|
|
8576
|
-
min: "0.11.
|
|
8582
|
+
min: "0.11.5"
|
|
8577
8583
|
};
|
|
8578
8584
|
}
|
|
8579
8585
|
}, {
|
|
@@ -8699,7 +8705,7 @@ var Strings = /*#__PURE__*/function (_CorePlugin) {
|
|
|
8699
8705
|
key: "supportedVersion",
|
|
8700
8706
|
get: function get() {
|
|
8701
8707
|
return {
|
|
8702
|
-
min: "0.11.
|
|
8708
|
+
min: "0.11.5"
|
|
8703
8709
|
};
|
|
8704
8710
|
}
|
|
8705
8711
|
}, {
|
|
@@ -8841,7 +8847,7 @@ var SourcesPlugin = /*#__PURE__*/function (_CorePlugin) {
|
|
|
8841
8847
|
key: "supportedVersion",
|
|
8842
8848
|
get: function get() {
|
|
8843
8849
|
return {
|
|
8844
|
-
min: "0.11.
|
|
8850
|
+
min: "0.11.5"
|
|
8845
8851
|
};
|
|
8846
8852
|
}
|
|
8847
8853
|
}, {
|
|
@@ -50689,6 +50695,7 @@ function loadImageDimensions(url) {
|
|
|
50689
50695
|
* 'https://static.gvideo.co/videoplatform/sprites/2675/2452164_3dk4NsRt6vWsffEr.mp4_sprite.jpg',
|
|
50690
50696
|
* },
|
|
50691
50697
|
* })
|
|
50698
|
+
|
|
50692
50699
|
* ```
|
|
50693
50700
|
*/
|
|
50694
50701
|
class Thumbnails extends UICorePlugin {
|
package/dist/index.js
CHANGED
|
@@ -6273,9 +6273,12 @@ var Core = /*#__PURE__*/function (_UIObject) {
|
|
|
6273
6273
|
var _this3 = this;
|
|
6274
6274
|
this.disableResizeObserver();
|
|
6275
6275
|
var checkSizeCallback = function checkSizeCallback() {
|
|
6276
|
+
var _this3$el$clientWidth, _this3$el$clientHeigh;
|
|
6277
|
+
var width = (_this3$el$clientWidth = _this3.el.clientWidth) !== null && _this3$el$clientWidth !== void 0 ? _this3$el$clientWidth : _this3.options.width;
|
|
6278
|
+
var height = (_this3$el$clientHeigh = _this3.el.clientHeight) !== null && _this3$el$clientHeigh !== void 0 ? _this3$el$clientHeigh : _this3.options.height;
|
|
6276
6279
|
_this3.triggerResize({
|
|
6277
|
-
width:
|
|
6278
|
-
height:
|
|
6280
|
+
width: width,
|
|
6281
|
+
height: height
|
|
6279
6282
|
});
|
|
6280
6283
|
};
|
|
6281
6284
|
this.resizeObserverInterval = setInterval(checkSizeCallback, 500);
|
|
@@ -6365,12 +6368,15 @@ var Core = /*#__PURE__*/function (_UIObject) {
|
|
|
6365
6368
|
}, {
|
|
6366
6369
|
key: "handleWindowResize",
|
|
6367
6370
|
value: function handleWindowResize(event) {
|
|
6371
|
+
var _this$el$clientWidth, _this$el$clientHeight;
|
|
6368
6372
|
var orientation = window.innerWidth > window.innerHeight ? 'landscape' : 'portrait';
|
|
6369
6373
|
if (this._screenOrientation === orientation) return;
|
|
6370
6374
|
this._screenOrientation = orientation;
|
|
6375
|
+
var width = (_this$el$clientWidth = this.el.clientWidth) !== null && _this$el$clientWidth !== void 0 ? _this$el$clientWidth : this.options.width;
|
|
6376
|
+
var height = (_this$el$clientHeight = this.el.clientHeight) !== null && _this$el$clientHeight !== void 0 ? _this$el$clientHeight : this.options.height;
|
|
6371
6377
|
this.triggerResize({
|
|
6372
|
-
width:
|
|
6373
|
-
height:
|
|
6378
|
+
width: width,
|
|
6379
|
+
height: height
|
|
6374
6380
|
});
|
|
6375
6381
|
this.trigger(Events$1.CORE_SCREEN_ORIENTATION_CHANGED, {
|
|
6376
6382
|
event: event,
|
|
@@ -6686,7 +6692,7 @@ var Loader = (function () {
|
|
|
6686
6692
|
plugins: {},
|
|
6687
6693
|
playbacks: []
|
|
6688
6694
|
};
|
|
6689
|
-
var currentVersion = "0.11.
|
|
6695
|
+
var currentVersion = "0.11.5";
|
|
6690
6696
|
return /*#__PURE__*/function () {
|
|
6691
6697
|
/**
|
|
6692
6698
|
* builds the loader
|
|
@@ -7826,7 +7832,7 @@ var HTML5Video$1 = /*#__PURE__*/function (_Playback) {
|
|
|
7826
7832
|
key: "supportedVersion",
|
|
7827
7833
|
get: function get() {
|
|
7828
7834
|
return {
|
|
7829
|
-
min: "0.11.
|
|
7835
|
+
min: "0.11.5"
|
|
7830
7836
|
};
|
|
7831
7837
|
}
|
|
7832
7838
|
}, {
|
|
@@ -8588,7 +8594,7 @@ var HTML5Audio = /*#__PURE__*/function (_HTML5Video) {
|
|
|
8588
8594
|
key: "supportedVersion",
|
|
8589
8595
|
get: function get() {
|
|
8590
8596
|
return {
|
|
8591
|
-
min: "0.11.
|
|
8597
|
+
min: "0.11.5"
|
|
8592
8598
|
};
|
|
8593
8599
|
}
|
|
8594
8600
|
}, {
|
|
@@ -8645,7 +8651,7 @@ var HTMLImg = /*#__PURE__*/function (_Playback) {
|
|
|
8645
8651
|
key: "supportedVersion",
|
|
8646
8652
|
get: function get() {
|
|
8647
8653
|
return {
|
|
8648
|
-
min: "0.11.
|
|
8654
|
+
min: "0.11.5"
|
|
8649
8655
|
};
|
|
8650
8656
|
}
|
|
8651
8657
|
}, {
|
|
@@ -8728,7 +8734,7 @@ var NoOp = /*#__PURE__*/function (_Playback) {
|
|
|
8728
8734
|
key: "supportedVersion",
|
|
8729
8735
|
get: function get() {
|
|
8730
8736
|
return {
|
|
8731
|
-
min: "0.11.
|
|
8737
|
+
min: "0.11.5"
|
|
8732
8738
|
};
|
|
8733
8739
|
}
|
|
8734
8740
|
}, {
|
|
@@ -8854,7 +8860,7 @@ var Strings = /*#__PURE__*/function (_CorePlugin) {
|
|
|
8854
8860
|
key: "supportedVersion",
|
|
8855
8861
|
get: function get() {
|
|
8856
8862
|
return {
|
|
8857
|
-
min: "0.11.
|
|
8863
|
+
min: "0.11.5"
|
|
8858
8864
|
};
|
|
8859
8865
|
}
|
|
8860
8866
|
}, {
|
|
@@ -8996,7 +9002,7 @@ var SourcesPlugin = /*#__PURE__*/function (_CorePlugin) {
|
|
|
8996
9002
|
key: "supportedVersion",
|
|
8997
9003
|
get: function get() {
|
|
8998
9004
|
return {
|
|
8999
|
-
min: "0.11.
|
|
9005
|
+
min: "0.11.5"
|
|
9000
9006
|
};
|
|
9001
9007
|
}
|
|
9002
9008
|
}, {
|
|
@@ -43259,11 +43265,11 @@ class Player {
|
|
|
43259
43265
|
}
|
|
43260
43266
|
}
|
|
43261
43267
|
|
|
43262
|
-
var version$1 = "2.26.
|
|
43268
|
+
var version$1 = "2.26.8";
|
|
43263
43269
|
|
|
43264
43270
|
var packages = {
|
|
43265
43271
|
"node_modules/@clappr/core": {
|
|
43266
|
-
version: "0.11.
|
|
43272
|
+
version: "0.11.5"},
|
|
43267
43273
|
"node_modules/dashjs": {
|
|
43268
43274
|
version: "4.7.4"},
|
|
43269
43275
|
"node_modules/hls.js": {
|
|
@@ -52213,6 +52219,7 @@ const T$1 = 'plugins.thumbnails';
|
|
|
52213
52219
|
* 'https://static.gvideo.co/videoplatform/sprites/2675/2452164_3dk4NsRt6vWsffEr.mp4_sprite.jpg',
|
|
52214
52220
|
* },
|
|
52215
52221
|
* })
|
|
52222
|
+
|
|
52216
52223
|
* ```
|
|
52217
52224
|
*/
|
|
52218
52225
|
class Thumbnails extends UICorePlugin {
|
package/dist/player.d.ts
CHANGED
|
@@ -3103,6 +3103,7 @@ export declare class ClapprStats extends ContainerPlugin {
|
|
|
3103
3103
|
* 'https://static.gvideo.co/videoplatform/sprites/2675/2452164_3dk4NsRt6vWsffEr.mp4_sprite.jpg',
|
|
3104
3104
|
* },
|
|
3105
3105
|
* })
|
|
3106
|
+
|
|
3106
3107
|
* ```
|
|
3107
3108
|
*/
|
|
3108
3109
|
export declare class Thumbnails extends UICorePlugin {
|
|
@@ -3161,15 +3162,30 @@ export declare class ClapprStats extends ContainerPlugin {
|
|
|
3161
3162
|
/**
|
|
3162
3163
|
* Plugin configuration options for the thumbnails plugin.
|
|
3163
3164
|
* @public
|
|
3165
|
+
* @remarks
|
|
3166
|
+
* Example of a VTT file:
|
|
3167
|
+
* ```text
|
|
3168
|
+
* 1
|
|
3169
|
+
* 00:00:00,000 --> 00:00:10,000
|
|
3170
|
+
* 3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,0,100,56
|
|
3171
|
+
*
|
|
3172
|
+
* 2
|
|
3173
|
+
* 00:00:10,000 --> 00:00:20,000
|
|
3174
|
+
* 3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,0,100,56
|
|
3175
|
+
*
|
|
3176
|
+
* ```
|
|
3164
3177
|
*/
|
|
3165
|
-
export declare
|
|
3178
|
+
export declare interface ThumbnailsPluginSettings {
|
|
3166
3179
|
backdropHeight?: number;
|
|
3167
3180
|
backdropMaxOpacity?: number;
|
|
3168
3181
|
backdropMinOpacity?: number;
|
|
3169
3182
|
spotlightHeight?: number;
|
|
3170
3183
|
sprite: string;
|
|
3184
|
+
/**
|
|
3185
|
+
* The VTT file to use for the thumbnails.
|
|
3186
|
+
*/
|
|
3171
3187
|
vtt: string;
|
|
3172
|
-
}
|
|
3188
|
+
}
|
|
3173
3189
|
|
|
3174
3190
|
/**
|
|
3175
3191
|
* Current playback time and total duration of the media.
|
package/docs/api/player.md
CHANGED
|
@@ -699,6 +699,17 @@ Configuration options for the [QualityLevels](./player.qualitylevels.md) plugin.
|
|
|
699
699
|
**_(BETA)_** Plugin settings
|
|
700
700
|
|
|
701
701
|
|
|
702
|
+
</td></tr>
|
|
703
|
+
<tr><td>
|
|
704
|
+
|
|
705
|
+
[ThumbnailsPluginSettings](./player.thumbnailspluginsettings.md)
|
|
706
|
+
|
|
707
|
+
|
|
708
|
+
</td><td>
|
|
709
|
+
|
|
710
|
+
Plugin configuration options for the thumbnails plugin.
|
|
711
|
+
|
|
712
|
+
|
|
702
713
|
</td></tr>
|
|
703
714
|
<tr><td>
|
|
704
715
|
|
|
@@ -1077,17 +1088,6 @@ Built-in media control elements.
|
|
|
1077
1088
|
**_(BETA)_** Callback to send the telemetry record to the storage.
|
|
1078
1089
|
|
|
1079
1090
|
|
|
1080
|
-
</td></tr>
|
|
1081
|
-
<tr><td>
|
|
1082
|
-
|
|
1083
|
-
[ThumbnailsPluginSettings](./player.thumbnailspluginsettings.md)
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
</td><td>
|
|
1087
|
-
|
|
1088
|
-
Plugin configuration options for the thumbnails plugin.
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
1091
|
</td></tr>
|
|
1092
1092
|
<tr><td>
|
|
1093
1093
|
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@gcorevideo/player](./player.md) > [ThumbnailsPluginSettings](./player.thumbnailspluginsettings.md) > [backdropHeight](./player.thumbnailspluginsettings.backdropheight.md)
|
|
4
|
+
|
|
5
|
+
## ThumbnailsPluginSettings.backdropHeight property
|
|
6
|
+
|
|
7
|
+
**Signature:**
|
|
8
|
+
|
|
9
|
+
```typescript
|
|
10
|
+
backdropHeight?: number;
|
|
11
|
+
```
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@gcorevideo/player](./player.md) > [ThumbnailsPluginSettings](./player.thumbnailspluginsettings.md) > [backdropMaxOpacity](./player.thumbnailspluginsettings.backdropmaxopacity.md)
|
|
4
|
+
|
|
5
|
+
## ThumbnailsPluginSettings.backdropMaxOpacity property
|
|
6
|
+
|
|
7
|
+
**Signature:**
|
|
8
|
+
|
|
9
|
+
```typescript
|
|
10
|
+
backdropMaxOpacity?: number;
|
|
11
|
+
```
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@gcorevideo/player](./player.md) > [ThumbnailsPluginSettings](./player.thumbnailspluginsettings.md) > [backdropMinOpacity](./player.thumbnailspluginsettings.backdropminopacity.md)
|
|
4
|
+
|
|
5
|
+
## ThumbnailsPluginSettings.backdropMinOpacity property
|
|
6
|
+
|
|
7
|
+
**Signature:**
|
|
8
|
+
|
|
9
|
+
```typescript
|
|
10
|
+
backdropMinOpacity?: number;
|
|
11
|
+
```
|
|
@@ -2,19 +2,164 @@
|
|
|
2
2
|
|
|
3
3
|
[Home](./index.md) > [@gcorevideo/player](./player.md) > [ThumbnailsPluginSettings](./player.thumbnailspluginsettings.md)
|
|
4
4
|
|
|
5
|
-
## ThumbnailsPluginSettings
|
|
5
|
+
## ThumbnailsPluginSettings interface
|
|
6
6
|
|
|
7
7
|
Plugin configuration options for the thumbnails plugin.
|
|
8
8
|
|
|
9
9
|
**Signature:**
|
|
10
10
|
|
|
11
11
|
```typescript
|
|
12
|
-
export
|
|
13
|
-
backdropHeight?: number;
|
|
14
|
-
backdropMaxOpacity?: number;
|
|
15
|
-
backdropMinOpacity?: number;
|
|
16
|
-
spotlightHeight?: number;
|
|
17
|
-
sprite: string;
|
|
18
|
-
vtt: string;
|
|
19
|
-
};
|
|
12
|
+
export interface ThumbnailsPluginSettings
|
|
20
13
|
```
|
|
14
|
+
|
|
15
|
+
## Remarks
|
|
16
|
+
|
|
17
|
+
Example of a VTT file:
|
|
18
|
+
|
|
19
|
+
```text
|
|
20
|
+
1
|
|
21
|
+
00:00:00,000 --> 00:00:10,000
|
|
22
|
+
3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,0,100,56
|
|
23
|
+
|
|
24
|
+
2
|
|
25
|
+
00:00:10,000 --> 00:00:20,000
|
|
26
|
+
3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,0,100,56
|
|
27
|
+
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Properties
|
|
31
|
+
|
|
32
|
+
<table><thead><tr><th>
|
|
33
|
+
|
|
34
|
+
Property
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
</th><th>
|
|
38
|
+
|
|
39
|
+
Modifiers
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
</th><th>
|
|
43
|
+
|
|
44
|
+
Type
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
</th><th>
|
|
48
|
+
|
|
49
|
+
Description
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
</th></tr></thead>
|
|
53
|
+
<tbody><tr><td>
|
|
54
|
+
|
|
55
|
+
[backdropHeight?](./player.thumbnailspluginsettings.backdropheight.md)
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
</td><td>
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
</td><td>
|
|
62
|
+
|
|
63
|
+
number
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
</td><td>
|
|
67
|
+
|
|
68
|
+
_(Optional)_
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
</td></tr>
|
|
72
|
+
<tr><td>
|
|
73
|
+
|
|
74
|
+
[backdropMaxOpacity?](./player.thumbnailspluginsettings.backdropmaxopacity.md)
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
</td><td>
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
</td><td>
|
|
81
|
+
|
|
82
|
+
number
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
</td><td>
|
|
86
|
+
|
|
87
|
+
_(Optional)_
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
</td></tr>
|
|
91
|
+
<tr><td>
|
|
92
|
+
|
|
93
|
+
[backdropMinOpacity?](./player.thumbnailspluginsettings.backdropminopacity.md)
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
</td><td>
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
</td><td>
|
|
100
|
+
|
|
101
|
+
number
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
</td><td>
|
|
105
|
+
|
|
106
|
+
_(Optional)_
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
</td></tr>
|
|
110
|
+
<tr><td>
|
|
111
|
+
|
|
112
|
+
[spotlightHeight?](./player.thumbnailspluginsettings.spotlightheight.md)
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
</td><td>
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
</td><td>
|
|
119
|
+
|
|
120
|
+
number
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
</td><td>
|
|
124
|
+
|
|
125
|
+
_(Optional)_
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
</td></tr>
|
|
129
|
+
<tr><td>
|
|
130
|
+
|
|
131
|
+
[sprite](./player.thumbnailspluginsettings.sprite.md)
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
</td><td>
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
</td><td>
|
|
138
|
+
|
|
139
|
+
string
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
</td><td>
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
</td></tr>
|
|
146
|
+
<tr><td>
|
|
147
|
+
|
|
148
|
+
[vtt](./player.thumbnailspluginsettings.vtt.md)
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
</td><td>
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
</td><td>
|
|
155
|
+
|
|
156
|
+
string
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
</td><td>
|
|
160
|
+
|
|
161
|
+
The VTT file to use for the thumbnails.
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
</td></tr>
|
|
165
|
+
</tbody></table>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@gcorevideo/player](./player.md) > [ThumbnailsPluginSettings](./player.thumbnailspluginsettings.md) > [spotlightHeight](./player.thumbnailspluginsettings.spotlightheight.md)
|
|
4
|
+
|
|
5
|
+
## ThumbnailsPluginSettings.spotlightHeight property
|
|
6
|
+
|
|
7
|
+
**Signature:**
|
|
8
|
+
|
|
9
|
+
```typescript
|
|
10
|
+
spotlightHeight?: number;
|
|
11
|
+
```
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@gcorevideo/player](./player.md) > [ThumbnailsPluginSettings](./player.thumbnailspluginsettings.md) > [sprite](./player.thumbnailspluginsettings.sprite.md)
|
|
4
|
+
|
|
5
|
+
## ThumbnailsPluginSettings.sprite property
|
|
6
|
+
|
|
7
|
+
**Signature:**
|
|
8
|
+
|
|
9
|
+
```typescript
|
|
10
|
+
sprite: string;
|
|
11
|
+
```
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@gcorevideo/player](./player.md) > [ThumbnailsPluginSettings](./player.thumbnailspluginsettings.md) > [vtt](./player.thumbnailspluginsettings.vtt.md)
|
|
4
|
+
|
|
5
|
+
## ThumbnailsPluginSettings.vtt property
|
|
6
|
+
|
|
7
|
+
The VTT file to use for the thumbnails.
|
|
8
|
+
|
|
9
|
+
**Signature:**
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
vtt: string;
|
|
13
|
+
```
|
|
@@ -3,15 +3,30 @@ import '../../../assets/thumbnails/style.scss';
|
|
|
3
3
|
/**
|
|
4
4
|
* Plugin configuration options for the thumbnails plugin.
|
|
5
5
|
* @public
|
|
6
|
+
* @remarks
|
|
7
|
+
* Example of a VTT file:
|
|
8
|
+
* ```text
|
|
9
|
+
* 1
|
|
10
|
+
* 00:00:00,000 --> 00:00:10,000
|
|
11
|
+
* 3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,0,100,56
|
|
12
|
+
*
|
|
13
|
+
* 2
|
|
14
|
+
* 00:00:10,000 --> 00:00:20,000
|
|
15
|
+
* 3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,0,100,56
|
|
16
|
+
*
|
|
17
|
+
* ```
|
|
6
18
|
*/
|
|
7
|
-
export
|
|
19
|
+
export interface ThumbnailsPluginSettings {
|
|
8
20
|
backdropHeight?: number;
|
|
9
21
|
backdropMaxOpacity?: number;
|
|
10
22
|
backdropMinOpacity?: number;
|
|
11
23
|
spotlightHeight?: number;
|
|
12
24
|
sprite: string;
|
|
25
|
+
/**
|
|
26
|
+
* The VTT file to use for the thumbnails.
|
|
27
|
+
*/
|
|
13
28
|
vtt: string;
|
|
14
|
-
}
|
|
29
|
+
}
|
|
15
30
|
/**
|
|
16
31
|
* `PLUGIN` that displays the thumbnails of the video when available.
|
|
17
32
|
* @public
|
|
@@ -38,6 +53,7 @@ export type ThumbnailsPluginSettings = {
|
|
|
38
53
|
* 'https://static.gvideo.co/videoplatform/sprites/2675/2452164_3dk4NsRt6vWsffEr.mp4_sprite.jpg',
|
|
39
54
|
* },
|
|
40
55
|
* })
|
|
56
|
+
|
|
41
57
|
* ```
|
|
42
58
|
*/
|
|
43
59
|
export declare class Thumbnails extends UICorePlugin {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Thumbnails.d.ts","sourceRoot":"","sources":["../../../src/plugins/thumbnails/Thumbnails.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAKZ,IAAI,EACL,MAAM,cAAc,CAAA;AAUrB,OAAO,uCAAuC,CAAA;AAM9C
|
|
1
|
+
{"version":3,"file":"Thumbnails.d.ts","sourceRoot":"","sources":["../../../src/plugins/thumbnails/Thumbnails.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAKZ,IAAI,EACL,MAAM,cAAc,CAAA;AAUrB,OAAO,uCAAuC,CAAA;AAM9C;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,wBAAwB;IACvC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,GAAG,EAAE,MAAM,CAAA;CACZ;AAeD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,qBAAqB,CAAoB;IAEjD,OAAO,CAAC,iBAAiB,CAAY;IAErC,OAAO,CAAC,gBAAgB,CAAY;IAEpC,OAAO,CAAC,aAAa,CAAI;IAEzB,OAAO,CAAC,OAAO,CAAQ;IAEvB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,eAAe,CAAI;IAE3B,OAAO,CAAC,cAAc,CAAI;IAE1B,OAAO,CAAC,MAAM,CAAsB;IAEpC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;gBAE3C,IAAI,EAAE,IAAI;IAgBtB,OAAO,CAAC,iBAAiB;IAiCzB;;OAEG;IACM,UAAU;IAInB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,WAAW;YAmDL,eAAe;IAO7B,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,IAAI;IAaZ,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,eAAe;IAwBvB,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,cAAc;IAuEtB,OAAO,CAAC,oBAAoB;IAiD5B,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,MAAM;IAad,OAAO,CAAC,WAAW;IAgBnB,OAAO,KAAK,YAAY,GAMvB;IAEQ,MAAM;CAShB"}
|
package/package.json
CHANGED
|
@@ -24,13 +24,28 @@ import { loadImageDimensions } from './utils.js'
|
|
|
24
24
|
/**
|
|
25
25
|
* Plugin configuration options for the thumbnails plugin.
|
|
26
26
|
* @public
|
|
27
|
+
* @remarks
|
|
28
|
+
* Example of a VTT file:
|
|
29
|
+
* ```text
|
|
30
|
+
* 1
|
|
31
|
+
* 00:00:00,000 --> 00:00:10,000
|
|
32
|
+
* 3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,0,100,56
|
|
33
|
+
*
|
|
34
|
+
* 2
|
|
35
|
+
* 00:00:10,000 --> 00:00:20,000
|
|
36
|
+
* 3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,0,100,56
|
|
37
|
+
*
|
|
38
|
+
* ```
|
|
27
39
|
*/
|
|
28
|
-
export
|
|
40
|
+
export interface ThumbnailsPluginSettings {
|
|
29
41
|
backdropHeight?: number
|
|
30
42
|
backdropMaxOpacity?: number
|
|
31
43
|
backdropMinOpacity?: number
|
|
32
44
|
spotlightHeight?: number
|
|
33
45
|
sprite: string
|
|
46
|
+
/**
|
|
47
|
+
* The VTT file to use for the thumbnails.
|
|
48
|
+
*/
|
|
34
49
|
vtt: string
|
|
35
50
|
}
|
|
36
51
|
|
|
@@ -73,6 +88,7 @@ const T = 'plugins.thumbnails'
|
|
|
73
88
|
* 'https://static.gvideo.co/videoplatform/sprites/2675/2452164_3dk4NsRt6vWsffEr.mp4_sprite.jpg',
|
|
74
89
|
* },
|
|
75
90
|
* })
|
|
91
|
+
|
|
76
92
|
* ```
|
|
77
93
|
*/
|
|
78
94
|
export class Thumbnails extends UICorePlugin {
|
|
@@ -257,7 +273,7 @@ export class Thumbnails extends UICorePlugin {
|
|
|
257
273
|
private mount() {
|
|
258
274
|
const mediaControl = this.core.getPlugin('media_control') as MediaControl
|
|
259
275
|
mediaControl.$el.find('.seek-time').css('bottom', 56) // TODO check the offset
|
|
260
|
-
mediaControl.$el.first().after(this.$el)
|
|
276
|
+
mediaControl.$el.first().after(this.$el)
|
|
261
277
|
}
|
|
262
278
|
|
|
263
279
|
private onMouseMoveSeekbar(_: MouseEvent, pos: number) {
|
|
@@ -279,7 +295,8 @@ export class Thumbnails extends UICorePlugin {
|
|
|
279
295
|
$ref?: ZeptoResult,
|
|
280
296
|
) {
|
|
281
297
|
const scaleFactor = height / thumb.h
|
|
282
|
-
const $container =
|
|
298
|
+
const $container =
|
|
299
|
+
$ref && $ref.length ? $ref : $('<div />').addClass('thumbnail-container')
|
|
283
300
|
|
|
284
301
|
$container.css('width', thumb.w * scaleFactor)
|
|
285
302
|
$container.css('height', height)
|