@mixd-id/web-scaffold 0.1.230406213 → 0.1.230406215

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406213",
+  "version": "0.1.230406215",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/YoutubeVideo.vue

@@ -1,17 +1,17 @@
 <template>
   <div :class="$style.comp" :style="computedStyle">
-    <iframe v-if="start" :class="videoClass"
-            :src="videoUrl"
-            frameborder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-            allowfullscreen />
-    <div v-else :class="videoClass" class="relative" @click="start = true">
-      <Image :src="thumbnailUrl" :class="videoClass" />
-      <div class="absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center">
-        <div class="bg-primary-500 cursor-pointer hover:bg-primary-600 p-3 px-4 rounded-lg">
-          <svg class="w-[16px] h-[16px] fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"/></svg>
-        </div>
-      </div>
+    <div :class="videoClass" class="absolute top-0 left-0 right-0 bottom-0 z-10"
+      :style="{ opacity:ready ? 1 : 0 }">
+      <div id="player"></div>
+    </div>
+    <div :class="videoClass" class="relative flex items-center justify-center"
+      :style="thumbnailStyle">
+      <button class="w-[68px] h-[48px]" aria-label="Play" title="Play">
+        <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%">
+          <path class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#333"></path>
+          <path d="M 45,24 27,14 27,34" fill="#fff"></path>
+        </svg>
+      </button>
     </div>
   </div>
 </template>
@@ -26,25 +26,32 @@ export default{
 
   props: {
 
-    videoId: String
+    videoId: String,
+
+    delay: {
+      type: Number,
+      default: 1000
+    },
 
   },
 
   computed: {
 
     videoUrl(){
-      return `https://www.youtube.com/embed/${this.videoId}?autoplay=1`
+      return `https://www.youtube.com/embed/${this.videoId}`
     },
 
-    thumbnailUrl(){
-      return `https://img.youtube.com/vi/${this.videoId}/0.jpg`
+    thumbnailStyle(){
+      return {
+        'background-image': `url('https://img.youtube.com/vi/${this.videoId}/0.jpg')`,
+        'background-size': 'cover',
+        'background-position': 'center center',
+      }
     },
 
     videoClass(){
       return [
         this.$style.video,
-        /*this.width[0] ? `w-${this.width[0]}` : undefined,
-        this.width[1] ? `md:w-${this.width[1]}` : undefined,*/
       ]
           .filter(_ => _)
           .join(' ')
@@ -54,8 +61,77 @@ export default{
 
   data(){
     return {
-      start: false
+      start: false,
+      ready: false,
+      mountedAt: null,
+      player: null
+    }
+  },
+
+  mounted() {
+    this.mountedAt = new Date().getTime()
+
+    if(this.delay){
+      window.setTimeout(() => {
+        if(!this.ready){
+          this.loadVideo()
+        }
+      }, this.delay)
     }
+
+    this.$observe.once(this.$el, () => {
+      if(new Date().getTime() - this.mountedAt < this.delay){
+        window.setTimeout(() => {
+          if(!this.ready){
+            this.loadVideo()
+          }
+        }, this.delay - (new Date().getTime() - this.mountedAt))
+      }
+      else{
+        if(!this.ready){
+          this.loadVideo()
+        }
+      }
+    })
+
+    window.onYouTubeIframeAPIReady = () => {
+      this.loadVideo()
+    }
+  },
+
+  methods: {
+
+    loadVideo(){
+
+      if(!('YT' in window)){
+        const script = document.createElement('script')
+        script.src = 'https://www.youtube.com/iframe_api'
+        document.head.appendChild(script)
+      }
+      else{
+        if(!this.player){
+          this.player = new YT.Player('player', {
+            height: '100%',
+            width: '100%',
+            videoId: this.videoId,
+            playerVars: {
+              autoplay: 1,
+              controls: 1,
+            },
+            events: {
+              onReady: () => {
+                window.setTimeout(() => this.ready = true, 500)
+              }
+            }
+          })
+        }
+        else{
+          this.player.loadVideoById(this.videoId)
+        }
+      }
+
+    }
+
   }
 
 }
@@ -65,7 +141,8 @@ export default{
 <style module>
 
 .comp{
-  @apply flex flex-col;
+  @apply relative;
+  aspect-ratio: 16 / 9;
 }
 
 .video{