Merge pull request #262 from GiovanH/pauseat

Automatically autoplay/pause collide video
GiovanH · Jan 5, 2023 · 3463c99 · 3463c99
2 parents cff5a30 + 9356d01
commit 3463c99
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 3 deletions.
diff --git a/src/components/SpecialPages/EndOfHS.vue b/src/components/SpecialPages/EndOfHS.vue
@@ -7,7 +7,7 @@
         </div>
         <Footnotes :pageId="thisPage.pageId" preface />
         <div class="vid">
-          <Media :url="thisPage.media[0]" />
+          <Media :url="thisPage.media[0]" :autoplay="pageNum === '009987'" ref="embed" />
         </div>      
         <div class="links">
           <FlashCredit  :pageId="thisPage.pageId" />
@@ -229,6 +229,10 @@ export default {
           display: flex;
           align-items: center;
           flex-flow: column;
+          width: 100%;
+          .collide & {
+            background: #262626;
+          }
         }
 
         .links{

diff --git a/src/components/UIElements/MediaEmbed.vue b/src/components/UIElements/MediaEmbed.vue
@@ -1,7 +1,7 @@
 <template>
   <img    v-if="getMediaType(url) === 'img'" :src='$getResourceURL(url)' @dragstart="drag($event)" alt />
   <video  v-else-if="getMediaType(url) ==='vid' && gifmode != undefined" :src='$getResourceURL(url)' :width="videoWidth" autoplay="true" muted="true" loop disablePictureInPicture />
-  <video  v-else-if="getMediaType(url) ==='vid' && gifmode == undefined" :src='$getResourceURL(url)' :width="videoWidth" controls controlsList="nodownload" disablePictureInPicture alt />
+  <video  v-else-if="getMediaType(url) ==='vid' && gifmode == undefined" :src='$getResourceURL(url)' :width="videoWidth" controls controlsList="nodownload" disablePictureInPicture alt :autoplay="autoplay" @loadeddata="onVideoLoaded" />
   <iframe v-else-if="getMediaType(url) === 'swf'" :key="url" :srcdoc='flashSrc' :width='flashProps.width' :height='($localData.settings.jsFlashes && flashProps.id in cropHeight) ? cropHeight[flashProps.id] : flashProps.height' @load="initIframe()" seamless/>
   <!-- HTML iframes must not point to assets :c -->
 
@@ -24,7 +24,7 @@ import Resources from "@/resources.js"
 
 export default {
   name: "MediaEmbed",
-  props: ['url', 'gifmode', 'webarchive', 'width', 'height'],
+  props: ['url', 'gifmode', 'webarchive', 'width', 'height', 'autoplay'],
   emits: ['blockedevent'], 
   data() {
     return {
@@ -215,6 +215,9 @@ export default {
         'A6A6I1': -100,
         'darkcage': 350,
       },
+      pauseAt: {
+        "08080": 18
+      },
       audio: [],
       source: undefined,
       lastStartedAudio: undefined,
@@ -311,6 +314,40 @@ export default {
     }
   },
   methods: {
+    onVideoLoaded(event) {
+      const pauseAt = this.pauseAt[this.flashProps.id]
+      if (pauseAt) {
+        const pause = function(){
+          if (this.currentTime > pauseAt) {
+            console.log("pausing video at", this.currentTime)
+            this.controls = true
+            this.pause()
+            this.removeEventListener("timeupdate", pause)
+          }
+        }
+        event.srcElement.controls = false
+        event.srcElement.addEventListener("timeupdate", pause)
+      }
+      if (this.flashProps.id == "08080") {
+        // Collide hijinks
+        const collide = function(){
+          if (this.currentTime > 22) {
+            this.style.transition = "width 1.5s cubic-bezier(0, 0, 0, 1)"
+            // this.style.height = "650px"
+            this.style.width = "950px"
+            this.removeAttribute("controls")
+            setTimeout(() => this.setAttribute("controls", "true"), 6000)
+            this.removeEventListener("timeupdate", collide)
+          }
+        }
+        event.srcElement.style.objectFit = "cover"
+        event.srcElement.style.objectPosition = "top"
+        event.srcElement.style.height = "650px"
+        event.srcElement.style.width = "650px"
+        event.srcElement.addEventListener("timeupdate", collide)
+        // event.srcElement.currentTime = 17 // debug helper
+      }
+    },
     initHtmlFrame(event) {
       if (this.frameType == 'webview') {
         const webview = event.srcElement