Skip to content

Commit

Permalink
feat(player): Added new configuration element to set default duration…
Browse files Browse the repository at this point in the history 
… label while media loads
  • Loading branch information
@rafa8626
rafa8626 committed Feb 15, 2021
1 parent 4444b80 commit 48d0eef
Show file tree
Hide file tree
Showing 11 changed files with 40 additions and 26 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Expand Up @@ -19,7 +19,7 @@ This is a media player that uses all the goods of HTML5 video/audio elements to
* **Enhance your player** adding your own buttons. Check [here](./docs/customize.md) for more details.
* Provides the ability to use a **single VAST/VPAID** source or a **VAST/VPAID playlist** from several different sources (including URLs and valid XML strings).
* **Can play ads in infinite loop**, desired for ads that are in a heavy text page.
* Always **responsive** by default, for both video/audio tags; for video, **`fill`** and **fit** modes are available to either scale and crop media relative to its parent container, or to attempt to make the media fit its parent container (including black bars), respectively.
* Always **responsive** by default, for both video/audio tags; for video, **`fill`** and **`fit`** modes are available to either scale and crop media relative to its parent container, or to attempt to make the media fit its parent container (including black bars), respectively.

## :warning: IMPORTANT: Migrating from v1.x.x to v2.x.x :warning:

