From a9bc68df297d9e0b6313e2f06ac72aab14d73ada Mon Sep 17 00:00:00 2001
From: Connor Smith <connor.s1110@gmail.com>
Date: Sat, 8 Jun 2024 13:36:42 -0400
Subject: [PATCH] Add ability to skip backwards when at the end of video
 playback

---
 src/components/htmlMediaHelper.js       |  3 ---
 src/controllers/playback/video/index.js |  2 --
 src/plugins/htmlVideoPlayer/plugin.js   |  8 +++++++-
 src/plugins/htmlVideoPlayer/style.scss  | 10 ++++++++++
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/htmlMediaHelper.js b/src/components/htmlMediaHelper.js
index fa1b343caa..187b90f012 100644
--- a/src/components/htmlMediaHelper.js
+++ b/src/components/htmlMediaHelper.js
@@ -326,9 +326,6 @@ export function bindEventsToHlsPlayer(instance, hls, elem, onErrorFn, resolve, r
 export function onEndedInternal(instance, elem, onErrorFn) {
     elem.removeEventListener('error', onErrorFn);
 
-    resetSrc(elem);
-
-    destroyHlsPlayer(instance);
     destroyFlvPlayer(instance);
     destroyCastPlayer(instance);
 
diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js
index fbe4c3cecb..3ac4c01159 100644
--- a/src/controllers/playback/video/index.js
+++ b/src/controllers/playback/video/index.js
@@ -551,7 +551,6 @@ export default function (view) {
     }
 
     function onPlaybackStopped(e, state) {
-        currentRuntimeTicks = null;
         resetUpNextDialog();
         console.debug('nowplaying event: ' + e.type);
 
@@ -1969,4 +1968,3 @@ export default function (view) {
         });
     }
 }
-
diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js
index f26e89cc92..a4798b5259 100644
--- a/src/plugins/htmlVideoPlayer/plugin.js
+++ b/src/plugins/htmlVideoPlayer/plugin.js
@@ -885,6 +885,7 @@ export class HtmlVideoPlayer {
              * @type {HTMLMediaElement}
              */
         const elem = e.target;
+        document.querySelector('.posterOverlay').style.display = 'inline';
         this.destroyCustomTrack(elem);
         onEndedInternal(this, elem, this.onError);
     };
@@ -915,6 +916,7 @@ export class HtmlVideoPlayer {
             timeMs += ((currentPlayOptions.transcodingOffsetTicks || 0) / 10000);
             this.updateSubtitleText(timeMs);
         }
+        document.querySelector('.posterOverlay').style.display = 'none';
 
         Events.trigger(this, 'timeupdate');
     };
@@ -978,6 +980,7 @@ export class HtmlVideoPlayer {
         if (!this.#started) {
             this.#started = true;
             elem.removeAttribute('controls');
+            document.querySelector('.posterOverlay').style.display = 'none';
 
             loading.hide();
 
@@ -1596,8 +1599,11 @@ export class HtmlVideoPlayer {
 
                 html += '</video>';
 
+                html += '<img class="posterOverlay" />';
+
                 playerDlg.innerHTML = html;
                 const videoElement = playerDlg.querySelector('video');
+                const posterElement = playerDlg.querySelector('img');
 
                 videoElement.volume = getSavedVolume();
                 videoElement.addEventListener('timeupdate', this.onTimeUpdate);
@@ -1610,7 +1616,7 @@ export class HtmlVideoPlayer {
                 videoElement.addEventListener('dblclick', this.onDblClick);
                 videoElement.addEventListener('waiting', this.onWaiting);
                 if (options.backdropUrl) {
-                    videoElement.poster = options.backdropUrl;
+                    posterElement.src = options.backdropUrl;
                 }
 
                 document.body.insertBefore(playerDlg, document.body.firstChild);
diff --git a/src/plugins/htmlVideoPlayer/style.scss b/src/plugins/htmlVideoPlayer/style.scss
index 0026146081..c4ef807c92 100644
--- a/src/plugins/htmlVideoPlayer/style.scss
+++ b/src/plugins/htmlVideoPlayer/style.scss
@@ -36,6 +36,16 @@ video[controls]::-webkit-media-controls {
     height: 100%;
 }
 
+.posterOverlay {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100vw;
+    max-height: 100vh;
+    object-fit: contain;
+}
+
 .htmlvideoplayer::cue {
     background-color: transparent;
     text-shadow: 0.14em 0.14em 0.14em rgba(0, 0, 0, 1);