feat(playback): added the ability to select where to start playing videos from (start, mid, random)

will-moss · will-moss · commit 93c3d09c923d · 2026-03-11T15:07:23.000Z
re #33
diff --git a/Dockerfile b/Dockerfile
@@ -27,3 +27,4 @@ ENV PROGRESS_BAR_POSITION="bottom"
 ENV IGNORE_HIDDEN_PATHS="false"
 ENV SCROLL_DIRECTION="vertical"
 ENV USE_CUSTOM_SKIN="false"
+ENV VIDEO_START_POSITION="start"
diff --git a/README.md b/README.md
@@ -32,6 +32,7 @@ Erin has all these features implemented :
 - Automatic clip naming based on file name
 - Simple and optional security using a master password
 - Support for Horizontal and Vertical scroll direction
+- Support for starting video playback from the start, middle, or random point in the video
 - Support for custom styling\*\*\*\*
 - Support for HTTP and HTTPS
 - Support for Docker / proxy deployment
@@ -121,6 +122,7 @@ To run Erin, you will need to set the following environment variables in a `.env
 | `IGNORE_HIDDEN_PATHS`   | `boolean` | Whether all hidden files and directories (starting with a dot) should be ignored by Erin, and not loaded or scanned altogether | false |
 | `SCROLL_DIRECTION`      | `string`  | The scroll direction of your video feed. (Possible values : vertical, horizontal ) | vertical |
 | `USE_CUSTOM_SKIN`       | `boolean` | Whether a custom skin should be loaded on startup. (Possible values : true, false) | false |
+| `VIDEO_START_POSITION`  | `string`  | Where videos start playing. (Possible values : start, middle, random) | start |
 
 > **Tip :** To generate a secure hash for your instance, use the following command :
 
diff --git a/docker/Caddyfile b/docker/Caddyfile
@@ -26,6 +26,7 @@
   replace __IGNORE_HIDDEN_PATHS__ {$IGNORE_HIDDEN_PATHS}
   replace __USE_CUSTOM_SKIN__ {$USE_CUSTOM_SKIN}
   replace __SCROLL_DIRECTION__  "{$SCROLL_DIRECTION}"
+  replace __VIDEO_START_POSITION__  "{$VIDEO_START_POSITION}"
 }
 
 # Server configuration
diff --git a/public/index.html b/public/index.html
@@ -29,6 +29,7 @@
       window.AUTOPLAY_ENABLED = __AUTOPLAY_ENABLED__;
       window.PROGRESS_BAR_POSITION = "__PROGRESS_BAR_POSITION__";
       window.IGNORE_HIDDEN_PATHS = __IGNORE_HIDDEN_PATHS__;
+      window.VIDEO_START_POSITION = "__VIDEO_START_POSITION__";
     </script>
   </head>
   <body>
diff --git a/sample.env b/sample.env
@@ -7,3 +7,4 @@ AUTOPLAY_ENABLED=true
 IGNORE_HIDDEN_PATHS=true
 SCROLL_DIRECTION="vertical"
 USE_CUSTOM_SKIN=false
+VIDEO_START_POSITION="start"
diff --git a/src/components/VideoFeed/index.jsx b/src/components/VideoFeed/index.jsx
@@ -66,6 +66,12 @@ const VideoFeed = ({
     onFinishVideo();
   };
 
+  const startVideoAtSpecificPoint = (e) => {
+    e.target.currentTime = window.VIDEO_START_POSITION === 'middle'
+      ? e.target.duration / 2
+      : Math.random() * e.target.duration;
+  }
+
   // Hook - On mount - Set the current scroll
   useEffect(() => {
     if (jumpToEnd)
@@ -105,6 +111,12 @@ const VideoFeed = ({
         if (entry.isIntersecting) {
           visibleIndex = currentIndex;
           videoElement.play().catch((_) => {});
+
+          if ( window.VIDEO_START_POSITION !== 'start' ) {
+            if ( videoElement.readyState >= 1 ) startVideoAtSpecificPoint({ target: videoElement });
+            else videoElement.addEventListener('loadedmetadata', startVideoAtSpecificPoint, true);
+          }
+
           onFocusVideo(videos[currentIndex], currentIndex);
           videoElement.addEventListener("timeupdate", handleVideoTimeUpdate, true);
           videoElement.addEventListener("ended", replayVideo, true);
@@ -116,6 +128,10 @@ const VideoFeed = ({
           videoElement.pause();
           videoElement.removeEventListener("timeupdate", handleVideoTimeUpdate, true);
           videoElement.removeEventListener("ended", replayVideo, true);
+
+          if ( window.VIDEO_START_POSITION !== 'start' ) {
+            videoElement.removeEventListener('loadedmetadata', startVideoAtSpecificPoint, true);
+          }
         }
       });
 

Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,7 @@`
`26`	`26`	`replace __IGNORE_HIDDEN_PATHS__ {$IGNORE_HIDDEN_PATHS}`
`27`	`27`	`replace __USE_CUSTOM_SKIN__ {$USE_CUSTOM_SKIN}`
`28`	`28`	`replace __SCROLL_DIRECTION__ "{$SCROLL_DIRECTION}"`
	`29`	`+ replace __VIDEO_START_POSITION__ "{$VIDEO_START_POSITION}"`
`29`	`30`	`}`
`30`	`31`
`31`	`32`	`# Server configuration`