@mixd-id/web-scaffold 0.1.230406216 → 0.1.230406218

package/package.json

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

package/src/components/Carousel.vue

@@ -226,7 +226,7 @@ export default{
 
         if (Math.abs(dx) > 10) {
           if (tn < 1200){
-            dx < 0 ? this.next(true) : this.prev(true)
+            dx < 0 ? this.next() : this.prev()
           }
           else{
             this.setPosition()

package/src/components/YoutubeVideo.vue

@@ -1,12 +1,12 @@
 <template>
-  <div :class="$style.comp" :style="computedStyle">
+  <div :class="$style.comp" :style="computedStyle" @click="!ready ? loadVideo() : null">
     <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 :id="id"></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">
+      <button class="w-[68px] h-[48px]">
         <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>
@@ -20,6 +20,33 @@
 
 import { componentMixin } from '../mixin/component'
 
+const callbacks = []
+const initScript = (callback, id) => {
+
+  callbacks.push([ callback, id ])
+
+  let script = document.getElementById('youtube-iframe-api')
+  if(!script){
+    window.onYouTubeIframeAPIReady = () => {
+      while(callbacks.length > 0){
+        const [ callback, id ] = callbacks.pop()
+        callback()
+      }
+    }
+
+    const script = document.createElement('script')
+    script.src = 'https://www.youtube.com/iframe_api'
+    script.id = 'youtube-iframe-api'
+    document.head.appendChild(script)
+  }
+  else{
+    while(callbacks.length > 0){
+      const [ callback, id ] = callbacks.pop()
+      callback()
+    }
+  }
+}
+
 export default{
 
   mixins: [ componentMixin ],
@@ -29,7 +56,7 @@ export default{
     videoId: String,
 
     delay: {
-      type: Number,
+      type: [ Number, String ],
       default: 0
     },
 
@@ -62,16 +89,15 @@ export default{
   data(){
     return {
       ready: false,
-      player: null
+      player: null,
+      id: null
     }
   },
 
   mounted() {
-    window.onYouTubeIframeAPIReady = () => {
-      this.loadVideo()
-    }
+    this.id = this.uniqid()
 
-    if(parseInt(this.delay) > 0){
+    /*if(parseInt(this.delay) > 0){
       window.setTimeout(() => {
         if(!this.ready){
           this.loadVideo()
@@ -84,21 +110,16 @@ export default{
           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{
+      initScript(() => {
         if(!this.player){
-          this.player = new YT.Player('player', {
+          this.player = new YT.Player(this.id, {
             height: '100%',
             width: '100%',
             videoId: this.videoId,
@@ -116,7 +137,7 @@ export default{
         else{
           this.player.loadVideoById(this.videoId)
         }
-      }
+      }, this.id)
 
     }
 

package/src/mixin/component.js

@@ -46,7 +46,7 @@ export const componentMixin = {
 		columns: Array,
     direction: Array,
     gap: Array,
-    display: Array,
+    display: [ Array, String ],
 
     flexColumns: Array,
 

package/src/widgets/ContactForm.vue

@@ -153,7 +153,7 @@ export default{
 
     compStyle(){
       return {
-        'min-height': this.minHeight
+        'min-height': this.formHeight
       }
     }
 
@@ -164,7 +164,7 @@ export default{
 			form: {},
 			completed: false,
       state: 1,
-      minHeight: undefined,
+      formHeight: undefined,
 		}
 	},
 
@@ -174,7 +174,7 @@ export default{
 		}
 
     window.setTimeout(() => {
-      this.minHeight = this.$el.clientHeight + 'px'
+      this.formHeight = this.$el.clientHeight + 'px'
     }, 1000)
 	}