@mixd-id/web-scaffold 0.1.230406214 → 0.1.230406215

package/package.json

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

package/src/components/YoutubeVideo.vue

@@ -1,12 +1,17 @@
 <template>
   <div :class="$style.comp" :style="computedStyle">
-    <div id="player" :class="videoClass" class="relative" @click="loadVideo">
-      <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>
@@ -15,34 +20,38 @@
 
 import { componentMixin } from '../mixin/component'
 
-
 export default{
 
-  inject: [ 'alert' ],
-
   mixins: [ componentMixin ],
 
   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(' ')
@@ -50,6 +59,46 @@ export default{
 
   },
 
+  data(){
+    return {
+      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(){
@@ -60,43 +109,29 @@ export default{
         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: 0,
-              rel: 0,
+              controls: 1,
             },
             events: {
-              onReady: () => console.log('onReady'),
-              onStateChange: () => console.log('onStateChange'),
-              onAutoplayBlocked: () => this.alert('onAutoplayBlocked'),
+              onReady: () => {
+                window.setTimeout(() => this.ready = true, 500)
+              }
             }
-          });
+          })
         }
         else{
           this.player.loadVideoById(this.videoId)
         }
       }
-    }
 
-  },
-
-  mounted() {
-    this.id = this.uniqid()
-    window.onYouTubeIframeAPIReady = () => {
-      this.loadVideo()
     }
-  },
 
-  data(){
-    return {
-      id: null,
-      player: null,
-      start: false
-    }
   }
 
 }
@@ -106,7 +141,8 @@ export default{
 <style module>
 
 .comp{
-  @apply flex flex-col;
+  @apply relative;
+  aspect-ratio: 16 / 9;
 }
 
 .video{