ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Style tweaks for preview plugin

Browse Source
This commit is contained in:
Sam Potts 2019-01-22 16:24:46 +11:00
parent 263e88f6b3
commit c577eb01ce
14 changed files with 153 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/dist/demo.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

86
dist/plyr.js vendored
View File

@ -3443,10 +3443,12 @@ typeof navigator === "object" && (function (global, factory) {
previewThumbnails: { previewThumbnails: {
// Tooltip thumbs // Tooltip thumbs
thumbContainer: 'plyr__preview-thumb', thumbContainer: 'plyr__preview-thumb',
thumbContainerShown: 'plyr__preview-thumb--is-shown',
imageContainer: 'plyr__preview-thumb__image-container', imageContainer: 'plyr__preview-thumb__image-container',
timeContainer: 'plyr__preview-thumb__time-container', timeContainer: 'plyr__preview-thumb__time-container',
// Scrubber // Scrubbing
scrubbingContainer: 'plyr__preview-scrubber' scrubbingContainer: 'plyr__preview-scrubbing',
scrubbingContainerShown: 'plyr__preview-scrubbing--is-shown'
} }
}, },
// Embed attributes // Embed attributes
@ -6620,7 +6622,7 @@ typeof navigator === "object" && (function (global, factory) {
function () { function () {
/** /**
* PreviewThumbnails constructor. * PreviewThumbnails constructor.
* @param {object} player * @param {Plyr} player
* @return {PreviewThumbnails} * @return {PreviewThumbnails}
*/ */
function PreviewThumbnails(player) { function PreviewThumbnails(player) {
@ -6633,7 +6635,7 @@ typeof navigator === "object" && (function (global, factory) {
this.loadedImages = []; this.loadedImages = [];
this.elements = { this.elements = {
thumb: {}, thumb: {},
scrubber: {} scrubbing: {}
}; };
if (this.enabled) { if (this.enabled) {
@ -6772,13 +6774,13 @@ typeof navigator === "object" && (function (global, factory) {
}); // Hide thumbnail preview - on mouse click, mouse leave, and video play/seek. All four are required, e.g., for buffering }); // Hide thumbnail preview - on mouse click, mouse leave, and video play/seek. All four are required, e.g., for buffering
on.call(this.player, this.player.elements.progress, 'mouseleave click', function () { on.call(this.player, this.player.elements.progress, 'mouseleave click', function () {
_this4.hideThumbContainer(true); _this4.toggleThumbContainer(false, true);
}); });
this.player.on('play', function () { this.player.on('play', function () {
_this4.hideThumbContainer(true); _this4.toggleThumbContainer(false, true);
}); });
this.player.on('seeked', function () { this.player.on('seeked', function () {
_this4.hideThumbContainer(false); _this4.toggleThumbContainer(false);
}); // Show scrubbing preview }); // Show scrubbing preview
on.call(this.player, this.player.elements.progress, 'mousedown touchstart', function (event) { on.call(this.player, this.player.elements.progress, 'mousedown touchstart', function (event) {
@ -6787,9 +6789,9 @@ typeof navigator === "object" && (function (global, factory) {
_this4.mouseDown = true; // Wait until media has a duration _this4.mouseDown = true; // Wait until media has a duration
if (_this4.player.media.duration) { if (_this4.player.media.duration) {
_this4.showScrubbingContainer(); _this4.toggleScrubbingContainer(true);
_this4.hideThumbContainer(true); // Download and show image _this4.toggleThumbContainer(false, true); // Download and show image
_this4.showImageAtCurrentTime(); _this4.showImageAtCurrentTime();
@ -6804,13 +6806,13 @@ typeof navigator === "object" && (function (global, factory) {
if (Math.ceil(_this4.timeAtLastTimeupdate) === Math.ceil(_this4.player.media.currentTime)) { if (Math.ceil(_this4.timeAtLastTimeupdate) === Math.ceil(_this4.player.media.currentTime)) {
// The video was already seeked/loaded at the chosen time - hide immediately // The video was already seeked/loaded at the chosen time - hide immediately
_this4.hideScrubbingContainer(); _this4.toggleScrubbingContainer(false);
} else { } else {
// The video hasn't seeked yet. Wait for that // The video hasn't seeked yet. Wait for that
once.call(_this4.player, _this4.player.media, 'timeupdate', function () { once.call(_this4.player, _this4.player.media, 'timeupdate', function () {
// Re-check mousedown - we might have already started scrubbing again // Re-check mousedown - we might have already started scrubbing again
if (!_this4.mouseDown) { if (!_this4.mouseDown) {
_this4.hideScrubbingContainer(); _this4.toggleScrubbingContainer(false);
} }
}); });
} }
@ -6842,10 +6844,10 @@ typeof navigator === "object" && (function (global, factory) {
this.player.elements.progress.appendChild(this.elements.thumb.container); // Create HTML element: plyr__preview-scrubbing-container this.player.elements.progress.appendChild(this.elements.thumb.container); // Create HTML element: plyr__preview-scrubbing-container
this.elements.scrubber.container = createElement('div', { this.elements.scrubbing.container = createElement('div', {
class: this.player.config.classNames.previewThumbnails.scrubbingContainer class: this.player.config.classNames.previewThumbnails.scrubbingContainer
}); });
this.player.elements.wrapper.appendChild(this.elements.scrubber.container); this.player.elements.wrapper.appendChild(this.elements.scrubbing.container);
} }
}, { }, {
key: "showImageAtCurrentTime", key: "showImageAtCurrentTime",
@ -6855,7 +6857,7 @@ typeof navigator === "object" && (function (global, factory) {
if (this.mouseDown) { if (this.mouseDown) {
this.setScrubbingContainerSize(); this.setScrubbingContainerSize();
} else { } else {
this.showThumbContainer(); this.toggleThumbContainer(true);
this.setThumbContainerSizeAndPos(); this.setThumbContainerSizeAndPos();
} // Find the desired thumbnail index } // Find the desired thumbnail index
@ -7053,32 +7055,29 @@ typeof navigator === "object" && (function (global, factory) {
} }
} }
}, { }, {
key: "showThumbContainer", key: "toggleThumbContainer",
value: function showThumbContainer() { value: function toggleThumbContainer() {
this.elements.thumb.container.style.opacity = 1; var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
} var clearShowing = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
}, { var className = this.player.config.classNames.previewThumbnails.thumbContainerShown;
key: "hideThumbContainer", this.elements.thumb.container.classList.toggle(className, toggle);
value: function hideThumbContainer() {
var clearShowing = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
this.elements.thumb.container.style.opacity = 0;
if (clearShowing) { if (!toggle && clearShowing) {
this.showingThumb = null; this.showingThumb = null;
this.showingThumbFilename = null; this.showingThumbFilename = null;
} }
} }
}, { }, {
key: "showScrubbingContainer", key: "toggleScrubbingContainer",
value: function showScrubbingContainer() { value: function toggleScrubbingContainer() {
this.elements.scrubber.container.style.opacity = 1; var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
} var className = this.player.config.classNames.previewThumbnails.scrubbingContainerShown;
}, { this.elements.scrubbing.container.classList.toggle(className, toggle);
key: "hideScrubbingContainer",
value: function hideScrubbingContainer() { if (!toggle) {
this.elements.scrubber.container.style.opacity = 0; this.showingThumb = null;
this.showingThumb = null; this.showingThumbFilename = null;
this.showingThumbFilename = null; }
} }
}, { }, {
key: "determineContainerAutoSizing", key: "determineContainerAutoSizing",
@ -7126,9 +7125,9 @@ typeof navigator === "object" && (function (global, factory) {
}, { }, {
key: "setScrubbingContainerSize", key: "setScrubbingContainerSize",
value: function setScrubbingContainerSize() { value: function setScrubbingContainerSize() {
this.elements.scrubber.container.style.width = "".concat(this.player.media.clientWidth, "px"); // Can't use media.clientHeight - html5 video goes big and does black bars above and below this.elements.scrubbing.container.style.width = "".concat(this.player.media.clientWidth, "px"); // Can't use media.clientHeight - html5 video goes big and does black bars above and below
this.elements.scrubber.container.style.height = "".concat(this.player.media.clientWidth / this.thumbAspectRatio, "px"); this.elements.scrubbing.container.style.height = "".concat(this.player.media.clientWidth / this.thumbAspectRatio, "px");
} // Sprites need to be offset to the correct location } // Sprites need to be offset to the correct location
}, { }, {
@ -7139,11 +7138,11 @@ typeof navigator === "object" && (function (global, factory) {
} // Find difference between height and preview container height } // Find difference between height and preview container height
var heightMulti = this.thumbContainerHeight / frame.h; var multiplier = this.thumbContainerHeight / frame.h;
previewImage.style.height = "".concat(Math.floor(previewImage.naturalHeight * heightMulti), "px"); previewImage.style.height = "".concat(Math.floor(previewImage.naturalHeight * multiplier), "px");
previewImage.style.width = "".concat(Math.floor(previewImage.naturalWidth * heightMulti), "px"); previewImage.style.width = "".concat(Math.floor(previewImage.naturalWidth * multiplier), "px");
previewImage.style.left = "-".concat(Math.ceil(frame.x * heightMulti), "px"); previewImage.style.left = "-".concat(frame.x * multiplier, "px");
previewImage.style.top = "-".concat(frame.y * heightMulti, "px"); // TODO: might need to round this one up too previewImage.style.top = "-".concat(frame.y * multiplier, "px");
} }
}, { }, {
key: "enabled", key: "enabled",
@ -7154,7 +7153,7 @@ typeof navigator === "object" && (function (global, factory) {
key: "currentImageContainer", key: "currentImageContainer",
get: function get() { get: function get() {
if (this.mouseDown) { if (this.mouseDown) {
return this.elements.scrubber.container; return this.elements.scrubbing.container;
} }
return this.elements.thumb.imageContainer; return this.elements.thumb.imageContainer;
@ -7177,7 +7176,8 @@ typeof navigator === "object" && (function (global, factory) {
key: "thumbContainerHeight", key: "thumbContainerHeight",
get: function get() { get: function get() {
if (this.mouseDown) { if (this.mouseDown) {
return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio); // Can't use media.clientHeight - html5 video goes big and does black bars above and below // Can't use media.clientHeight - HTML5 video goes big and does black bars above and below
return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio);
} }
return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4); return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);

2
dist/plyr.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

86
dist/plyr.polyfilled.js vendored
View File

@ -6505,10 +6505,12 @@ typeof navigator === "object" && (function (global, factory) {
previewThumbnails: { previewThumbnails: {
// Tooltip thumbs // Tooltip thumbs
thumbContainer: 'plyr__preview-thumb', thumbContainer: 'plyr__preview-thumb',
thumbContainerShown: 'plyr__preview-thumb--is-shown',
imageContainer: 'plyr__preview-thumb__image-container', imageContainer: 'plyr__preview-thumb__image-container',
timeContainer: 'plyr__preview-thumb__time-container', timeContainer: 'plyr__preview-thumb__time-container',
// Scrubber // Scrubbing
scrubbingContainer: 'plyr__preview-scrubber' scrubbingContainer: 'plyr__preview-scrubbing',
scrubbingContainerShown: 'plyr__preview-scrubbing--is-shown'
} }
}, },
// Embed attributes // Embed attributes
@ -9747,7 +9749,7 @@ typeof navigator === "object" && (function (global, factory) {
function () { function () {
/** /**
* PreviewThumbnails constructor. * PreviewThumbnails constructor.
* @param {object} player * @param {Plyr} player
* @return {PreviewThumbnails} * @return {PreviewThumbnails}
*/ */
function PreviewThumbnails(player) { function PreviewThumbnails(player) {
@ -9760,7 +9762,7 @@ typeof navigator === "object" && (function (global, factory) {
this.loadedImages = []; this.loadedImages = [];
this.elements = { this.elements = {
thumb: {}, thumb: {},
scrubber: {} scrubbing: {}
}; };
if (this.enabled) { if (this.enabled) {
@ -9899,13 +9901,13 @@ typeof navigator === "object" && (function (global, factory) {
}); // Hide thumbnail preview - on mouse click, mouse leave, and video play/seek. All four are required, e.g., for buffering }); // Hide thumbnail preview - on mouse click, mouse leave, and video play/seek. All four are required, e.g., for buffering
on.call(this.player, this.player.elements.progress, 'mouseleave click', function () { on.call(this.player, this.player.elements.progress, 'mouseleave click', function () {
_this4.hideThumbContainer(true); _this4.toggleThumbContainer(false, true);
}); });
this.player.on('play', function () { this.player.on('play', function () {
_this4.hideThumbContainer(true); _this4.toggleThumbContainer(false, true);
}); });
this.player.on('seeked', function () { this.player.on('seeked', function () {
_this4.hideThumbContainer(false); _this4.toggleThumbContainer(false);
}); // Show scrubbing preview }); // Show scrubbing preview
on.call(this.player, this.player.elements.progress, 'mousedown touchstart', function (event) { on.call(this.player, this.player.elements.progress, 'mousedown touchstart', function (event) {
@ -9914,9 +9916,9 @@ typeof navigator === "object" && (function (global, factory) {
_this4.mouseDown = true; // Wait until media has a duration _this4.mouseDown = true; // Wait until media has a duration
if (_this4.player.media.duration) { if (_this4.player.media.duration) {
_this4.showScrubbingContainer(); _this4.toggleScrubbingContainer(true);
_this4.hideThumbContainer(true); // Download and show image _this4.toggleThumbContainer(false, true); // Download and show image
_this4.showImageAtCurrentTime(); _this4.showImageAtCurrentTime();
@ -9931,13 +9933,13 @@ typeof navigator === "object" && (function (global, factory) {
if (Math.ceil(_this4.timeAtLastTimeupdate) === Math.ceil(_this4.player.media.currentTime)) { if (Math.ceil(_this4.timeAtLastTimeupdate) === Math.ceil(_this4.player.media.currentTime)) {
// The video was already seeked/loaded at the chosen time - hide immediately // The video was already seeked/loaded at the chosen time - hide immediately
_this4.hideScrubbingContainer(); _this4.toggleScrubbingContainer(false);
} else { } else {
// The video hasn't seeked yet. Wait for that // The video hasn't seeked yet. Wait for that
once.call(_this4.player, _this4.player.media, 'timeupdate', function () { once.call(_this4.player, _this4.player.media, 'timeupdate', function () {
// Re-check mousedown - we might have already started scrubbing again // Re-check mousedown - we might have already started scrubbing again
if (!_this4.mouseDown) { if (!_this4.mouseDown) {
_this4.hideScrubbingContainer(); _this4.toggleScrubbingContainer(false);
} }
}); });
} }
@ -9969,10 +9971,10 @@ typeof navigator === "object" && (function (global, factory) {
this.player.elements.progress.appendChild(this.elements.thumb.container); // Create HTML element: plyr__preview-scrubbing-container this.player.elements.progress.appendChild(this.elements.thumb.container); // Create HTML element: plyr__preview-scrubbing-container
this.elements.scrubber.container = createElement('div', { this.elements.scrubbing.container = createElement('div', {
class: this.player.config.classNames.previewThumbnails.scrubbingContainer class: this.player.config.classNames.previewThumbnails.scrubbingContainer
}); });
this.player.elements.wrapper.appendChild(this.elements.scrubber.container); this.player.elements.wrapper.appendChild(this.elements.scrubbing.container);
} }
}, { }, {
key: "showImageAtCurrentTime", key: "showImageAtCurrentTime",
@ -9982,7 +9984,7 @@ typeof navigator === "object" && (function (global, factory) {
if (this.mouseDown) { if (this.mouseDown) {
this.setScrubbingContainerSize(); this.setScrubbingContainerSize();
} else { } else {
this.showThumbContainer(); this.toggleThumbContainer(true);
this.setThumbContainerSizeAndPos(); this.setThumbContainerSizeAndPos();
} // Find the desired thumbnail index } // Find the desired thumbnail index
@ -10180,32 +10182,29 @@ typeof navigator === "object" && (function (global, factory) {
} }
} }
}, { }, {
key: "showThumbContainer", key: "toggleThumbContainer",
value: function showThumbContainer() { value: function toggleThumbContainer() {
this.elements.thumb.container.style.opacity = 1; var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
} var clearShowing = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
}, { var className = this.player.config.classNames.previewThumbnails.thumbContainerShown;
key: "hideThumbContainer", this.elements.thumb.container.classList.toggle(className, toggle);
value: function hideThumbContainer() {
var clearShowing = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
this.elements.thumb.container.style.opacity = 0;
if (clearShowing) { if (!toggle && clearShowing) {
this.showingThumb = null; this.showingThumb = null;
this.showingThumbFilename = null; this.showingThumbFilename = null;
} }
} }
}, { }, {
key: "showScrubbingContainer", key: "toggleScrubbingContainer",
value: function showScrubbingContainer() { value: function toggleScrubbingContainer() {
this.elements.scrubber.container.style.opacity = 1; var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
} var className = this.player.config.classNames.previewThumbnails.scrubbingContainerShown;
}, { this.elements.scrubbing.container.classList.toggle(className, toggle);
key: "hideScrubbingContainer",
value: function hideScrubbingContainer() { if (!toggle) {
this.elements.scrubber.container.style.opacity = 0; this.showingThumb = null;
this.showingThumb = null; this.showingThumbFilename = null;
this.showingThumbFilename = null; }
} }
}, { }, {
key: "determineContainerAutoSizing", key: "determineContainerAutoSizing",
@ -10253,9 +10252,9 @@ typeof navigator === "object" && (function (global, factory) {
}, { }, {
key: "setScrubbingContainerSize", key: "setScrubbingContainerSize",
value: function setScrubbingContainerSize() { value: function setScrubbingContainerSize() {
this.elements.scrubber.container.style.width = "".concat(this.player.media.clientWidth, "px"); // Can't use media.clientHeight - html5 video goes big and does black bars above and below this.elements.scrubbing.container.style.width = "".concat(this.player.media.clientWidth, "px"); // Can't use media.clientHeight - html5 video goes big and does black bars above and below
this.elements.scrubber.container.style.height = "".concat(this.player.media.clientWidth / this.thumbAspectRatio, "px"); this.elements.scrubbing.container.style.height = "".concat(this.player.media.clientWidth / this.thumbAspectRatio, "px");
} // Sprites need to be offset to the correct location } // Sprites need to be offset to the correct location
}, { }, {
@ -10266,11 +10265,11 @@ typeof navigator === "object" && (function (global, factory) {
} // Find difference between height and preview container height } // Find difference between height and preview container height
var heightMulti = this.thumbContainerHeight / frame.h; var multiplier = this.thumbContainerHeight / frame.h;
previewImage.style.height = "".concat(Math.floor(previewImage.naturalHeight * heightMulti), "px"); previewImage.style.height = "".concat(Math.floor(previewImage.naturalHeight * multiplier), "px");
previewImage.style.width = "".concat(Math.floor(previewImage.naturalWidth * heightMulti), "px"); previewImage.style.width = "".concat(Math.floor(previewImage.naturalWidth * multiplier), "px");
previewImage.style.left = "-".concat(Math.ceil(frame.x * heightMulti), "px"); previewImage.style.left = "-".concat(frame.x * multiplier, "px");
previewImage.style.top = "-".concat(frame.y * heightMulti, "px"); // TODO: might need to round this one up too previewImage.style.top = "-".concat(frame.y * multiplier, "px");
} }
}, { }, {
key: "enabled", key: "enabled",
@ -10281,7 +10280,7 @@ typeof navigator === "object" && (function (global, factory) {
key: "currentImageContainer", key: "currentImageContainer",
get: function get() { get: function get() {
if (this.mouseDown) { if (this.mouseDown) {
return this.elements.scrubber.container; return this.elements.scrubbing.container;
} }
return this.elements.thumb.imageContainer; return this.elements.thumb.imageContainer;
@ -10304,7 +10303,8 @@ typeof navigator === "object" && (function (global, factory) {
key: "thumbContainerHeight", key: "thumbContainerHeight",
get: function get() { get: function get() {
if (this.mouseDown) { if (this.mouseDown) {
return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio); // Can't use media.clientHeight - html5 video goes big and does black bars above and below // Can't use media.clientHeight - HTML5 video goes big and does black bars above and below
return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio);
} }
return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4); return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);

2
dist/plyr.polyfilled.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.polyfilled.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.polyfilled.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

14
package.json
View File

@ -39,9 +39,9 @@
"babel-eslint": "^10.0.1", "babel-eslint": "^10.0.1",
"@babel/preset-env": "^7.2.3", "@babel/preset-env": "^7.2.3",
"del": "^3.0.0", "del": "^3.0.0",
"eslint": "^5.12.0", "eslint": "^5.12.1",
"eslint-config-airbnb-base": "^13.1.0", "eslint-config-airbnb-base": "^13.1.0",
"eslint-config-prettier": "^3.3.0", "eslint-config-prettier": "^3.6.0",
"eslint-plugin-import": "^2.14.0", "eslint-plugin-import": "^2.14.0",
"fastly-purge": "^1.0.1", "fastly-purge": "^1.0.1",
"git-branch": "^2.0.1", "git-branch": "^2.0.1",
@ -68,21 +68,21 @@
"prettier-eslint": "^8.8.2", "prettier-eslint": "^8.8.2",
"prettier-stylelint": "^0.4.2", "prettier-stylelint": "^0.4.2",
"remark-cli": "^6.0.1", "remark-cli": "^6.0.1",
"remark-validate-links": "^7.1.2", "remark-validate-links": "^8.0.0",
"rollup-plugin-babel": "^4.2.0", "rollup-plugin-babel": "^4.3.2",
"rollup-plugin-commonjs": "^9.2.0", "rollup-plugin-commonjs": "^9.2.0",
"rollup-plugin-node-resolve": "^4.0.0", "rollup-plugin-node-resolve": "^4.0.0",
"stylelint": "^9.9.0", "stylelint": "^9.10.1",
"stylelint-config-prettier": "^4.0.0", "stylelint-config-prettier": "^4.0.0",
"stylelint-config-recommended": "^2.1.0", "stylelint-config-recommended": "^2.1.0",
"stylelint-config-sass-guidelines": "^5.3.0", "stylelint-config-sass-guidelines": "^5.3.0",
"stylelint-order": "^2.0.0", "stylelint-order": "^2.0.0",
"stylelint-scss": "^3.4.4", "stylelint-scss": "^3.5.1",
"stylelint-selector-bem-pattern": "^2.0.0", "stylelint-selector-bem-pattern": "^2.0.0",
"through2": "^3.0.0" "through2": "^3.0.0"
}, },
"dependencies": { "dependencies": {
"core-js": "^2.6.1", "core-js": "^2.6.2",
"custom-event-polyfill": "^1.0.6", "custom-event-polyfill": "^1.0.6",
"loadjs": "^3.5.5", "loadjs": "^3.5.5",
"raven-js": "^3.27.0", "raven-js": "^3.27.0",

6
src/js/config/defaults.js
View File

@ -377,10 +377,12 @@ const defaults = {
previewThumbnails: { previewThumbnails: {
// Tooltip thumbs // Tooltip thumbs
thumbContainer: 'plyr__preview-thumb', thumbContainer: 'plyr__preview-thumb',
thumbContainerShown: 'plyr__preview-thumb--is-shown',
imageContainer: 'plyr__preview-thumb__image-container', imageContainer: 'plyr__preview-thumb__image-container',
timeContainer: 'plyr__preview-thumb__time-container', timeContainer: 'plyr__preview-thumb__time-container',
// Scrubber // Scrubbing
scrubbingContainer: 'plyr__preview-scrubber', scrubbingContainer: 'plyr__preview-scrubbing',
scrubbingContainerShown: 'plyr__preview-scrubbing--is-shown',
}, },
}, },

68
src/js/plugins/previewThumbnails.js
View File

@ -66,7 +66,7 @@ const parseVtt = vttDataString => {
class PreviewThumbnails { class PreviewThumbnails {
/** /**
* PreviewThumbnails constructor. * PreviewThumbnails constructor.
* @param {object} player * @param {Plyr} player
* @return {PreviewThumbnails} * @return {PreviewThumbnails}
*/ */
constructor(player) { constructor(player) {
@ -78,7 +78,7 @@ class PreviewThumbnails {
this.elements = { this.elements = {
thumb: {}, thumb: {},
scrubber: {}, scrubbing: {},
}; };
if (this.enabled) { if (this.enabled) {
@ -210,13 +210,13 @@ class PreviewThumbnails {
// Hide thumbnail preview - on mouse click, mouse leave, and video play/seek. All four are required, e.g., for buffering // Hide thumbnail preview - on mouse click, mouse leave, and video play/seek. All four are required, e.g., for buffering
on.call(this.player, this.player.elements.progress, 'mouseleave click', () => { on.call(this.player, this.player.elements.progress, 'mouseleave click', () => {
this.hideThumbContainer(true); this.toggleThumbContainer(false, true);
}); });
this.player.on('play', () => { this.player.on('play', () => {
this.hideThumbContainer(true); this.toggleThumbContainer(false, true);
}); });
this.player.on('seeked', () => { this.player.on('seeked', () => {
this.hideThumbContainer(false); this.toggleThumbContainer(false);
}); });
// Show scrubbing preview // Show scrubbing preview
@ -226,8 +226,8 @@ class PreviewThumbnails {
this.mouseDown = true; this.mouseDown = true;
// Wait until media has a duration // Wait until media has a duration
if (this.player.media.duration) { if (this.player.media.duration) {
this.showScrubbingContainer(); this.toggleScrubbingContainer(true);
this.hideThumbContainer(true); this.toggleThumbContainer(false, true);
// Download and show image // Download and show image
this.showImageAtCurrentTime(); this.showImageAtCurrentTime();
@ -243,13 +243,13 @@ class PreviewThumbnails {
// Hide scrubbing preview. But wait until the video has successfully seeked before hiding the scrubbing preview // Hide scrubbing preview. But wait until the video has successfully seeked before hiding the scrubbing preview
if (Math.ceil(this.timeAtLastTimeupdate) === Math.ceil(this.player.media.currentTime)) { if (Math.ceil(this.timeAtLastTimeupdate) === Math.ceil(this.player.media.currentTime)) {
// The video was already seeked/loaded at the chosen time - hide immediately // The video was already seeked/loaded at the chosen time - hide immediately
this.hideScrubbingContainer(); this.toggleScrubbingContainer(false);
} else { } else {
// The video hasn't seeked yet. Wait for that // The video hasn't seeked yet. Wait for that
once.call(this.player, this.player.media, 'timeupdate', () => { once.call(this.player, this.player.media, 'timeupdate', () => {
// Re-check mousedown - we might have already started scrubbing again // Re-check mousedown - we might have already started scrubbing again
if (!this.mouseDown) { if (!this.mouseDown) {
this.hideScrubbingContainer(); this.toggleScrubbingContainer(false);
} }
}); });
} }
@ -285,18 +285,18 @@ class PreviewThumbnails {
this.player.elements.progress.appendChild(this.elements.thumb.container); this.player.elements.progress.appendChild(this.elements.thumb.container);
// Create HTML element: plyr__preview-scrubbing-container // Create HTML element: plyr__preview-scrubbing-container
this.elements.scrubber.container = createElement('div', { this.elements.scrubbing.container = createElement('div', {
class: this.player.config.classNames.previewThumbnails.scrubbingContainer, class: this.player.config.classNames.previewThumbnails.scrubbingContainer,
}); });
this.player.elements.wrapper.appendChild(this.elements.scrubber.container); this.player.elements.wrapper.appendChild(this.elements.scrubbing.container);
} }
showImageAtCurrentTime() { showImageAtCurrentTime() {
if (this.mouseDown) { if (this.mouseDown) {
this.setScrubbingContainerSize(); this.setScrubbingContainerSize();
} else { } else {
this.showThumbContainer(); this.toggleThumbContainer(true);
this.setThumbContainerSizeAndPos(); this.setThumbContainerSizeAndPos();
} }
@ -486,7 +486,7 @@ class PreviewThumbnails {
get currentImageContainer() { get currentImageContainer() {
if (this.mouseDown) { if (this.mouseDown) {
return this.elements.scrubber.container; return this.elements.scrubbing.container;
} }
return this.elements.thumb.imageContainer; return this.elements.thumb.imageContainer;
@ -506,7 +506,8 @@ class PreviewThumbnails {
get thumbContainerHeight() { get thumbContainerHeight() {
if (this.mouseDown) { if (this.mouseDown) {
return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio); // Can't use media.clientHeight - html5 video goes big and does black bars above and below // Can't use media.clientHeight - HTML5 video goes big and does black bars above and below
return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio);
} }
return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4); return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
@ -528,27 +529,24 @@ class PreviewThumbnails {
} }
} }
showThumbContainer() { toggleThumbContainer(toggle = false, clearShowing = false) {
this.elements.thumb.container.style.opacity = 1; const className = this.player.config.classNames.previewThumbnails.thumbContainerShown;
} this.elements.thumb.container.classList.toggle(className, toggle);
hideThumbContainer(clearShowing = false) { if (!toggle && clearShowing) {
this.elements.thumb.container.style.opacity = 0;
if (clearShowing) {
this.showingThumb = null; this.showingThumb = null;
this.showingThumbFilename = null; this.showingThumbFilename = null;
} }
} }
showScrubbingContainer() { toggleScrubbingContainer(toggle = false) {
this.elements.scrubber.container.style.opacity = 1; const className = this.player.config.classNames.previewThumbnails.scrubbingContainerShown;
} this.elements.scrubbing.container.classList.toggle(className, toggle);
hideScrubbingContainer() { if (!toggle) {
this.elements.scrubber.container.style.opacity = 0; this.showingThumb = null;
this.showingThumb = null; this.showingThumbFilename = null;
this.showingThumbFilename = null; }
} }
determineContainerAutoSizing() { determineContainerAutoSizing() {
@ -594,9 +592,9 @@ class PreviewThumbnails {
// Can't use 100% width, in case the video is a different aspect ratio to the video container // Can't use 100% width, in case the video is a different aspect ratio to the video container
setScrubbingContainerSize() { setScrubbingContainerSize() {
this.elements.scrubber.container.style.width = `${this.player.media.clientWidth}px`; this.elements.scrubbing.container.style.width = `${this.player.media.clientWidth}px`;
// Can't use media.clientHeight - html5 video goes big and does black bars above and below // Can't use media.clientHeight - html5 video goes big and does black bars above and below
this.elements.scrubber.container.style.height = `${this.player.media.clientWidth / this.thumbAspectRatio}px`; this.elements.scrubbing.container.style.height = `${this.player.media.clientWidth / this.thumbAspectRatio}px`;
} }
// Sprites need to be offset to the correct location // Sprites need to be offset to the correct location
@ -606,12 +604,12 @@ class PreviewThumbnails {
} }
// Find difference between height and preview container height // Find difference between height and preview container height
const heightMulti = this.thumbContainerHeight / frame.h; const multiplier = this.thumbContainerHeight / frame.h;
previewImage.style.height = `${Math.floor(previewImage.naturalHeight * heightMulti)}px`; previewImage.style.height = `${Math.floor(previewImage.naturalHeight * multiplier)}px`;
previewImage.style.width = `${Math.floor(previewImage.naturalWidth * heightMulti)}px`; previewImage.style.width = `${Math.floor(previewImage.naturalWidth * multiplier)}px`;
previewImage.style.left = `-${Math.ceil(frame.x * heightMulti)}px`; previewImage.style.left = `-${frame.x * multiplier}px`;
previewImage.style.top = `-${frame.y * heightMulti}px`; // TODO: might need to round this one up too previewImage.style.top = `-${frame.y * multiplier}px`;
} }
} }

17
src/sass/plugins/previewThumbnails.scss
View File

@ -12,9 +12,16 @@
padding: 3px; padding: 3px;
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
transition: opacity 0.2s 0.1s ease; transform: translate(0, 10px) scale(0.8);
transform-origin: 50% 100%;
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
z-index: 2; z-index: 2;
&--is-shown {
opacity: 1;
transform: translate(0, 0) scale(1);
}
// The background triangle // The background triangle
&::before { &::before {
border-left: $plyr-tooltip-arrow-size solid transparent; border-left: $plyr-tooltip-arrow-size solid transparent;
@ -31,6 +38,7 @@
} }
&__image-container { &__image-container {
background: $plyr-color-heather;
border-radius: 2px; border-radius: 2px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -66,12 +74,13 @@
} }
} }
.plyr__preview-scrubber { .plyr__preview-scrubbing {
bottom: 0; bottom: 0;
filter: blur(1px); filter: blur(1px);
height: 100%; height: 100%;
left: 0; left: 0;
margin: auto; // Required when video is different dimensions to container (e.g., fullscreen) margin: auto; // Required when video is different dimensions to container (e.g., fullscreen)
opacity: 0;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
right: 0; right: 0;
@ -90,4 +99,8 @@
top: 0; top: 0;
width: 100%; width: 100%;
} }
&--is-shown {
opacity: 1;
}
} }