@mixd-id/web-scaffold 0.1.230406370 → 0.1.230406372

package/package.json

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

package/src/components/Video.vue

@@ -0,0 +1,119 @@
+<template>
+  <div :class="$style.comp"
+       @click="onClick">
+    <video v-if="actualSrc" ref="video"
+           @ended="playing = false">
+      <source :src="actualSrc" type="video/mp4">
+    </video>
+
+    <slot v-else name="empty" :instance="this"></slot>
+
+    <div v-if="!playing && actualSrc" :class="$style.play">
+      <button type="button" @click.stop="play" class="w-[36px] h-[36px] flex items-center justify-center rounded-full bg-white/30">
+        <svg width="21" height="21" class="fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M176 480C148.6 480 128 457.6 128 432v-352c0-25.38 20.4-47.98 48.01-47.98c8.686 0 17.35 2.352 25.02 7.031l288 176C503.3 223.8 512 239.3 512 256s-8.703 32.23-22.97 40.95l-288 176C193.4 477.6 184.7 480 176 480z"/></svg>
+      </button>
+    </div>
+
+    <input v-if="Boolean(editable)" class="hidden" type="file" accept="video/*" ref="file" @change="onChange"/>
+  </div>
+</template>
+
+<script>
+
+export default{
+
+  emits: [ 'click', 'change' ],
+
+  props: {
+
+    editable:{
+      type: [ Boolean, String ],
+      default: false
+    },
+
+    src: undefined,
+
+  },
+
+  data(){
+    return {
+      actualSrc: null,
+      playing: false,
+    }
+  },
+
+  methods: {
+
+    edit(){
+      if(this.$refs.file){
+        this.$refs.file.click()
+      }
+    },
+
+    onChange(e){
+      if(e.target.files.length > 0){
+        var reader = new FileReader();
+        reader.addEventListener('load', () => {
+          this.$emit('change', reader.result, e.target.files[0])
+          this.$refs.file.value = null
+        }, false)
+        reader.readAsDataURL(e.target.files[0]);
+      }
+    },
+
+    onClick(e){
+      if(this.playing){
+        this.$refs.video.pause()
+        this.playing = false
+      }
+      else{
+        this.$emit('click', e, this)
+      }
+    },
+
+    play(){
+      this.$refs.video.play()
+      this.playing = true
+    }
+
+  },
+
+  watch: {
+
+    src: {
+      immediate: true,
+      handler(to){
+        if(to instanceof File){
+          var reader = new FileReader();
+          reader.addEventListener('load', () => {
+            this.actualSrc = reader.result
+          }, false)
+          reader.readAsDataURL(to);
+        }
+        else{
+          this.actualSrc = to
+          //this.actualSrc = 'https://www.kliknss.co.id/images/big_buck_bunny_240p_1mb.mp4'
+        }
+      }
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex-1 flex items-center justify-center relative overflow-hidden;
+}
+
+.play{
+  @apply absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+</style>

package/src/components/VirtualGrid.vue

@@ -258,7 +258,7 @@ export default{
       }
 
       this.scrollerCache = {
-        id: this.items[this.visibleStartIndex].id,
+        id: this.items[this.visibleStartIndex]?.id,
         index: this.visibleStartIndex
       }
     },

package/src/components/VirtualTable.vue

@@ -614,7 +614,7 @@ export default{
       }
 
       this.scrollerCache = {
-        id: this.items[this.visibleStartIndex].id,
+        id: this.items[this.visibleStartIndex]?.id,
         index: this.visibleStartIndex
       }
     },

package/src/index.js

@@ -533,6 +533,7 @@ export default{
     app.component('IconMenu2', defineAsyncComponent(() => import("./components/IconMenu2.vue")))
     app.component('IconPlus', defineAsyncComponent(() => import("./components/IconPlus.vue")))
     app.component('Image', defineAsyncComponent(() => import("./components/Image.vue")))
+    app.component('Video', defineAsyncComponent(() => import("./components/Video.vue")))
     app.component('Image360', defineAsyncComponent(() => import("./components/Image360.vue")))
     app.component('ImagePreview', defineAsyncComponent(() => import("./components/ImagePreview.vue")))
     app.component('ImageFullScreen', defineAsyncComponent(() => import("./components/ImageFullScreen.vue")))