Add "Start At" time support to Video component

packs/Core.elementsdevpack/components/com.realmacsoftware.video/hooks.source.js

@@ -15,6 +15,7 @@ const transformHook = (rw) => {
         loop,
         mute: muted,
         controls,
+        startAt,
 
         globalPadding,
     } = rw.props;
@@ -29,6 +30,7 @@ const transformHook = (rw) => {
         muted,
         controls,
         wantsLightbox,
+        startAt: startAt || 0,
     };
 
     if (video?.format == "mp4") {

packs/Core.elementsdevpack/components/com.realmacsoftware.video/properties.config.json

@@ -57,6 +57,22 @@
           "id": "loop",
           "responsive": false,
           "switch": {}
+        },
+        {
+          "divider": {}
+        },
+        {
+          "title": "Start At",
+          "heading": {}
+        },
+        {
+          "title": "Time (seconds)",
+          "id": "startAt",
+          "responsive": false,
+          "number": {
+            "default": 0,
+            "subtitle": "Start playback at this time in seconds"
+          }
         }
       ]
     },

packs/Core.elementsdevpack/components/com.realmacsoftware.video/templates/alpine.html

@@ -1,23 +1,29 @@
 @portal(bodyEnd, id: "com.realmacsoftware.alpineData.video", includeOnce: true)
   <script>
     document.addEventListener('alpine:init', () => {
-      Alpine.data('videoPlayer', (id, platform, videoId, options = { muted: false, loop: false, controls: true, autoplay: 'never' }) => ({
+      Alpine.data('videoPlayer', (id, platform, videoId, options = { muted: false, loop: false, controls: true, autoplay: 'never', startAt: 0 }) => ({
           id: id,
           platform: platform,
           videoId: videoId,
           options: options,
           showVideo: false,
           modalClosedHandler: null,
 
+          get startAt() {
+            return parseInt(this.options.startAt) || 0;
+          },
+
           get iframeAttributes() {
             return `autoplay=1&loop=${this.options.loop}&mute=${this.options.muted}&controls=${this.options.controls}`;
           },
 
           get iframeUrl() {
               if (this.platform === 'youtube') {
-                  return `https://www.youtube.com/embed/${this.videoId}?${this.iframeAttributes}`;
+                  const startParam = this.startAt > 0 ? `&start=${this.startAt}` : '';
+                  return `https://www.youtube.com/embed/${this.videoId}?${this.iframeAttributes}${startParam}`;
               } else if (this.platform === 'vimeo') {
-                  return `https://player.vimeo.com/video/${this.videoId}?${this.iframeAttributes}`;
+                  const startParam = this.startAt > 0 ? `#t=${this.startAt}s` : '';
+                  return `https://player.vimeo.com/video/${this.videoId}?${this.iframeAttributes}${startParam}`;
               } else if (this.platform === 'mp4') {
                   return this.videoId;
               }
@@ -36,6 +42,7 @@
                         this.$refs.video.muted = this.options.muted;
                         this.$refs.video.loop = this.options.loop;
                         this.$refs.video.controls = this.options.controls;
+                        if (this.startAt > 0) this.$refs.video.currentTime = this.startAt;
                         this.$refs.video.play();
                         }, 100);
                     }
@@ -65,6 +72,7 @@
                     this.$refs.video.muted = this.options.muted;
                     this.$refs.video.loop = this.options.loop;
                     this.$refs.video.controls = this.options.controls;
+                    if (this.startAt > 0) this.$refs.video.currentTime = this.startAt;
                     this.$refs.video.play();
                   }, 100);
                 }