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

Preview design tweaks

Browse Source
This commit is contained in:
Sam Potts 2019-01-21 00:32:20 +11:00
parent fe24c73c11
commit 4ab8a54a11
18 changed files with 1155 additions and 1465 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

4
demo/dist/demo.js vendored
View File

@ -4158,6 +4158,10 @@ typeof navigator === "object" && (function () {
ads: { ads: {
enabled: env.prod || env.dev, enabled: env.prod || env.dev,
publisherId: '918848828995742' publisherId: '918848828995742'
},
previewThumbnails: {
enabled: true,
src: ['https://cdn.plyr.io/static/demo/thumbs/100p.vtt', 'https://cdn.plyr.io/static/demo/thumbs/240p.vtt']
} }
}); // Expose for tinkering in the console }); // Expose for tinkering in the console

2
demo/dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
demo/dist/demo.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
demo/dist/demo.min.js.map 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

530
dist/plyr.js vendored
View File

@ -3441,9 +3441,12 @@ typeof navigator === "object" && (function (global, factory) {
}, },
tabFocus: 'plyr__tab-focus', tabFocus: 'plyr__tab-focus',
previewThumbnails: { previewThumbnails: {
thumbnailContainer: 'plyr__preview-thumbnail-container', // Tooltip thumbs
scrubbingContainer: 'plyr__preview-scrubbing-container', thumbContainer: 'plyr__preview-thumb',
timeTextContainer: 'plyr__preview-time-text-container' imageContainer: 'plyr__preview-thumb__image-container',
timeContainer: 'plyr__preview-thumb__time-container',
// Scrubber
scrubbingContainer: 'plyr__preview-scrubber'
} }
}, },
// Embed attributes // Embed attributes
@ -6557,6 +6560,49 @@ typeof navigator === "object" && (function (global, factory) {
return Ads; return Ads;
}(); }();
var parseVtt = function parseVtt(vttDataString) {
var processedList = [];
var frames = vttDataString.split(/\r\n\r\n|\n\n|\r\r/);
frames.forEach(function (frame) {
var result = {};
var lines = frame.split(/\r\n|\n|\r/);
lines.forEach(function (line) {
if (!is.number(result.startTime)) {
// The line with start and end times on it is the first line of interest
var matchTimes = line.match(/([0-9]{2}):([0-9]{2}):([0-9]{2}).([0-9]{2,3})( ?--> ?)([0-9]{2}):([0-9]{2}):([0-9]{2}).([0-9]{2,3})/); // Note that this currently ignores caption formatting directives that are optionally on the end of this line - fine for non-captions VTT
if (matchTimes) {
result.startTime = Number(matchTimes[1]) * 60 * 60 + Number(matchTimes[2]) * 60 + Number(matchTimes[3]) + Number("0.".concat(matchTimes[4]));
result.endTime = Number(matchTimes[6]) * 60 * 60 + Number(matchTimes[7]) * 60 + Number(matchTimes[8]) + Number("0.".concat(matchTimes[9]));
}
} else if (!is.empty(line.trim()) && is.empty(result.text)) {
// If we already have the startTime, then we're definitely up to the text line(s)
var lineSplit = line.trim().split('#xywh=');
var _lineSplit = _slicedToArray(lineSplit, 1);
result.text = _lineSplit[0];
// If there's content in lineSplit[1], then we have sprites. If not, then it's just one frame per image
if (lineSplit[1]) {
var _lineSplit$1$split = lineSplit[1].split(',');
var _lineSplit$1$split2 = _slicedToArray(_lineSplit$1$split, 4);
result.x = _lineSplit$1$split2[0];
result.y = _lineSplit$1$split2[1];
result.w = _lineSplit$1$split2[2];
result.h = _lineSplit$1$split2[3];
}
}
});
if (result.text) {
processedList.push(result);
}
});
return processedList;
};
/** /**
* Preview thumbnails for seek hover and scrubbing * Preview thumbnails for seek hover and scrubbing
* Seeking: Hover over the seek bar (desktop only): shows a small preview container above the seek bar * Seeking: Hover over the seek bar (desktop only): shows a small preview container above the seek bar
@ -6565,9 +6611,10 @@ typeof navigator === "object" && (function (global, factory) {
* Notes: * Notes:
* - Thumbs are set via JS settings on Plyr init, not HTML5 'track' property. Using the track property would be a bit gross, because it doesn't support custom 'kinds'. kind=metadata might be used for something else, and we want to allow multiple thumbnails tracks. Tracks must have a unique combination of 'kind' and 'label'. We would have to do something like kind=metadata,label=thumbnails1 / kind=metadata,label=thumbnails2. Square peg, round hole * - Thumbs are set via JS settings on Plyr init, not HTML5 'track' property. Using the track property would be a bit gross, because it doesn't support custom 'kinds'. kind=metadata might be used for something else, and we want to allow multiple thumbnails tracks. Tracks must have a unique combination of 'kind' and 'label'. We would have to do something like kind=metadata,label=thumbnails1 / kind=metadata,label=thumbnails2. Square peg, round hole
* - VTT info: the image URL is relative to the VTT, not the current document. But if the url starts with a slash, it will naturally be relative to the current domain. https://support.jwplayer.com/articles/how-to-add-preview-thumbnails * - VTT info: the image URL is relative to the VTT, not the current document. But if the url starts with a slash, it will naturally be relative to the current domain. https://support.jwplayer.com/articles/how-to-add-preview-thumbnails
* - This implementation uses multiple separate img elements. Other implementations use background-image on one element. This would be nice and simple, but Firefox and Safari have flickering issues with replacing backgrounds of larger images. It seems that Youtube perhaps only avoids this because they don't have the option for high-res previews (even the fullscreen ones, when mousedown/seeking). Images appear over the top of each other, and previous ones are discarded once the new ones have been rendered * - This implementation uses multiple separate img elements. Other implementations use background-image on one element. This would be nice and simple, but Firefox and Safari have flickering issues with replacing backgrounds of larger images. It seems that YouTube perhaps only avoids this because they don't have the option for high-res previews (even the fullscreen ones, when mousedown/seeking). Images appear over the top of each other, and previous ones are discarded once the new ones have been rendered
*/ */
var PreviewThumbnails = var PreviewThumbnails =
/*#__PURE__*/ /*#__PURE__*/
function () { function () {
@ -6580,10 +6627,14 @@ typeof navigator === "object" && (function (global, factory) {
_classCallCheck(this, PreviewThumbnails); _classCallCheck(this, PreviewThumbnails);
this.player = player; this.player = player;
this.thumbnailsDefs = []; this.thumbnails = [];
this.lastMousemoveEventTime = Date.now(); this.lastMousemoveEventTime = Date.now();
this.mouseDown = false; this.mouseDown = false;
this.loadedImages = []; this.loadedImages = [];
this.elements = {
thumb: {},
scrubber: {}
};
if (this.enabled) { if (this.enabled) {
this.load(); this.load();
@ -6597,12 +6648,12 @@ typeof navigator === "object" && (function (global, factory) {
// Turn off the regular seek tooltip // Turn off the regular seek tooltip
this.player.config.tooltips.seek = false; this.player.config.tooltips.seek = false;
this.getThumbnailsDefs().then(function () { this.getThumbnails().then(function () {
// Initiate DOM listeners so that our preview thumbnails can be used // Initiate DOM listeners so that our preview thumbnails can be used
_this.listeners(); // Build HTML DOM elements _this.listeners(); // Render DOM elements
_this.elements(); // Check to see if thumb container size was specified manually in CSS _this.render(); // Check to see if thumb container size was specified manually in CSS
_this.determineContainerAutoSizing(); _this.determineContainerAutoSizing();
@ -6610,51 +6661,29 @@ typeof navigator === "object" && (function (global, factory) {
} // Download VTT files and parse them } // Download VTT files and parse them
}, { }, {
key: "getThumbnailsDefs", key: "getThumbnails",
value: function getThumbnailsDefs() { value: function getThumbnails() {
var _this2 = this; var _this2 = this;
return new Promise(function (resolve, reject) { return new Promise(function (resolve) {
if (!_this2.player.config.previewThumbnails.src) { if (!_this2.player.config.previewThumbnails.src) {
throw new Error('Missing previewThumbnails.src config attribute'); throw new Error('Missing previewThumbnails.src config attribute');
} // previewThumbnails.src can be string or list. If string, convert into single-element list } // previewThumbnails.src can be string or list. If string, convert into single-element list
var configSrc = _this2.player.config.previewThumbnails.src; var src = _this2.player.config.previewThumbnails.src;
var urls = typeof configSrc === 'string' ? [configSrc] : configSrc; var urls = is.string(src) ? [src] : src; // Loop through each src url. Download and process the VTT file, storing the resulting data in this.thumbnails
var promises = []; // Loop through each src url. Download and process the VTT file, storing the resulting data in this.thumbnailsDefs
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = urls[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var url = _step.value;
promises.push(_this2.getThumbnailDef(url));
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return != null) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
var promises = urls.map(function (u) {
return _this2.getThumbnail(u);
});
Promise.all(promises).then(function () { Promise.all(promises).then(function () {
// Sort smallest to biggest (e.g., [120p, 480p, 1080p]) // Sort smallest to biggest (e.g., [120p, 480p, 1080p])
_this2.thumbnailsDefs.sort(function (x, y) { _this2.thumbnails.sort(function (x, y) {
return x.height - y.height; return x.height - y.height;
}); });
_this2.player.debug.log('Preview thumbnails: thumbnailsDefs: ' + JSON.stringify(_this2.thumbnailsDefs, null, 4)); _this2.player.debug.log('Preview thumbnails', _this2.thumbnails);
resolve(); resolve();
}); });
@ -6662,35 +6691,36 @@ typeof navigator === "object" && (function (global, factory) {
} // Process individual VTT file } // Process individual VTT file
}, { }, {
key: "getThumbnailDef", key: "getThumbnail",
value: function getThumbnailDef(url) { value: function getThumbnail(url) {
var _this3 = this; var _this3 = this;
return new Promise(function (resolve, reject) { return new Promise(function (resolve) {
fetch(url).then(function (response) { fetch(url).then(function (response) {
var thumbnailsDef = { var thumbnail = {
frames: _this3.parseVtt(response), frames: parseVtt(response),
height: null, height: null,
urlPrefix: '' urlPrefix: ''
}; // If the URLs don't start with '/', then we need to set their relative path to be the location of the VTT file }; // If the URLs don't start with '/', then we need to set their relative path to be the location of the VTT file
// If the URLs do start with '/', then they obviously don't need a prefix, so it will remain blank // If the URLs do start with '/', then they obviously don't need a prefix, so it will remain blank
if (!thumbnailsDef.frames[0].text.startsWith('/')) { if (!thumbnail.frames[0].text.startsWith('/')) {
thumbnailsDef.urlPrefix = url.substring(0, url.lastIndexOf('/') + 1); thumbnail.urlPrefix = url.substring(0, url.lastIndexOf('/') + 1);
} // Download the first frame, so that we can determine/set the height of this thumbnailsDef } // Download the first frame, so that we can determine/set the height of this thumbnailsDef
var tempImage = new Image(); var tempImage = new Image();
tempImage.src = thumbnailsDef.urlPrefix + thumbnailsDef.frames[0].text;
tempImage.onload = function () { tempImage.onload = function () {
thumbnailsDef.height = tempImage.naturalHeight; thumbnail.height = tempImage.naturalHeight;
thumbnailsDef.width = tempImage.naturalWidth; thumbnail.width = tempImage.naturalWidth;
_this3.thumbnailsDefs.push(thumbnailsDef); _this3.thumbnails.push(thumbnail);
resolve(); resolve();
}; };
tempImage.src = thumbnail.urlPrefix + thumbnail.frames[0].text;
}); });
}); });
} }
@ -6712,19 +6742,26 @@ typeof navigator === "object" && (function (global, factory) {
var percentage = 100 / clientRect.width * (event.pageX - clientRect.left); var percentage = 100 / clientRect.width * (event.pageX - clientRect.left);
_this4.seekTime = _this4.player.media.duration * (percentage / 100); _this4.seekTime = _this4.player.media.duration * (percentage / 100);
if (_this4.seekTime < 0) _this4.seekTime = 0; // The mousemove fires for 10+px out to the left
if (_this4.seekTime > _this4.player.media.duration - 1) _this4.seekTime = _this4.player.media.duration - 1; // Took 1 second off the duration for safety, because different players can disagree on the real duration of a video if (_this4.seekTime < 0) {
// The mousemove fires for 10+px out to the left
_this4.seekTime = 0;
}
if (_this4.seekTime > _this4.player.media.duration - 1) {
// Took 1 second off the duration for safety, because different players can disagree on the real duration of a video
_this4.seekTime = _this4.player.media.duration - 1;
}
_this4.mousePosX = event.pageX; // Set time text inside image container _this4.mousePosX = event.pageX; // Set time text inside image container
_this4.player.elements.display.previewThumbnailTimeText.innerText = formatTime(_this4.seekTime); // Download and show image _this4.elements.thumb.time.innerText = formatTime(_this4.seekTime); // Download and show image
_this4.showImageAtCurrentTime(); _this4.showImageAtCurrentTime();
} }
}); // Touch device seeking - performs same function as above }); // Touch device seeking - performs same function as above
on.call(this.player, this.player.elements.progress, 'touchmove', function (event) { on.call(this.player, this.player.elements.progress, 'touchmove', function () {
// Wait until media has a duration // Wait until media has a duration
if (_this4.player.media.duration) { if (_this4.player.media.duration) {
// Calculate seek hover position as approx video seconds // Calculate seek hover position as approx video seconds
@ -6784,28 +6821,31 @@ typeof navigator === "object" && (function (global, factory) {
*/ */
}, { }, {
key: "elements", key: "render",
value: function elements() { value: function render() {
// Create HTML element: plyr__preview-thumbnail-container // Create HTML element: plyr__preview-thumbnail-container
var previewThumbnailContainer = createElement('div', { this.elements.thumb.container = createElement('div', {
class: this.player.config.classNames.previewThumbnails.thumbnailContainer class: this.player.config.classNames.previewThumbnails.thumbContainer
}); }); // Wrapper for the image for styling
this.player.elements.progress.appendChild(previewThumbnailContainer);
this.player.elements.display.previewThumbnailContainer = previewThumbnailContainer; // Create HTML element, parent+span: time text (e.g., 01:32:00)
var timeTextContainer = createElement('div', { this.elements.thumb.imageContainer = createElement('div', {
class: this.player.config.classNames.previewThumbnails.timeTextContainer class: this.player.config.classNames.previewThumbnails.imageContainer
}); });
this.player.elements.display.previewThumbnailContainer.appendChild(timeTextContainer); this.elements.thumb.container.appendChild(this.elements.thumb.imageContainer); // Create HTML element, parent+span: time text (e.g., 01:32:00)
var timeText = createElement('span', {}, '00:00');
timeTextContainer.appendChild(timeText);
this.player.elements.display.previewThumbnailTimeText = timeText; // Create HTML element: plyr__preview-scrubbing-container
var previewScrubbingContainer = createElement('div', { var timeContainer = createElement('div', {
class: this.player.config.classNames.previewThumbnails.timeContainer
});
this.elements.thumb.time = createElement('span', {}, '00:00');
timeContainer.appendChild(this.elements.thumb.time);
this.elements.thumb.container.appendChild(timeContainer); // Inject the whole thumb
this.player.elements.progress.appendChild(this.elements.thumb.container); // Create HTML element: plyr__preview-scrubbing-container
this.elements.scrubber.container = createElement('div', {
class: this.player.config.classNames.previewThumbnails.scrubbingContainer class: this.player.config.classNames.previewThumbnails.scrubbingContainer
}); });
this.player.elements.wrapper.appendChild(previewScrubbingContainer); this.player.elements.wrapper.appendChild(this.elements.scrubber.container);
this.player.elements.display.previewScrubbingContainer = previewScrubbingContainer;
} }
}, { }, {
key: "showImageAtCurrentTime", key: "showImageAtCurrentTime",
@ -6820,17 +6860,16 @@ typeof navigator === "object" && (function (global, factory) {
} // Find the desired thumbnail index } // Find the desired thumbnail index
var thumbNum = this.thumbnailsDefs[0].frames.findIndex(function (frame) { var thumbNum = this.thumbnails[0].frames.findIndex(function (frame) {
return _this5.seekTime >= frame.startTime && _this5.seekTime <= frame.endTime; return _this5.seekTime >= frame.startTime && _this5.seekTime <= frame.endTime;
}); });
var qualityIndex = 0; // Check to see if we've already downloaded higher quality versions of this image var qualityIndex = 0; // Check to see if we've already downloaded higher quality versions of this image
for (var i = 1; i < this.thumbnailsDefs.length; i++) { this.thumbnails.forEach(function (thumbnail, index) {
if (this.loadedImages.includes(this.thumbnailsDefs[i].frames[thumbNum].text)) { if (_this5.loadedImages.includes(thumbnail.frames[thumbNum].text)) {
qualityIndex = i; qualityIndex = index;
} }
} // Only proceed if either thumbnum or thumbfilename has changed }); // Only proceed if either thumbnum or thumbfilename has changed
if (thumbNum !== this.showingThumb) { if (thumbNum !== this.showingThumb) {
this.showingThumb = thumbNum; this.showingThumb = thumbNum;
@ -6845,21 +6884,26 @@ typeof navigator === "object" && (function (global, factory) {
var qualityIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; var qualityIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var thumbNum = this.showingThumb; var thumbNum = this.showingThumb;
var frame = this.thumbnailsDefs[qualityIndex].frames[thumbNum]; var thumbnail = this.thumbnails[qualityIndex];
var thumbFilename = this.thumbnailsDefs[qualityIndex].frames[thumbNum].text; var urlPrefix = thumbnail.urlPrefix;
var urlPrefix = this.thumbnailsDefs[qualityIndex].urlPrefix; var frame = thumbnail.frames[thumbNum];
var thumbURL = urlPrefix + thumbFilename; var thumbFilename = thumbnail.frames[thumbNum].text;
var thumbUrl = urlPrefix + thumbFilename;
if (!this.currentImageElement || this.currentImageElement.getAttribute('data-thumbfilename') !== thumbFilename) { if (!this.currentImageElement || this.currentImageElement.dataset.filename !== thumbFilename) {
// If we're already loading a previous image, remove its onload handler - we don't want it to load after this one // If we're already loading a previous image, remove its onload handler - we don't want it to load after this one
// Only do this if not using jpeg sprites. Without jpeg sprites we really want to show as many images as possible, as a best-effort // Only do this if not using sprites. Without sprites we really want to show as many images as possible, as a best-effort
if (this.loadingImage && this.usingJpegSprites) this.loadingImage.onload = null; // We're building and adding a new image. In other implementations of similar functionality (Youtube), background image is instead used. But this causes issues with larger images in Firefox and Safari - switching between background images causes a flicker. Putting a new image over the top does not if (this.loadingImage && this.usingSprites) {
this.loadingImage.onload = null;
} // We're building and adding a new image. In other implementations of similar functionality (Youtube), background image is instead used. But this causes issues with larger images in Firefox and Safari - switching between background images causes a flicker. Putting a new image over the top does not
var previewImage = new Image(); var previewImage = new Image();
previewImage.src = thumbURL; previewImage.src = thumbUrl;
previewImage.setAttribute('data-thumbnum', thumbNum); previewImage.dataset.index = thumbNum;
previewImage.setAttribute('data-thumbfilename', thumbFilename); previewImage.dataset.filename = thumbFilename;
this.showingThumbFilename = thumbFilename; // For some reason, passing the named function directly causes it to execute immediately. So I've wrapped it in an anonymous function... this.showingThumbFilename = thumbFilename;
this.player.debug.log("Loading image: ".concat(thumbUrl)); // For some reason, passing the named function directly causes it to execute immediately. So I've wrapped it in an anonymous function...
previewImage.onload = function () { previewImage.onload = function () {
return _this6.showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename, true); return _this6.showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename, true);
@ -6870,7 +6914,7 @@ typeof navigator === "object" && (function (global, factory) {
} else { } else {
// Update the existing image // Update the existing image
this.showImage(this.currentImageElement, frame, qualityIndex, thumbNum, thumbFilename, false); this.showImage(this.currentImageElement, frame, qualityIndex, thumbNum, thumbFilename, false);
this.currentImageElement.setAttribute('data-thumbnum', thumbNum); this.currentImageElement.dataset.index = thumbNum;
this.removeOldImages(this.currentImageElement); this.removeOldImages(this.currentImageElement);
} }
} }
@ -6878,13 +6922,16 @@ typeof navigator === "object" && (function (global, factory) {
key: "showImage", key: "showImage",
value: function showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename) { value: function showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename) {
var newImage = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true; var newImage = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
this.player.debug.log('Showing thumb: ' + thumbFilename + '. num: ' + thumbNum + '. qual: ' + qualityIndex + '. newimg: ' + newImage); this.player.debug.log("Showing thumb: ".concat(thumbFilename, ". num: ").concat(thumbNum, ". qual: ").concat(qualityIndex, ". newimg: ").concat(newImage));
this.setImageSizeAndOffset(previewImage, frame); this.setImageSizeAndOffset(previewImage, frame);
if (newImage) { if (newImage) {
this.currentContainer.appendChild(previewImage); this.currentImageContainer.appendChild(previewImage);
this.currentImageElement = previewImage; this.currentImageElement = previewImage;
if (!this.loadedImages.includes(thumbFilename)) this.loadedImages.push(thumbFilename);
if (!this.loadedImages.includes(thumbFilename)) {
this.loadedImages.push(thumbFilename);
}
} // Preload images before and after the current one } // Preload images before and after the current one
// Show higher quality of the same frame // Show higher quality of the same frame
// Each step here has a short time delay, and only continues if still hovering/seeking the same spot. This is to protect slow connections from overloading // Each step here has a short time delay, and only continues if still hovering/seeking the same spot. This is to protect slow connections from overloading
@ -6899,32 +6946,26 @@ typeof navigator === "object" && (function (global, factory) {
var _this7 = this; var _this7 = this;
// Get a list of all images, convert it from a DOM list to an array // Get a list of all images, convert it from a DOM list to an array
var allImages = Array.from(this.currentContainer.children); Array.from(this.currentImageContainer.children).forEach(function (image) {
if (image.tagName.toLowerCase() !== 'img') {
var _loop = function _loop() { return;
var image = allImages[_i];
if (image.tagName === 'IMG') {
var removeDelay = _this7.usingJpegSprites ? 500 : 1000;
if (image.getAttribute('data-thumbnum') !== currentImage.getAttribute('data-thumbnum') && !image.getAttribute('data-deleting')) {
// Wait 200ms, as the new image can take some time to show on certain browsers (even though it was downloaded before showing). This will prevent flicker, and show some generosity towards slower clients
// First set attribute 'deleting' to prevent multi-handling of this on repeat firing of this function
image.setAttribute('data-deleting', 'true');
var currentContainer = _this7.currentContainer; // This has to be set before the timeout - to prevent issues switching between hover and scrub
setTimeout(function () {
currentContainer.removeChild(image);
_this7.player.debug.log('Removing thumb: ' + image.getAttribute('data-thumbfilename'));
}, removeDelay);
}
} }
};
for (var _i = 0; _i < allImages.length; _i++) { var removeDelay = _this7.usingSprites ? 500 : 1000;
_loop();
} if (image.dataset.index !== currentImage.dataset.index && !image.dataset.deleting) {
// Wait 200ms, as the new image can take some time to show on certain browsers (even though it was downloaded before showing). This will prevent flicker, and show some generosity towards slower clients
// First set attribute 'deleting' to prevent multi-handling of this on repeat firing of this function
image.dataset.deleting = true;
var currentImageContainer = _this7.currentImageContainer; // This has to be set before the timeout - to prevent issues switching between hover and scrub
setTimeout(function () {
currentImageContainer.removeChild(image);
_this7.player.debug.log("Removing thumb: ".concat(image.dataset.filename));
}, removeDelay);
}
});
} // Preload images before and after the current one. Only if the user is still hovering/seeking the same frame } // Preload images before and after the current one. Only if the user is still hovering/seeking the same frame
// This will only preload the lowest quality // This will only preload the lowest quality
@ -6934,77 +6975,50 @@ typeof navigator === "object" && (function (global, factory) {
var _this8 = this; var _this8 = this;
var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
return new Promise(function (resolve, reject) { return new Promise(function (resolve) {
setTimeout(function () { setTimeout(function () {
var oldThumbFilename = _this8.thumbnailsDefs[0].frames[thumbNum].text; var oldThumbFilename = _this8.thumbnails[0].frames[thumbNum].text;
if (_this8.showingThumbFilename === oldThumbFilename) { if (_this8.showingThumbFilename === oldThumbFilename) {
// Find the nearest thumbs with different filenames. Sometimes it'll be the next index, but in the case of jpeg sprites, it might be 100+ away // Find the nearest thumbs with different filenames. Sometimes it'll be the next index, but in the case of sprites, it might be 100+ away
var thumbnailsDefsCopy; var thumbnailsClone;
if (forward) { if (forward) {
thumbnailsDefsCopy = _this8.thumbnailsDefs[0].frames.slice(thumbNum); thumbnailsClone = _this8.thumbnails[0].frames.slice(thumbNum);
} else { } else {
thumbnailsDefsCopy = _this8.thumbnailsDefs[0].frames.slice(0, thumbNum).reverse(); thumbnailsClone = _this8.thumbnails[0].frames.slice(0, thumbNum).reverse();
} }
var foundOne = false; var foundOne = false;
var _iteratorNormalCompletion2 = true; thumbnailsClone.forEach(function (frame) {
var _didIteratorError2 = false; var newThumbFilename = frame.text;
var _iteratorError2 = undefined;
try { if (newThumbFilename !== oldThumbFilename) {
var _loop2 = function _loop2() { // Found one with a different filename. Make sure it hasn't already been loaded on this page visit
var frame = _step2.value; if (!_this8.loadedImages.includes(newThumbFilename)) {
var newThumbFilename = frame.text; foundOne = true;
if (newThumbFilename !== oldThumbFilename) { _this8.player.debug.log("Preloading thumb filename: ".concat(newThumbFilename));
// Found one with a different filename. Make sure it hasn't already been loaded on this page visit
if (!_this8.loadedImages.includes(newThumbFilename)) {
foundOne = true;
_this8.player.debug.log('Preloading thumb filename: ' + newThumbFilename); var urlPrefix = _this8.thumbnails[0].urlPrefix;
var thumbURL = urlPrefix + newThumbFilename;
var previewImage = new Image();
previewImage.src = thumbURL;
var urlPrefix = _this8.thumbnailsDefs[0].urlPrefix; previewImage.onload = function () {
var thumbURL = urlPrefix + newThumbFilename; _this8.player.debug.log("Preloaded thumb filename: ".concat(newThumbFilename));
var previewImage = new Image();
previewImage.src = thumbURL;
previewImage.onload = function () { if (!_this8.loadedImages.includes(newThumbFilename)) _this8.loadedImages.push(newThumbFilename); // We don't resolve until the thumb is loaded
_this8.player.debug.log('Preloaded thumb filename: ' + newThumbFilename);
if (!_this8.loadedImages.includes(newThumbFilename)) _this8.loadedImages.push(newThumbFilename); // We don't resolve until the thumb is loaded resolve();
};
resolve();
};
}
return "break";
}
};
for (var _iterator2 = thumbnailsDefsCopy[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var _ret = _loop2();
if (_ret === "break") break;
} // If there are none to preload then we want to resolve immediately
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
} }
} }
} }); // If there are none to preload then we want to resolve immediately
if (!foundOne) resolve(); if (!foundOne) {
resolve();
}
} }
}, 300); }, 300);
}); });
@ -7015,17 +7029,20 @@ typeof navigator === "object" && (function (global, factory) {
value: function getHigherQuality(currentQualityIndex, previewImage, frame, thumbFilename) { value: function getHigherQuality(currentQualityIndex, previewImage, frame, thumbFilename) {
var _this9 = this; var _this9 = this;
if (currentQualityIndex < this.thumbnailsDefs.length - 1) { if (currentQualityIndex < this.thumbnails.length - 1) {
// Only use the higher quality version if it's going to look any better - if the current thumb is of a lower pixel density than the thumbnail container // Only use the higher quality version if it's going to look any better - if the current thumb is of a lower pixel density than the thumbnail container
var previewImageHeight = previewImage.naturalHeight; var previewImageHeight = previewImage.naturalHeight;
if (this.usingJpegSprites) previewImageHeight = frame.h;
if (this.usingSprites) {
previewImageHeight = frame.h;
}
if (previewImageHeight < this.thumbContainerHeight) { if (previewImageHeight < this.thumbContainerHeight) {
// Recurse back to the loadImage function - show a higher quality one, but only if the viewer is on this frame for a while // Recurse back to the loadImage function - show a higher quality one, but only if the viewer is on this frame for a while
setTimeout(function () { setTimeout(function () {
// Make sure the mouse hasn't already moved on and started hovering at another image // Make sure the mouse hasn't already moved on and started hovering at another image
if (_this9.showingThumbFilename === thumbFilename) { if (_this9.showingThumbFilename === thumbFilename) {
_this9.player.debug.log('Showing higher quality thumb for: ' + thumbFilename); _this9.player.debug.log("Showing higher quality thumb for: ".concat(thumbFilename));
_this9.loadImage(currentQualityIndex + 1); _this9.loadImage(currentQualityIndex + 1);
} }
@ -7036,13 +7053,13 @@ typeof navigator === "object" && (function (global, factory) {
}, { }, {
key: "showThumbContainer", key: "showThumbContainer",
value: function showThumbContainer() { value: function showThumbContainer() {
this.player.elements.display.previewThumbnailContainer.style.opacity = 1; this.elements.thumb.container.style.opacity = 1;
} }
}, { }, {
key: "hideThumbContainer", key: "hideThumbContainer",
value: function hideThumbContainer() { value: function hideThumbContainer() {
var clearShowing = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; var clearShowing = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
this.player.elements.display.previewThumbnailContainer.style.opacity = 0; this.elements.thumb.container.style.opacity = 0;
if (clearShowing) { if (clearShowing) {
this.showingThumb = null; this.showingThumb = null;
@ -7052,20 +7069,21 @@ typeof navigator === "object" && (function (global, factory) {
}, { }, {
key: "showScrubbingContainer", key: "showScrubbingContainer",
value: function showScrubbingContainer() { value: function showScrubbingContainer() {
this.player.elements.display.previewScrubbingContainer.style.opacity = 1; this.elements.scrubber.container.style.opacity = 1;
} }
}, { }, {
key: "hideScrubbingContainer", key: "hideScrubbingContainer",
value: function hideScrubbingContainer() { value: function hideScrubbingContainer() {
this.player.elements.display.previewScrubbingContainer.style.opacity = 0; this.elements.scrubber.container.style.opacity = 0;
this.showingThumb = null; this.showingThumb = null;
this.showingThumbFilename = null; this.showingThumbFilename = null;
} }
}, { }, {
key: "determineContainerAutoSizing", key: "determineContainerAutoSizing",
value: function determineContainerAutoSizing() { value: function determineContainerAutoSizing() {
if (this.player.elements.display.previewThumbnailContainer.clientHeight > 20) { if (this.elements.thumb.imageContainer.clientHeight > 20) {
this.sizeSpecifiedInCSS = true; // This will prevent auto sizing in this.setThumbContainerSizeAndPos() // This will prevent auto sizing in this.setThumbContainerSizeAndPos()
this.sizeSpecifiedInCSS = true;
} }
} // Set the size to be about a quarter of the size of video. Unless option dynamicSize === false, in which case it needs to be set in CSS } // Set the size to be about a quarter of the size of video. Unless option dynamicSize === false, in which case it needs to be set in CSS
@ -7073,9 +7091,9 @@ typeof navigator === "object" && (function (global, factory) {
key: "setThumbContainerSizeAndPos", key: "setThumbContainerSizeAndPos",
value: function setThumbContainerSizeAndPos() { value: function setThumbContainerSizeAndPos() {
if (!this.sizeSpecifiedInCSS) { if (!this.sizeSpecifiedInCSS) {
var thumbWidth = this.thumbContainerHeight * this.thumbAspectRatio; var thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio);
this.player.elements.display.previewThumbnailContainer.style.height = "".concat(this.thumbContainerHeight, "px"); this.elements.thumb.imageContainer.style.height = "".concat(this.thumbContainerHeight, "px");
this.player.elements.display.previewThumbnailContainer.style.width = "".concat(thumbWidth, "px"); this.elements.thumb.imageContainer.style.width = "".concat(thumbWidth, "px");
} }
this.setThumbContainerPos(); this.setThumbContainerPos();
@ -7085,12 +7103,12 @@ typeof navigator === "object" && (function (global, factory) {
value: function setThumbContainerPos() { value: function setThumbContainerPos() {
var seekbarRect = this.player.elements.progress.getBoundingClientRect(); var seekbarRect = this.player.elements.progress.getBoundingClientRect();
var plyrRect = this.player.elements.container.getBoundingClientRect(); var plyrRect = this.player.elements.container.getBoundingClientRect();
var previewContainer = this.player.elements.display.previewThumbnailContainer; // Find the lowest and highest desired left-position, so we don't slide out the side of the video container var container = this.elements.thumb.container; // Find the lowest and highest desired left-position, so we don't slide out the side of the video container
var minVal = plyrRect.left - seekbarRect.left + 10; var minVal = plyrRect.left - seekbarRect.left + 10;
var maxVal = plyrRect.right - seekbarRect.left - previewContainer.clientWidth - 10; // Set preview container position to: mousepos, minus seekbar.left, minus half of previewContainer.clientWidth var maxVal = plyrRect.right - seekbarRect.left - container.clientWidth - 10; // Set preview container position to: mousepos, minus seekbar.left, minus half of previewContainer.clientWidth
var previewPos = this.mousePosX - seekbarRect.left - previewContainer.clientWidth / 2; var previewPos = this.mousePosX - seekbarRect.left - container.clientWidth / 2;
if (previewPos < minVal) { if (previewPos < minVal) {
previewPos = minVal; previewPos = minVal;
@ -7100,111 +7118,30 @@ typeof navigator === "object" && (function (global, factory) {
previewPos = maxVal; previewPos = maxVal;
} }
previewContainer.style.left = previewPos + 'px'; container.style.left = "".concat(previewPos, "px");
} // 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
}, { }, {
key: "setScrubbingContainerSize", key: "setScrubbingContainerSize",
value: function setScrubbingContainerSize() { value: function setScrubbingContainerSize() {
this.player.elements.display.previewScrubbingContainer.style.width = "".concat(this.player.media.clientWidth, "px"); 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.player.elements.display.previewScrubbingContainer.style.height = "".concat(this.player.media.clientWidth / this.thumbAspectRatio, "px"); // Can't use media.clientHeight - html5 video goes big and does black bars above and below
} // Jpeg sprites need to be offset to the correct location this.elements.scrubber.container.style.height = "".concat(this.player.media.clientWidth / this.thumbAspectRatio, "px");
} // Sprites need to be offset to the correct location
}, { }, {
key: "setImageSizeAndOffset", key: "setImageSizeAndOffset",
value: function setImageSizeAndOffset(previewImage, frame) { value: function setImageSizeAndOffset(previewImage, frame) {
if (this.usingJpegSprites) { if (!this.usingSprites) {
// Find difference between jpeg height and preview container height return;
var heightMulti = this.thumbContainerHeight / frame.h; } // Find difference between height and preview container height
previewImage.style.height = "".concat(previewImage.naturalHeight * heightMulti, "px");
previewImage.style.width = "".concat(previewImage.naturalWidth * heightMulti, "px");
previewImage.style.left = "-".concat(Math.ceil(frame.x * heightMulti), "px");
previewImage.style.top = "-".concat(frame.y * heightMulti, "px"); // todo: might need to round this one up too
}
} // Arg: vttDataString example: "WEBVTT\n\n1\n00:00:05.000 --> 00:00:10.000\n1080p-00001.jpg"
}, {
key: "parseVtt",
value: function parseVtt(vttDataString) {
var processedList = [];
var frames = vttDataString.split(/\r\n\r\n|\n\n|\r\r/);
var _iteratorNormalCompletion3 = true;
var _didIteratorError3 = false;
var _iteratorError3 = undefined;
try { var heightMulti = this.thumbContainerHeight / frame.h;
for (var _iterator3 = frames[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) { previewImage.style.height = "".concat(Math.floor(previewImage.naturalHeight * heightMulti), "px");
var frame = _step3.value; previewImage.style.width = "".concat(Math.floor(previewImage.naturalWidth * heightMulti), "px");
var result = {}; previewImage.style.left = "-".concat(Math.ceil(frame.x * heightMulti), "px");
var _iteratorNormalCompletion4 = true; previewImage.style.top = "-".concat(frame.y * heightMulti, "px"); // TODO: might need to round this one up too
var _didIteratorError4 = false;
var _iteratorError4 = undefined;
try {
for (var _iterator4 = frame.split(/\r\n|\n|\r/)[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
var line = _step4.value;
if (result.startTime == null) {
// The line with start and end times on it is the first line of interest
var matchTimes = line.match(/([0-9]{2}):([0-9]{2}):([0-9]{2}).([0-9]{2,3})( ?--> ?)([0-9]{2}):([0-9]{2}):([0-9]{2}).([0-9]{2,3})/); // Note that this currently ignores caption formatting directives that are optionally on the end of this line - fine for non-captions VTT
if (matchTimes) {
result.startTime = Number(matchTimes[1]) * 60 * 60 + Number(matchTimes[2]) * 60 + Number(matchTimes[3]) + Number("0." + matchTimes[4]);
result.endTime = Number(matchTimes[6]) * 60 * 60 + Number(matchTimes[7]) * 60 + Number(matchTimes[8]) + Number("0." + matchTimes[9]);
}
} else {
// If we already have the startTime, then we're definitely up to the text line(s)
if (line.trim().length > 0) {
if (!result.text) {
var lineSplit = line.trim().split('#xywh=');
result.text = lineSplit[0]; // If there's content in lineSplit[1], then we have jpeg sprites. If not, then it's just one frame per jpeg
if (lineSplit[1]) {
var xywh = lineSplit[1].split(',');
result.x = xywh[0];
result.y = xywh[1];
result.w = xywh[2];
result.h = xywh[3];
}
}
}
}
}
} catch (err) {
_didIteratorError4 = true;
_iteratorError4 = err;
} finally {
try {
if (!_iteratorNormalCompletion4 && _iterator4.return != null) {
_iterator4.return();
}
} finally {
if (_didIteratorError4) {
throw _iteratorError4;
}
}
}
if (result.text) {
processedList.push(result);
}
}
} catch (err) {
_didIteratorError3 = true;
_iteratorError3 = err;
} finally {
try {
if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
_iterator3.return();
}
} finally {
if (_didIteratorError3) {
throw _iteratorError3;
}
}
}
return processedList;
} }
}, { }, {
key: "enabled", key: "enabled",
@ -7212,52 +7149,45 @@ typeof navigator === "object" && (function (global, factory) {
return this.player.isHTML5 && this.player.isVideo && this.player.config.previewThumbnails.enabled; return this.player.isHTML5 && this.player.isVideo && this.player.config.previewThumbnails.enabled;
} }
}, { }, {
key: "currentContainer", key: "currentImageContainer",
get: function get() { get: function get() {
if (this.mouseDown) { if (this.mouseDown) {
return this.player.elements.display.previewScrubbingContainer; return this.elements.scrubber.container;
} else {
return this.player.elements.display.previewThumbnailContainer;
} }
return this.elements.thumb.imageContainer;
} }
}, { }, {
key: "usingJpegSprites", key: "usingSprites",
get: function get() { get: function get() {
if (this.thumbnailsDefs[0].frames[0].w) { return Object.keys(this.thumbnails[0].frames[0]).includes('w');
return true;
} else {
return false;
}
} }
}, { }, {
key: "thumbAspectRatio", key: "thumbAspectRatio",
get: function get() { get: function get() {
if (this.usingJpegSprites) { if (this.usingSprites) {
return this.thumbnailsDefs[0].frames[0].w / this.thumbnailsDefs[0].frames[0].h; return this.thumbnails[0].frames[0].w / this.thumbnails[0].frames[0].h;
} else {
return this.thumbnailsDefs[0].width / this.thumbnailsDefs[0].height;
} }
return this.thumbnails[0].width / this.thumbnails[0].height;
} }
}, { }, {
key: "thumbContainerHeight", key: "thumbContainerHeight",
get: function get() { get: function get() {
if (this.mouseDown) { if (this.mouseDown) {
// return this.player.elements.container.clientHeight; 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
// return this.player.media.clientHeight;
return this.player.media.clientWidth / this.thumbAspectRatio; // Can't use media.clientHeight - html5 video goes big and does black bars above and below
} else {
// return this.player.elements.container.clientHeight / 4;
return this.player.media.clientWidth / this.thumbAspectRatio / 4;
} }
return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
} }
}, { }, {
key: "currentImageElement", key: "currentImageElement",
get: function get() { get: function get() {
if (this.mouseDown) { if (this.mouseDown) {
return this.currentScrubbingImageElement; return this.currentScrubbingImageElement;
} else {
return this.currentThumbnailImageElement;
} }
return this.currentThumbnailImageElement;
}, },
set: function set(element) { set: function set(element) {
if (this.mouseDown) { if (this.mouseDown) {

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

838
dist/plyr.polyfilled.js vendored
View File

File diff suppressed because it is too large Load Diff

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

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

@ -375,9 +375,12 @@ const defaults = {
}, },
tabFocus: 'plyr__tab-focus', tabFocus: 'plyr__tab-focus',
previewThumbnails: { previewThumbnails: {
thumbnailContainer: 'plyr__preview-thumbnail-container', // Tooltip thumbs
scrubbingContainer: 'plyr__preview-scrubbing-container', thumbContainer: 'plyr__preview-thumb',
timeTextContainer: 'plyr__preview-time-text-container', imageContainer: 'plyr__preview-thumb__image-container',
timeContainer: 'plyr__preview-thumb__time-container',
// Scrubber
scrubbingContainer: 'plyr__preview-scrubber',
}, },
}, },
@ -400,7 +403,7 @@ const defaults = {
enabled: false, enabled: false,
publisherId: '', publisherId: '',
}, },
// YouTube nocookies mode // YouTube nocookies mode
noCookie: false, noCookie: false,

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

@ -76,6 +76,11 @@ class PreviewThumbnails {
this.mouseDown = false; this.mouseDown = false;
this.loadedImages = []; this.loadedImages = [];
this.elements = {
thumb: {},
scrubber: {},
};
if (this.enabled) { if (this.enabled) {
this.load(); this.load();
} }
@ -93,8 +98,8 @@ class PreviewThumbnails {
// Initiate DOM listeners so that our preview thumbnails can be used // Initiate DOM listeners so that our preview thumbnails can be used
this.listeners(); this.listeners();
// Build HTML DOM elements // Render DOM elements
this.elements(); this.render();
// Check to see if thumb container size was specified manually in CSS // Check to see if thumb container size was specified manually in CSS
this.determineContainerAutoSizing(); this.determineContainerAutoSizing();
@ -118,7 +123,7 @@ class PreviewThumbnails {
Promise.all(promises).then(() => { Promise.all(promises).then(() => {
// Sort smallest to biggest (e.g., [120p, 480p, 1080p]) // Sort smallest to biggest (e.g., [120p, 480p, 1080p])
this.thumbnails.sort((x, y) => x.height - y.height); this.thumbnails.sort((x, y) => x.height - y.height);
this.player.debug.log(`Preview thumbnails: thumbnails: ${JSON.stringify(this.thumbnails, null, 4)}`); this.player.debug.log('Preview thumbnails', this.thumbnails);
resolve(); resolve();
}); });
@ -184,7 +189,7 @@ class PreviewThumbnails {
this.mousePosX = event.pageX; this.mousePosX = event.pageX;
// Set time text inside image container // Set time text inside image container
this.player.elements.display.previewThumbnailTimeText.innerText = formatTime(this.seekTime); this.elements.thumb.time.innerText = formatTime(this.seekTime);
// Download and show image // Download and show image
this.showImageAtCurrentTime(); this.showImageAtCurrentTime();
@ -254,34 +259,37 @@ class PreviewThumbnails {
/** /**
* Create HTML elements for image containers * Create HTML elements for image containers
*/ */
elements() { render() {
// Create HTML element: plyr__preview-thumbnail-container // Create HTML element: plyr__preview-thumbnail-container
const previewThumbnailContainer = createElement('div', { this.elements.thumb.container = createElement('div', {
class: this.player.config.classNames.previewThumbnails.thumbnailContainer, class: this.player.config.classNames.previewThumbnails.thumbContainer,
}); });
this.player.elements.progress.appendChild(previewThumbnailContainer); // Wrapper for the image for styling
this.player.elements.display.previewThumbnailContainer = previewThumbnailContainer; this.elements.thumb.imageContainer = createElement('div', {
class: this.player.config.classNames.previewThumbnails.imageContainer,
});
this.elements.thumb.container.appendChild(this.elements.thumb.imageContainer);
// Create HTML element, parent+span: time text (e.g., 01:32:00) // Create HTML element, parent+span: time text (e.g., 01:32:00)
const timeTextContainer = createElement('div', { const timeContainer = createElement('div', {
class: this.player.config.classNames.previewThumbnails.timeTextContainer, class: this.player.config.classNames.previewThumbnails.timeContainer,
}); });
this.player.elements.display.previewThumbnailContainer.appendChild(timeTextContainer); this.elements.thumb.time = createElement('span', {}, '00:00');
timeContainer.appendChild(this.elements.thumb.time);
const timeText = createElement('span', {}, '00:00'); this.elements.thumb.container.appendChild(timeContainer);
timeTextContainer.appendChild(timeText); // Inject the whole thumb
this.player.elements.display.previewThumbnailTimeText = timeText; this.player.elements.progress.appendChild(this.elements.thumb.container);
// Create HTML element: plyr__preview-scrubbing-container // Create HTML element: plyr__preview-scrubbing-container
const previewScrubbingContainer = createElement('div', { this.elements.scrubber.container = createElement('div', {
class: this.player.config.classNames.previewThumbnails.scrubbingContainer, class: this.player.config.classNames.previewThumbnails.scrubbingContainer,
}); });
this.player.elements.wrapper.appendChild(previewScrubbingContainer); this.player.elements.wrapper.appendChild(this.elements.scrubber.container);
this.player.elements.display.previewScrubbingContainer = previewScrubbingContainer;
} }
showImageAtCurrentTime() { showImageAtCurrentTime() {
@ -319,23 +327,24 @@ class PreviewThumbnails {
const { urlPrefix } = thumbnail; const { urlPrefix } = thumbnail;
const frame = thumbnail.frames[thumbNum]; const frame = thumbnail.frames[thumbNum];
const thumbFilename = thumbnail.frames[thumbNum].text; const thumbFilename = thumbnail.frames[thumbNum].text;
const thumbURL = urlPrefix + thumbFilename; const thumbUrl = urlPrefix + thumbFilename;
if ( if (!this.currentImageElement || this.currentImageElement.dataset.filename !== thumbFilename) {
!this.currentImageElement ||
this.currentImageElement.getAttribute('data-thumbfilename') !== thumbFilename
) {
// If we're already loading a previous image, remove its onload handler - we don't want it to load after this one // If we're already loading a previous image, remove its onload handler - we don't want it to load after this one
// Only do this if not using sprites. Without sprites we really want to show as many images as possible, as a best-effort // Only do this if not using sprites. Without sprites we really want to show as many images as possible, as a best-effort
if (this.loadingImage && this.usingSprites) this.loadingImage.onload = null; if (this.loadingImage && this.usingSprites) {
this.loadingImage.onload = null;
}
// We're building and adding a new image. In other implementations of similar functionality (Youtube), background image is instead used. But this causes issues with larger images in Firefox and Safari - switching between background images causes a flicker. Putting a new image over the top does not // We're building and adding a new image. In other implementations of similar functionality (Youtube), background image is instead used. But this causes issues with larger images in Firefox and Safari - switching between background images causes a flicker. Putting a new image over the top does not
const previewImage = new Image(); const previewImage = new Image();
previewImage.src = thumbURL; previewImage.src = thumbUrl;
previewImage.setAttribute('data-thumbnum', thumbNum); previewImage.dataset.index = thumbNum;
previewImage.setAttribute('data-thumbfilename', thumbFilename); previewImage.dataset.filename = thumbFilename;
this.showingThumbFilename = thumbFilename; this.showingThumbFilename = thumbFilename;
this.player.debug.log(`Loading image: ${thumbUrl}`);
// For some reason, passing the named function directly causes it to execute immediately. So I've wrapped it in an anonymous function... // For some reason, passing the named function directly causes it to execute immediately. So I've wrapped it in an anonymous function...
previewImage.onload = () => previewImage.onload = () =>
this.showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename, true); this.showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename, true);
@ -344,7 +353,7 @@ class PreviewThumbnails {
} else { } else {
// Update the existing image // Update the existing image
this.showImage(this.currentImageElement, frame, qualityIndex, thumbNum, thumbFilename, false); this.showImage(this.currentImageElement, frame, qualityIndex, thumbNum, thumbFilename, false);
this.currentImageElement.setAttribute('data-thumbnum', thumbNum); this.currentImageElement.dataset.index = thumbNum;
this.removeOldImages(this.currentImageElement); this.removeOldImages(this.currentImageElement);
} }
} }
@ -356,7 +365,7 @@ class PreviewThumbnails {
this.setImageSizeAndOffset(previewImage, frame); this.setImageSizeAndOffset(previewImage, frame);
if (newImage) { if (newImage) {
this.currentContainer.appendChild(previewImage); this.currentImageContainer.appendChild(previewImage);
this.currentImageElement = previewImage; this.currentImageElement = previewImage;
if (!this.loadedImages.includes(thumbFilename)) { if (!this.loadedImages.includes(thumbFilename)) {
@ -375,24 +384,23 @@ class PreviewThumbnails {
// Remove all preview images that aren't the designated current image // Remove all preview images that aren't the designated current image
removeOldImages(currentImage) { removeOldImages(currentImage) {
// Get a list of all images, convert it from a DOM list to an array // Get a list of all images, convert it from a DOM list to an array
Array.from(this.currentContainer.children).forEach(image => { Array.from(this.currentImageContainer.children).forEach(image => {
if (image.tagName === 'IMG') { if (image.tagName.toLowerCase() !== 'img') {
const removeDelay = this.usingSprites ? 500 : 1000; return;
}
if ( const removeDelay = this.usingSprites ? 500 : 1000;
image.getAttribute('data-thumbnum') !== currentImage.getAttribute('data-thumbnum') &&
!image.getAttribute('data-deleting')
) {
// Wait 200ms, as the new image can take some time to show on certain browsers (even though it was downloaded before showing). This will prevent flicker, and show some generosity towards slower clients
// First set attribute 'deleting' to prevent multi-handling of this on repeat firing of this function
image.setAttribute('data-deleting', 'true');
const { currentContainer } = this; // This has to be set before the timeout - to prevent issues switching between hover and scrub
setTimeout(() => { if (image.dataset.index !== currentImage.dataset.index && !image.dataset.deleting) {
currentContainer.removeChild(image); // Wait 200ms, as the new image can take some time to show on certain browsers (even though it was downloaded before showing). This will prevent flicker, and show some generosity towards slower clients
this.player.debug.log(`Removing thumb: ${image.getAttribute('data-thumbfilename')}`); // First set attribute 'deleting' to prevent multi-handling of this on repeat firing of this function
}, removeDelay); image.dataset.deleting = true;
} const { currentImageContainer } = this; // This has to be set before the timeout - to prevent issues switching between hover and scrub
setTimeout(() => {
currentImageContainer.removeChild(image);
this.player.debug.log(`Removing thumb: ${image.dataset.filename}`);
}, removeDelay);
} }
}); });
} }
@ -473,11 +481,12 @@ class PreviewThumbnails {
} }
} }
get currentContainer() { get currentImageContainer() {
if (this.mouseDown) { if (this.mouseDown) {
return this.player.elements.display.previewScrubbingContainer; return this.elements.scrubber.container;
} }
return this.player.elements.display.previewThumbnailContainer;
return this.elements.thumb.imageContainer;
} }
get usingSprites() { get usingSprites() {
@ -488,23 +497,23 @@ class PreviewThumbnails {
if (this.usingSprites) { if (this.usingSprites) {
return this.thumbnails[0].frames[0].w / this.thumbnails[0].frames[0].h; return this.thumbnails[0].frames[0].w / this.thumbnails[0].frames[0].h;
} }
return this.thumbnails[0].width / this.thumbnails[0].height; return this.thumbnails[0].width / this.thumbnails[0].height;
} }
get thumbContainerHeight() { get thumbContainerHeight() {
if (this.mouseDown) { if (this.mouseDown) {
// return this.player.elements.container.clientHeight; 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
// return this.player.media.clientHeight;
return this.player.media.clientWidth / this.thumbAspectRatio; // Can't use media.clientHeight - html5 video goes big and does black bars above and below
} }
// return this.player.elements.container.clientHeight / 4;
return this.player.media.clientWidth / this.thumbAspectRatio / 4; return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
} }
get currentImageElement() { get currentImageElement() {
if (this.mouseDown) { if (this.mouseDown) {
return this.currentScrubbingImageElement; return this.currentScrubbingImageElement;
} }
return this.currentThumbnailImageElement; return this.currentThumbnailImageElement;
} }
@ -517,11 +526,11 @@ class PreviewThumbnails {
} }
showThumbContainer() { showThumbContainer() {
this.player.elements.display.previewThumbnailContainer.style.opacity = 1; this.elements.thumb.container.style.opacity = 1;
} }
hideThumbContainer(clearShowing = false) { hideThumbContainer(clearShowing = false) {
this.player.elements.display.previewThumbnailContainer.style.opacity = 0; this.elements.thumb.container.style.opacity = 0;
if (clearShowing) { if (clearShowing) {
this.showingThumb = null; this.showingThumb = null;
@ -530,27 +539,28 @@ class PreviewThumbnails {
} }
showScrubbingContainer() { showScrubbingContainer() {
this.player.elements.display.previewScrubbingContainer.style.opacity = 1; this.elements.scrubber.container.style.opacity = 1;
} }
hideScrubbingContainer() { hideScrubbingContainer() {
this.player.elements.display.previewScrubbingContainer.style.opacity = 0; this.elements.scrubber.container.style.opacity = 0;
this.showingThumb = null; this.showingThumb = null;
this.showingThumbFilename = null; this.showingThumbFilename = null;
} }
determineContainerAutoSizing() { determineContainerAutoSizing() {
if (this.player.elements.display.previewThumbnailContainer.clientHeight > 20) { if (this.elements.thumb.imageContainer.clientHeight > 20) {
this.sizeSpecifiedInCSS = true; // This will prevent auto sizing in this.setThumbContainerSizeAndPos() // This will prevent auto sizing in this.setThumbContainerSizeAndPos()
this.sizeSpecifiedInCSS = true;
} }
} }
// Set the size to be about a quarter of the size of video. Unless option dynamicSize === false, in which case it needs to be set in CSS // Set the size to be about a quarter of the size of video. Unless option dynamicSize === false, in which case it needs to be set in CSS
setThumbContainerSizeAndPos() { setThumbContainerSizeAndPos() {
if (!this.sizeSpecifiedInCSS) { if (!this.sizeSpecifiedInCSS) {
const thumbWidth = this.thumbContainerHeight * this.thumbAspectRatio; const thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio);
this.player.elements.display.previewThumbnailContainer.style.height = `${this.thumbContainerHeight}px`; this.elements.thumb.imageContainer.style.height = `${this.thumbContainerHeight}px`;
this.player.elements.display.previewThumbnailContainer.style.width = `${thumbWidth}px`; this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`;
} }
this.setThumbContainerPos(); this.setThumbContainerPos();
@ -559,41 +569,46 @@ class PreviewThumbnails {
setThumbContainerPos() { setThumbContainerPos() {
const seekbarRect = this.player.elements.progress.getBoundingClientRect(); const seekbarRect = this.player.elements.progress.getBoundingClientRect();
const plyrRect = this.player.elements.container.getBoundingClientRect(); const plyrRect = this.player.elements.container.getBoundingClientRect();
const previewContainer = this.player.elements.display.previewThumbnailContainer; const { container } = this.elements.thumb;
// Find the lowest and highest desired left-position, so we don't slide out the side of the video container // Find the lowest and highest desired left-position, so we don't slide out the side of the video container
const minVal = plyrRect.left - seekbarRect.left + 10; const minVal = plyrRect.left - seekbarRect.left + 10;
const maxVal = plyrRect.right - seekbarRect.left - previewContainer.clientWidth - 10; const maxVal = plyrRect.right - seekbarRect.left - container.clientWidth - 10;
// Set preview container position to: mousepos, minus seekbar.left, minus half of previewContainer.clientWidth // Set preview container position to: mousepos, minus seekbar.left, minus half of previewContainer.clientWidth
let previewPos = this.mousePosX - seekbarRect.left - previewContainer.clientWidth / 2; let previewPos = this.mousePosX - seekbarRect.left - container.clientWidth / 2;
if (previewPos < minVal) { if (previewPos < minVal) {
previewPos = minVal; previewPos = minVal;
} }
if (previewPos > maxVal) { if (previewPos > maxVal) {
previewPos = maxVal; previewPos = maxVal;
} }
previewContainer.style.left = `${previewPos}px`;
container.style.left = `${previewPos}px`;
} }
// 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.player.elements.display.previewScrubbingContainer.style.width = `${this.player.media.clientWidth}px`; this.elements.scrubber.container.style.width = `${this.player.media.clientWidth}px`;
this.player.elements.display.previewScrubbingContainer.style.height = `${this.player.media.clientWidth / // Can't use media.clientHeight - html5 video goes big and does black bars above and below
this.thumbAspectRatio}px`; // 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`;
} }
// Sprites need to be offset to the correct location // Sprites need to be offset to the correct location
setImageSizeAndOffset(previewImage, frame) { setImageSizeAndOffset(previewImage, frame) {
if (this.usingSprites) { if (!this.usingSprites) {
// Find difference between height and preview container height return;
const heightMulti = this.thumbContainerHeight / frame.h;
previewImage.style.height = `${previewImage.naturalHeight * heightMulti}px`;
previewImage.style.width = `${previewImage.naturalWidth * heightMulti}px`;
previewImage.style.left = `-${Math.ceil(frame.x * heightMulti)}px`;
previewImage.style.top = `-${frame.y * heightMulti}px`; // todo: might need to round this one up too
} }
// Find difference between height and preview container height
const heightMulti = this.thumbContainerHeight / frame.h;
previewImage.style.height = `${Math.floor(previewImage.naturalHeight * heightMulti)}px`;
previewImage.style.width = `${Math.floor(previewImage.naturalWidth * heightMulti)}px`;
previewImage.style.left = `-${Math.ceil(frame.x * heightMulti)}px`;
previewImage.style.top = `-${frame.y * heightMulti}px`; // TODO: might need to round this one up too
} }
} }

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

@ -2,54 +2,71 @@
// Preview Thumbnails // Preview Thumbnails
// -------------------------------------------------------------- // --------------------------------------------------------------
.plyr__preview-thumbnail-container { .plyr__preview-thumb {
background-color: rgba(0, 0, 0, 0.5); background-color: $plyr-tooltip-bg;
border: 1px solid rgba(0, 0, 0, 0); // The background colour above applies to the area under the border - so appears to be a border of 0.5 opacity black border-radius: 3px;
border-radius: 2px;
bottom: 100%; bottom: 100%;
box-shadow: $plyr-tooltip-shadow; box-shadow: $plyr-tooltip-shadow;
left: 50%;
line-height: 1.3;
margin-bottom: $plyr-tooltip-padding * 2; margin-bottom: $plyr-tooltip-padding * 2;
opacity: 0; opacity: 0;
overflow: hidden; padding: 3px;
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
transition: opacity 0.2s 0.1s ease; transition: opacity 0.2s 0.1s ease;
white-space: nowrap;
z-index: 2; z-index: 2;
img { // The background triangle
border-radius: 2px; &::before {
height: 100%; // Non-jpeg-sprite images are 100%. Jpeg sprites will have their size applied by javascript border-left: $plyr-tooltip-arrow-size solid transparent;
left: 0; border-right: $plyr-tooltip-arrow-size solid transparent;
max-height: none; border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-bg;
max-width: none; bottom: -$plyr-tooltip-arrow-size;
content: '';
height: 0;
left: 50%;
position: absolute; position: absolute;
top: 0; transform: translateX(-50%);
width: 100%; width: 0;
z-index: 2;
}
&__image-container {
border-radius: 2px;
overflow: hidden;
position: relative;
z-index: 0;
img {
height: 100%; // Non-jpeg-sprite images are 100%. Jpeg sprites will have their size applied by javascript
left: 0;
max-height: none;
max-width: none;
position: absolute;
top: 0;
width: 100%;
}
} }
// Seek time text // Seek time text
.plyr__preview-time-text-container { &__time-container {
bottom: 0; bottom: 6px;
left: 0; left: 0;
margin-bottom: 2px;
position: absolute; position: absolute;
right: 0; right: 0;
white-space: nowrap;
z-index: 3; z-index: 3;
span { span {
background-color: rgba(0, 0, 0, 0.55); background-color: rgba(0, 0, 0, 0.55);
color: rgba(255, 255, 255, 1); border-radius: 2px;
font-size: $plyr-font-size-small; color: #fff;
font-weight: $plyr-font-weight-regular; font-size: $plyr-font-size-time;
padding: 4px 6px 3px; padding: 3px 6px;
} }
} }
} }
.plyr__preview-scrubbing-container { .plyr__preview-scrubber {
bottom: 0; bottom: 0;
filter: blur(1px); filter: blur(1px);
height: 100%; height: 100%;

981
yarn.lock
View File

File diff suppressed because it is too large Load Diff