From 8f27611911d9e6b4c6012e1af44b6c14cf6eaffb Mon Sep 17 00:00:00 2001 From: James Date: Mon, 12 Nov 2018 15:55:26 +1100 Subject: Preview seek/scrubbing thumbnails --- src/sass/plugins/previewThumbnails.scss | 70 +++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 src/sass/plugins/previewThumbnails.scss (limited to 'src/sass/plugins') diff --git a/src/sass/plugins/previewThumbnails.scss b/src/sass/plugins/previewThumbnails.scss new file mode 100644 index 00000000..92702e39 --- /dev/null +++ b/src/sass/plugins/previewThumbnails.scss @@ -0,0 +1,70 @@ +// -------------------------------------------------------------- +// Preview Thumbnails +// -------------------------------------------------------------- + +.plyr__preview-thumbnail-container { + background-color: rgba(0,0,0,0.5); + 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: 0px; + bottom: 100%; + box-shadow: $plyr-tooltip-shadow; + left: 50%; + line-height: 1.3; + margin-bottom: $plyr-tooltip-padding * 2; + opacity: 0; + pointer-events: none; + position: absolute; + transition: opacity 0.2s 0.1s ease; + white-space: nowrap; + z-index: 2; + + img { + position: absolute; + left: 0px; + right: 0px; + top: 0px; + bottom: 0px; + margin: auto; + height: 100%; + width: 100%; + border-radius: 0px; + } + + // Seek time text + span { + position: absolute; + bottom: 0px; + z-index: 3; + transform: translate(-50%,0); + background-color: rgba(0,0,0,0.55); + color: rgba(255,255,255,1); + padding: 4px 6px 3px 6px; + font-size: $plyr-font-size-small; + font-weight: $plyr-font-weight-regular; + } +} + +.plyr__preview-scrubbing-container { + position: absolute; + left: 0px; + right: 0px; + top: 0px; + bottom: 0px; + height: 100%; + width: 100%; + z-index: 1; + transition: opacity 0.3s 0.3s ease; + filter: blur(1px); + + img { + position: absolute; + left: 0px; + right: 0px; + top: 0px; + bottom: 0px; + margin: auto; + height: 100%; + width: 100%; + object-fit: contain; + } +} -- cgit v1.2.3 From e948bfd585a7ad0472c612eeda1f8fe8bbcaa3cb Mon Sep 17 00:00:00 2001 From: James Date: Thu, 13 Dec 2018 20:39:39 +1100 Subject: Preview seek: jpeg sprites + much more - Allow jpeg sprites - much snappier and more accurate - Fixed bug: right clicking the seek bar sticks on mousedown - Fixed bug: moving the mouse really quickly results in not updating the thumb - Fixed bug: if you mousedown but don't move mouse, it shows a stale image in the scrubbing container - Fixed bug: very first image shows as 0px - Fixed bug: stretches images when video isn't same aspect as player --- src/sass/plugins/previewThumbnails.scss | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) (limited to 'src/sass/plugins') diff --git a/src/sass/plugins/previewThumbnails.scss b/src/sass/plugins/previewThumbnails.scss index 92702e39..044048eb 100644 --- a/src/sass/plugins/previewThumbnails.scss +++ b/src/sass/plugins/previewThumbnails.scss @@ -18,15 +18,16 @@ white-space: nowrap; z-index: 2; + overflow: hidden; + img { position: absolute; left: 0px; - right: 0px; top: 0px; - bottom: 0px; - margin: auto; - height: 100%; + height: 100%; // Non-jpeg-sprite images are 100%. Jpeg sprites will have their size applied by javascript width: 100%; + max-height: none; + max-width: none; border-radius: 0px; } @@ -52,19 +53,20 @@ bottom: 0px; height: 100%; width: 100%; + margin: auto; // Required when video is different dimensions to container (e.g., fullscreen) + overflow: hidden; z-index: 1; - transition: opacity 0.3s 0.3s ease; + transition: opacity 0.3s ease; filter: blur(1px); img { position: absolute; left: 0px; - right: 0px; top: 0px; - bottom: 0px; - margin: auto; height: 100%; width: 100%; + max-height: none; + max-width: none; object-fit: contain; } } -- cgit v1.2.3 From d97257a5a93707fbbdc150226c9fbee8feb8aedb Mon Sep 17 00:00:00 2001 From: James Date: Sat, 15 Dec 2018 11:32:50 +1100 Subject: Preview seek: Edge+IE11 fixes - Fixed bug: Edge seek errors: Replaced array spread with Array.from() - Fixed IE11 bug: seek time was offset to the left. Required an extra container div to facilitate this --- src/sass/plugins/previewThumbnails.scss | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) (limited to 'src/sass/plugins') diff --git a/src/sass/plugins/previewThumbnails.scss b/src/sass/plugins/previewThumbnails.scss index 044048eb..4de90667 100644 --- a/src/sass/plugins/previewThumbnails.scss +++ b/src/sass/plugins/previewThumbnails.scss @@ -32,16 +32,21 @@ } // Seek time text - span { + .plyr__preview-time-text-container { position: absolute; bottom: 0px; + left: 0px; + right: 0px; + margin-bottom: 2px; z-index: 3; - transform: translate(-50%,0); - background-color: rgba(0,0,0,0.55); - color: rgba(255,255,255,1); - padding: 4px 6px 3px 6px; - font-size: $plyr-font-size-small; - font-weight: $plyr-font-weight-regular; + + span { + background-color: rgba(0,0,0,0.55); + color: rgba(255,255,255,1); + padding: 4px 6px 3px 6px; + font-size: $plyr-font-size-small; + font-weight: $plyr-font-weight-regular; + } } } -- cgit v1.2.3