Expand Down
8 changes: 4 additions & 4 deletions dist/esm/controls/progress.js
View file
Expand Up @@ -123,7 +123,7 @@ class Progress {
this.slider.value = current.toString();
this.slider.style.backgroundSize = `${(current - min) * 100 / (max - min)}% 100%`;
this.played.value = el.duration <= 0 || isNaN(el.duration) || !isFinite(el.duration) ?
0 : ((current / el.duration) * 100);
this.player.getOptions().progress.duration : ((current / el.duration) * 100);
if (this.player.getElement().getAttribute('op-dvr__enabled') && Math.floor(this.played.value) >= 99) {
lastCurrentTime = el.currentTime;
this.progress.setAttribute('aria-hidden', 'false');
Expand All @@ -139,7 +139,7 @@ class Progress {
this.slider.setAttribute('max', `${el.duration}`);
this.progress.setAttribute('aria-valuemax', el.duration.toString());
this.played.value = el.duration <= 0 || isNaN(el.duration) || !isFinite(el.duration) ?
0 : ((current / el.duration) * 100);
this.player.getOptions().progress.duration : ((current / el.duration) * 100);
};
this.events.media.ended = () => {
this.slider.style.backgroundSize = '0% 100%';
Expand All @@ -159,7 +159,7 @@ class Progress {
const val = parseFloat(target.value);
this.slider.style.backgroundSize = `${(val - min) * 100 / (max - min)}% 100%`;
this.played.value = el.duration <= 0 || isNaN(el.duration) || !isFinite(el.duration) ?
0 : ((val / el.duration) * 100);
this.player.getOptions().progress.duration : ((val / el.duration) * 100);
if (this.player.getElement().getAttribute('op-dvr__enabled')) {
el.currentTime = (Math.round(this.played.value) >= 99) ? lastCurrentTime : val;
}
Expand Down Expand Up @@ -286,7 +286,7 @@ class Progress {
const isAd = this.player.isAd();
const key = e.which || e.keyCode || 0;
const newStep = this.player.getOptions().step ? this.player.getOptions().step : el.duration * 0.05;
const step = el.duration !== Infinity ? newStep : 0;
const step = el.duration !== Infinity ? newStep : this.player.getOptions().progress.duration;
if (key === 35 && !isAd) {
el.currentTime = el.duration;
e.preventDefault();
Expand Down
6 changes: 3 additions & 3 deletions dist/esm/controls/time.js
View file
Expand Up @@ -27,11 +27,11 @@ class Time {
this.duration = document.createElement('time');
this.duration.className = 'op-controls__duration';
this.duration.setAttribute('aria-hidden', 'false');
this.duration.innerText = '0:00';
this.duration.innerText = formatTime(this.player.getOptions().progress.duration);
const setInitialTime = () => {
const el = this.player.activeElement();
if (el.duration !== Infinity && !this.player.getElement().getAttribute('op-live__enabled')) {
const duration = !isNaN(el.duration) ? el.duration : 0;
const duration = !isNaN(el.duration) ? el.duration : this.player.getOptions().progress.duration;
this.duration.innerText = formatTime(duration);
this.current.innerText = formatTime(el.currentTime);
}
Expand Down Expand Up @@ -74,7 +74,7 @@ class Time {
};
this.events.media.ended = () => {
const el = this.player.activeElement();
const duration = !isNaN(el.duration) ? el.duration : 0;
const duration = !isNaN(el.duration) ? el.duration : this.player.getOptions().progress.duration;
if (this.player.isMedia()) {
this.duration.innerText = formatTime(duration);
}
Expand Down
3 changes: 3 additions & 0 deletions dist/esm/player.js
View file
Expand Up @@ -70,6 +70,9 @@ class Player {
},
mode: 'responsive',
onError: () => { },
progress: {
duration: 0,
},
showLoaderOnInit: false,
startTime: 0,
startVolume: 1,
Expand Down
17 changes: 10 additions & 7 deletions dist/openplayer.js
View file
Expand Up @@ -1667,6 +1667,9 @@ var Player = function () {
},
mode: 'responsive',
onError: function onError() {},
progress: {
duration: 0
},
showLoaderOnInit: false,
startTime: 0,
startVolume: 1,
Expand Down Expand Up @@ -6841,7 +6844,7 @@ var Progress = function () {
var max = parseFloat(_this.slider.max);
_this.slider.value = current.toString();
_this.slider.style.backgroundSize = "".concat((current - min) * 100 / (max - min), "% 100%");
_this.played.value = el.duration <= 0 || isNaN(el.duration) || !isFinite(el.duration) ? 0 : current / el.duration * 100;
_this.played.value = el.duration <= 0 || isNaN(el.duration) || !isFinite(el.duration) ? _this.player.getOptions().progress.duration : current / el.duration * 100;

if (_this.player.getElement().getAttribute('op-dvr__enabled') && Math.floor(_this.played.value) >= 99) {
lastCurrentTime = el.currentTime;
Expand All @@ -6862,7 +6865,7 @@ var Progress = function () {

_this.progress.setAttribute('aria-valuemax', el.duration.toString());

_this.played.value = el.duration <= 0 || isNaN(el.duration) || !isFinite(el.duration) ? 0 : current / el.duration * 100;
_this.played.value = el.duration <= 0 || isNaN(el.duration) || !isFinite(el.duration) ? _this.player.getOptions().progress.duration : current / el.duration * 100;
};

this.events.media.ended = function () {
Expand All @@ -6889,7 +6892,7 @@ var Progress = function () {
var max = parseFloat(target.max);
var val = parseFloat(target.value);
_this.slider.style.backgroundSize = "".concat((val - min) * 100 / (max - min), "% 100%");
_this.played.value = el.duration <= 0 || isNaN(el.duration) || !isFinite(el.duration) ? 0 : val / el.duration * 100;
_this.played.value = el.duration <= 0 || isNaN(el.duration) || !isFinite(el.duration) ? _this.player.getOptions().progress.duration : val / el.duration * 100;

if (_this.player.getElement().getAttribute('op-dvr__enabled')) {
el.currentTime = Math.round(_this.played.value) >= 99 ? lastCurrentTime : val;
Expand Down Expand Up @@ -7040,7 +7043,7 @@ var Progress = function () {
var isAd = this.player.isAd();
var key = e.which || e.keyCode || 0;
var newStep = this.player.getOptions().step ? this.player.getOptions().step : el.duration * 0.05;
var step = el.duration !== Infinity ? newStep : 0;
var step = el.duration !== Infinity ? newStep : this.player.getOptions().progress.duration;

if (key === 35 && !isAd) {
el.currentTime = el.duration;
Expand Down Expand Up @@ -7437,13 +7440,13 @@ var Time = function () {
this.duration = document.createElement('time');
this.duration.className = 'op-controls__duration';
this.duration.setAttribute('aria-hidden', 'false');
this.duration.innerText = '0:00';
this.duration.innerText = time_1.formatTime(this.player.getOptions().progress.duration);

var setInitialTime = function setInitialTime() {
var el = _this.player.activeElement();

if (el.duration !== Infinity && !_this.player.getElement().getAttribute('op-live__enabled')) {
var duration = !isNaN(el.duration) ? el.duration : 0;
var duration = !isNaN(el.duration) ? el.duration : _this.player.getOptions().progress.duration;
_this.duration.innerText = time_1.formatTime(duration);
_this.current.innerText = time_1.formatTime(el.currentTime);
} else {
Expand Down Expand Up @@ -7494,7 +7497,7 @@ var Time = function () {
this.events.media.ended = function () {
var el = _this.player.activeElement();

var duration = !isNaN(el.duration) ? el.duration : 0;
var duration = !isNaN(el.duration) ? el.duration : _this.player.getOptions().progress.duration;

if (_this.player.isMedia()) {
_this.duration.innerText = time_1.formatTime(duration);
Expand Down
2 changes: 1 addition & 1 deletion dist/openplayer.min.js
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions docs/api.md
View file
Expand Up @@ -21,6 +21,7 @@ Method | Description
`load` | Load media. HLS and M(PEG)-DASH perform more operations during loading if browser does not support them natively.
`addCaptions` | Append a new `<track>` tag to the video/audio tag and dispatch event so it gets registered/loaded in the player, via `controlschanged` event.
`addControl` | Append a new button to the video/audio tag with the possibility dispatch a custom callback so it gets registered/loaded in the player, via `controlschanged` event. It requires an object with `icon` URL/path, `title` for the button, the `position` (`right` or `left`) of the button and a `click` callback to dispatch an action.
`removeControl` | Remove a control from the control bar; it can be a default element or a custom control.
`destroy` | Destroy OpenMedia Player instance (including all events associated) and return the `video/audio` tag to its original state.
`getAd` | Retrieve an instance of the `Ads` object.
`getMedia` | Retrieve an instance of the `Media` object.
Expand Down
10 changes: 7 additions & 3 deletions docs/usage.md
View file
Expand Up @@ -108,9 +108,6 @@ var player = new OpenPlayerJS('[player ID]', {
// Custom path/URL to IMA SDK
sdkPath,
},
hls: {
// all HLS options available at https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning.
},
dash: {
// Possible values are SW_SECURE_CRYPTO, SW_SECURE_DECODE, HW_SECURE_CRYPTO, HW_SECURE_CRYPTO,
// HW_SECURE_DECODE, HW_SECURE_ALL
Expand All @@ -123,6 +120,13 @@ var player = new OpenPlayerJS('[player ID]', {
flv: {
// all FLV options available at https://github.com/bilibili/flv.js/blob/master/docs/api.md#mediadatasource
},
hls: {
// all HLS options available at https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning.
},
progress: {
// The default duration to show while loading the media (default: 0)
duration
},
// Force the player to have a specific width/height (default for both: 0)
// They can accept a string with the number and unit (`100%`, `350px`)
// or just a number of pixels
Expand Down
8 changes: 4 additions & 4 deletions src/js/controls/progress.ts
View file
Expand Up @@ -264,7 +264,7 @@ class Progress implements PlayerComponent {
this.slider.value = current.toString();
this.slider.style.backgroundSize = `${(current - min) * 100 / (max - min)}% 100%`;
this.played.value = el.duration <= 0 || isNaN(el.duration) || !isFinite(el.duration) ?
0 : ((current / el.duration) * 100);
this.player.getOptions().progress.duration : ((current / el.duration) * 100);

if (this.player.getElement().getAttribute('op-dvr__enabled') && Math.floor(this.played.value) >= 99) {
lastCurrentTime = el.currentTime;
Expand All @@ -281,7 +281,7 @@ class Progress implements PlayerComponent {
this.slider.setAttribute('max', `${el.duration}`);
this.progress.setAttribute('aria-valuemax', el.duration.toString());
this.played.value = el.duration <= 0 || isNaN(el.duration) || !isFinite(el.duration) ?
0 : ((current / el.duration) * 100);
this.player.getOptions().progress.duration : ((current / el.duration) * 100);
};

this.events.media.ended = () => {
Expand All @@ -308,7 +308,7 @@ class Progress implements PlayerComponent {
const val = parseFloat(target.value);
this.slider.style.backgroundSize = `${(val - min) * 100 / (max - min)}% 100%`;
this.played.value = el.duration <= 0 || isNaN(el.duration) || !isFinite(el.duration) ?
0 : ((val / el.duration) * 100);
this.player.getOptions().progress.duration : ((val / el.duration) * 100);

if (this.player.getElement().getAttribute('op-dvr__enabled')) {
el.currentTime = (Math.round(this.played.value) >= 99) ? lastCurrentTime : val;
Expand Down Expand Up @@ -486,7 +486,7 @@ class Progress implements PlayerComponent {
const key = e.which || e.keyCode || 0;
// By default, if no `step` set, it will skip 5% of the duration of the media
const newStep = this.player.getOptions().step ? this.player.getOptions().step : el.duration * 0.05;
const step = el.duration !== Infinity ? newStep : 0;
const step = el.duration !== Infinity ? newStep : this.player.getOptions().progress.duration;

if (key === 35 && !isAd) {
el.currentTime = el.duration;
Expand Down
6 changes: 3 additions & 3 deletions src/js/controls/time.ts
View file
Expand Up @@ -142,12 +142,12 @@ class Time implements PlayerComponent {
this.duration = document.createElement('time');
this.duration.className = 'op-controls__duration';
this.duration.setAttribute('aria-hidden', 'false');
this.duration.innerText = '0:00';
this.duration.innerText = formatTime(this.player.getOptions().progress.duration);

const setInitialTime = () => {
const el = this.player.activeElement();
if (el.duration !== Infinity && !this.player.getElement().getAttribute('op-live__enabled')) {
const duration = !isNaN(el.duration) ? el.duration : 0;
const duration = !isNaN(el.duration) ? el.duration : this.player.getOptions().progress.duration;
this.duration.innerText = formatTime(duration);
this.current.innerText = formatTime(el.currentTime);
} else {
Expand Down Expand Up @@ -188,7 +188,7 @@ class Time implements PlayerComponent {
};
this.events.media.ended = () => {
const el = this.player.activeElement();
const duration = !isNaN(el.duration) ? el.duration : 0;
const duration = !isNaN(el.duration) ? el.duration : this.player.getOptions().progress.duration;
if (this.player.isMedia()) {
this.duration.innerText = formatTime(duration);
}
Expand Down
3 changes: 3 additions & 0 deletions src/js/player.ts
View file
Expand Up @@ -275,6 +275,9 @@ class Player {
},
mode: 'responsive', // or `fill` or `fit`
onError: () => { },
progress: {
duration: 0,
},
showLoaderOnInit: false,
startTime: 0,
startVolume: 1,
Expand Down

0 comments on commit 48d0eef

Please sign in to comment.