eztech-core-components 1.0.0

package/comps/CoreUploadImage.vue

@@ -0,0 +1,542 @@
+<template>
+  <div class="flex flex-col items-center justify-center w-full">
+    <div v-if="isInline" class="w-full h-14 relative">
+      <div v-if="uploadingImages.some(c => !c.success && !c.deleted)" class="text-coreSecondaryText text-xs w-full text-left">
+        <i class="el-icon-close cursor-pointer hover:text-blue-500" @click="handleCancelUpload()" />
+        {{ uploadingImages.find(c => !c.success && !c.deleted)?.errorMessage || uploadingImages.find(c => !c.success && !c.deleted)?.message }}
+      </div>
+      <div v-else-if="value">
+        <img
+          v-if="fileType === 'image'"
+          :src="`/api${permittedPath}/${value?._id}?tid=${value?.tid}`"
+          class="h-full w-full rounded object-cover object-top cursor-zoom-in"
+          @click="currentFullImage = (value?._id || value)"
+        >
+        <a v-else :href="`/api${permittedPath}/${value?._id}?tid=${value?._id}`" target="_blank">
+          {{ value?.originalname || `/api${permittedPath}/${value?._id}` }} <span class="text-xs font-bold">{{ formatFileSize(value?.size) }}</span>
+        </a>
+      </div>
+      <el-button
+        v-else
+        type="text"
+        :loading="uploadingImages.some(c => !c.success && !c.deleted)"
+        :disabled="disabled"
+        @click="handleShow"
+      >
+        <div class="flex flex-col">
+          <i class="el-icon-upload" />
+          <div>Хуулах</div>
+        </div>
+      </el-button>
+      <div v-if="value && !disabled" class="absolute top-0 right-0 text-red-500 px-1 cursor-pointer" @click="handleRemoveImage(value)">
+        <i class="el-icon-close" />
+      </div>
+    </div>
+    <div
+      v-else-if="fileType === 'profileImage'"
+      class="h-[200px] w-[180px] rounded border flex items-center justify-center relative bg-coreBgInput"
+    >
+      <img
+        v-if="value"
+        :src="`/api${permittedPath}/${value?._id}?tid=${value?.tid}`"
+        class="h-full w-full rounded object-cover object-center cursor-zoom-in"
+        @click="currentFullImage = value"
+      >
+      <el-button
+        v-else
+        type="text"
+        :loading="uploadingImages.some(c => !c.success && !c.deleted)"
+        icon="el-icon-upload"
+        :disabled="disabled"
+        @click="handleShow"
+      >
+        Хуулах
+      </el-button>
+      <el-button
+        v-if="value && !disabled"
+        plain
+        circle
+        size="mini"
+        icon="el-icon-close"
+        class="absolute -top-2 -right-2"
+        @click="handleRemoveImage(value)"
+      />
+    </div>
+    <Container v-else class="flex flex-col gap-2 w-full" drag-handle-selector=".column-drag-handle" @drop="onDrop">
+      <Draggable
+        v-for="(image, index) in images"
+        :key="image._id + '' + index"
+      >
+        <div class="flex flex-row items-center justify-center gap-2 rounded border image-rounded">
+          <img
+            v-if="['image', 'icon'].includes(fileType)"
+            class="w-20 h-20 object-contain max-h-full max-w-full border-r rounded-l image-rounded-l cursor-zoom-in"
+            :src="`/api${permittedPath}/${image._id}?tid=${image.tid}`"
+            @click="currentFullImage = image"
+          >
+          <div class="flex-1 flex flex-row items-center overflow-hidden text-sm">
+            <div class="column-drag-handle text-lg p-3">
+              <i class="el-icon-s-fold" />
+            </div>
+            <a
+              class="hover:underline"
+              :href="`/api${permittedPath}/${image._id}?tid=${image.tid}`"
+              target="_blank"
+            >
+              {{ image.originalname }}
+              <!-- {{ `/api${permittedPath}/` + image }} -->
+            </a>
+          </div>
+          <div class="pr-2">
+            <el-button
+              type="danger"
+              plain
+              circle
+              size="mini"
+              icon="el-icon-close"
+              @click="handleRemoveImage(image)"
+            />
+          </div>
+        </div>
+      </Draggable>
+      <div
+        v-for="(image, index) in uploadingImages.filter(c => !c.success && !c.deleted)"
+        :key="'upload image' + index.toString()"
+        class="flex flex-row items-center gap-2 rounded border image-rounded"
+      >
+        <img
+          v-if="['image', 'icon'].includes(fileType)"
+          :src="image.url"
+          class="object-contain w-20 h-20 border-r rounded-l image-rounded-l"
+        >
+        <div class="flex-1 overflow-hidden text-sm">
+          <div v-if="image.loading" class="flex-1 flex flex-row items-center">
+            <div class="text-lg p-3">
+              <i :class="'el-icon-loading'" />
+            </div>
+            <div>
+              <div>
+                Серверт хуулж байна..
+              </div>
+              <div class="text-xs text-coreSecondaryText">
+                {{ image.message }}
+              </div>
+            </div>
+          </div>
+          <div v-else-if="image.errorMessage" class="text-red-700 flex-1 flex flex-row items-center">
+            <div class="text-lg p-3 ">
+              <i :class="'el-icon-warning-outline'" />
+            </div>{{ image.errorMessage }}
+          </div>
+          <div v-else class="flex-1 flex flex-row items-center">
+            <div class="text-lg p-3">
+              <i :class="'el-icon-warning-outline'" />
+            </div>
+            Хүлээж байна..
+          </div>
+        </div>
+        <div class="pr-2">
+          <el-button
+            type="danger"
+            plain
+            circle
+            size="mini"
+            icon="el-icon-close"
+            @click="image.deleted = true"
+          />
+        </div>
+      </div>
+      <div
+        v-if="!disabled && ((images.length === 0 && uploadingImages.filter(c => !c.deleted && !c.success).length === 0) || isMultiple)"
+        :class="'h-10 rounded text-gray-400 hover:text-gray-700 flex items-center justify-center cursor-pointer bg-coreBgInput border group-[.is-error]:border-red-400 image-rounded'"
+        @click="handleShow"
+      >
+        <div class="text-lg p-3 ">
+          <i class="el-icon-upload text-gray-500" />
+        </div>
+        {{ textUpload }}
+      </div>
+    </Container>
+    <input
+      id="image"
+      ref="image"
+      class="hidden"
+      type="file"
+      name="files"
+      :accept="accept"
+      :multiple="isMultiple"
+      @change="handleFiles"
+    >
+    <transition name="el-fade-in-linear">
+      <div v-if="currentFullImage" class="fixed h-screen w-screen bg-black z-50 left-0 top-0 flex flex-row">
+        <div class="flex-1 flex items-center justify-center relative">
+          <img
+            :src="`/api${permittedPath}/${currentFullImage._id}?tid=${currentFullImage.tid}`"
+            class="object-contain border rounded max-h-screen"
+          >
+          <div class="absolute top-3 right-3">
+            <el-button icon="el-icon-close" circle @click="currentFullImage = null" />
+          </div>
+        </div>
+        <div v-if="images.length > 1" class="w-40 bg-white flex flex-col gap-2 items-center py-2 overflow-y-auto h-full">
+          <img
+            v-for="image in images"
+            :key="image"
+            :src="`/api${permittedPath}/${image._id}?tid=${image.tid}`"
+            :class="['w-36 h-36 object-contain border rounded cursor-zoom-in', { 'border-black border-2': currentFullImage?._id === image?._id }]"
+            @click="currentFullImage = image"
+          >
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import { Container, Draggable } from 'vue-smooth-dnd'
+// import axios from 'axios'
+import { applyDrag } from '../utils/helpers'
+import { getFormBoolean } from '../utils/data-helper'
+const dataURItoBlob = (dataURI, name) => {
+  const bytes = dataURI.split(',')[0].includes('base64')
+    ? atob(dataURI.split(',')[1])
+    : unescape(dataURI.split(',')[1])
+  const mime = dataURI.split(',')[0].split(':')[1].split(';')[0]
+  const max = bytes.length
+  const ia = new Uint8Array(max)
+  for (let i = 0; i < max; i += 1) { ia[i] = bytes.charCodeAt(i) }
+  return new File([ia], name, { type: mime })
+}
+const resizeImage = ({ file, maxSize }) => {
+  const reader = new FileReader()
+  const image = new Image()
+  const canvas = document.createElement('canvas')
+  const resize = () => {
+    let { width, height } = image
+    if (width > height) {
+      if (width > maxSize) {
+        height *= maxSize / width
+        width = maxSize
+      }
+    } else if (height > maxSize) {
+      width *= maxSize / height
+      height = maxSize
+    }
+    canvas.width = width
+    canvas.height = height
+    canvas.getContext('2d').drawImage(image, 0, 0, width, height)
+    const dataUrl = canvas.toDataURL('image/jpeg')
+    return dataURItoBlob(dataUrl, file.name)
+  }
+  return new Promise((ok, no) => {
+    if (!file.type.match(/image.*/)) {
+      no(new Error('Not an image'))
+      return
+    }
+    reader.onload = (readerEvent) => {
+      image.onload = () => ok({
+        resizedImage: resize(),
+        width: image.width,
+        height: image.height
+      })
+      image.src = readerEvent.target.result
+    }
+    reader.readAsDataURL(file)
+  })
+}
+export default {
+  name: 'CoreUploadImage',
+  components: { Container, Draggable },
+  props: {
+    value: {
+      type: [String, Object],
+      default: null
+    },
+    fileType: {
+      type: String,
+      default: 'image'
+    },
+    col_multiple: {
+      type: Boolean,
+      default: false
+    },
+    minSize: {
+      type: Number,
+      default: 1024
+    },
+    maxSize: {
+      type: Number,
+      default: 3000000000
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    isInline: {
+      type: Boolean,
+      default: false
+    },
+    fileRoute: { type: String, default: '' },
+    isFileSecret: { type: Boolean, default: true },
+    rootApiId: { type: String, default: null },
+    rootTempId: { type: String, default: null }
+  },
+  data () {
+    return {
+      uploadingImage: null,
+      uploadingImages: [],
+      currentFullImage: null,
+      interval: 0,
+      cropVisible: false,
+      cropImgSrc: '',
+      cropName: '',
+      cropMime: '',
+      cancel: null,
+      unsupportedImageTypes: ['image/heic']
+    }
+  },
+  computed: {
+    ...mapGetters('settings', ['env']),
+    ...mapGetters('user', ['token']),
+    isMultiple () {
+      return getFormBoolean(this.col_multiple)
+    },
+    textUpload () {
+      if (['file'].includes(this.fileType)) {
+        return 'Файл сонгох..'
+      } else {
+        return 'Зураг сонгох..'
+      }
+    },
+    accept () {
+      if (['file'].includes(this.fileType)) {
+        return '*/*'
+      } else {
+        return 'image/*'
+      }
+    },
+    images: {
+      get () {
+        if (this.value && typeof this.value === 'object') {
+          return [this.value]
+        }
+        if (!this.value) {
+          return []
+        }
+        return this.value.split(',')
+      },
+      set (val) {
+        this.$emit('input', val.join(','))
+      }
+    },
+    showCurrentImage () {
+      return !!this.currentFullImage
+    },
+    permittedPath () {
+      return this.isFileSecret ? `/file/permitted/${this.rootApiId}/${this.rootTempId}` : (this.env.fileRoutePath + this.fileRoute)
+    }
+  },
+  watch: {
+    showCurrentImage (val) {
+      if (val) {
+        window.addEventListener('keydown', this.handleChangeImage)
+      } else {
+        window.removeEventListener('keydown', this.handleChangeImage)
+      }
+    }
+  },
+  mounted () {
+    this.interval = setInterval(this.handleUpload, 500)
+  },
+  destroyed () {
+    if (this.interval) {
+      clearInterval(this.interval)
+    }
+  },
+  methods: {
+    handleChangeImage (e) {
+      e.preventDefault()
+      if (!this.currentFullImage) {
+        return
+      }
+      if ([39, 40].includes(e.keyCode)) {
+        this.handleCurrentNext()
+      } else if ([37, 38].includes(e.keyCode)) {
+        this.handleCurrentPrev()
+      }
+    },
+    handleCurrentNext () {
+      const index = this.images.indexOf(this.currentFullImage)
+      if (index + 1 < this.images.length) {
+        this.currentFullImage = this.images[index + 1]
+      }
+    },
+    handleCurrentPrev () {
+      const index = this.images.indexOf(this.currentFullImage)
+      if (index > 0) {
+        this.currentFullImage = this.images[index - 1]
+      }
+    },
+    onDrop (e) {
+      this.images = applyDrag(this.images, e)
+    },
+    handleShow () {
+      this.$refs.image.click()
+    },
+    handleRemoveImage (image) {
+      this.$emit('input', this.images.filter(c => c !== image).join(','))
+    },
+    handleCrop (e) {
+      const errorMessage = ''
+      const that = this
+      fetch(e).then(res => res.blob()).then((blob) => {
+        const file = new File([blob], that.cropName, { type: that.cropMime })
+        this.uploadingImages.push({
+          message: '',
+          startDate: null,
+          errorMessage,
+          success: false,
+          loading: false,
+          deleted: false,
+          file,
+          url: e
+        })
+        this.cropVisible = false
+      })
+    },
+    formatFileSize (sizeInBytes) {
+      if (sizeInBytes < 1000) {
+        return `${sizeInBytes}b`
+      } else if (sizeInBytes < 1000 * 1000) {
+        return `${(sizeInBytes / 1000).toFixed(2)}Kb`
+      } else if (sizeInBytes < 1000 * 1000 * 1000) {
+        return `${(sizeInBytes / (1000 * 1000)).toFixed(2)}Mb`
+      } else {
+        return `${(sizeInBytes / (1000 * 1000 * 1000)).toFixed(2)}Gb`
+      }
+    },
+    async handleFiles (e) {
+      const files = e.files || e.target.files || e.dataTransfer.files
+      for (const file of files) {
+        let errorMessage = ''
+        let resizedUrl = URL.createObjectURL(file)
+        let resizedFile = file
+        let width = 0
+        let height = 0
+        if (file.type.startsWith('image/')) {
+          if (!this.unsupportedImageTypes.includes(file.type)) {
+            const reader = new FileReader()
+            reader.onload = (e) => { this.originalImg = e.target.result }
+            reader.readAsDataURL(file)
+            const data1 = await resizeImage({ file, maxSize: 1200 })
+            resizedUrl = URL.createObjectURL(data1.resizedImage)
+            resizedFile = data1.resizedImage
+            width = data1.width
+            height = data1.height
+          }
+        } else if (this.maxSize < file.size) {
+          errorMessage = `Файлын хэмжээ их байна. Allowed max size: ${parseInt(this.maxSize / 1000 / 1000)}mb.`
+        }
+        this.uploadingImages.push({
+          message: '',
+          startDate: null,
+          errorMessage,
+          success: false,
+          loading: false,
+          deleted: false,
+          size: resizedFile.size,
+          file: resizedFile,
+          url: resizedUrl,
+          width,
+          height
+        })
+      }
+    },
+    handleCancelUpload () {
+      if (this.cancel) {
+        this.cancel()
+      }
+      const findIndex = this.uploadingImages.findIndex(c => !c.success && !c.deleted)
+      this.uploadingImages.splice(findIndex, 1)
+    },
+    async handleUpload () {
+      if (this.uploadingImages.some(c => c.loading)) {
+        return
+      }
+      const file = this.uploadingImages.find(c => !c.success && !c.deleted && !c.errorMessage)
+      if (!file) {
+        return
+      }
+      try {
+        file.loading = true
+        const formData = new FormData()
+        formData.append('file', file.file)
+        formData.append('width', file.width)
+        formData.append('height', file.height)
+        formData.append('is_secret', this.isFileSecret)
+        // const headers = {
+        //   'Content-Type': 'multipart/form-data'
+        // }
+        // if (this.token) {
+        //   headers.Authorization = `Bearer ${this.token}`
+        // }
+        // const instance = axios.create({
+        //   baseURL: this.env.baseUrl,
+        //   headers,
+        //   withCredentials: true
+        // })
+        file.startDate = new Date()
+        const CancelToken = this.$axios.CancelToken
+        const that = this
+        const config = {
+          cancelToken: new CancelToken(function executor (c) {
+            that.cancel = c
+          }),
+          onUploadProgress: (progressEvent) => {
+            if (!file || !file.size || !file.startDate) { return }
+            // Calculate the upload percentage
+            const percent = Math.min(100, parseInt((progressEvent.loaded / file.size) * 1000) / 10)
+            // Calculate elapsed time in milliseconds
+            const diff = this.$moment().diff(file.startDate, 'seconds', true)
+            if (diff <= 0) { return }
+            // Estimate remaining time
+            const left = (100 * diff / percent - diff)
+            // Calculate upload speed in bits per second
+            const speedSecond = progressEvent.loaded / diff
+            // Format remaining time
+            const dur = this.$moment.duration(left * 1000)
+            const lefts = []
+            if (dur.hours() > 0) { lefts.push(`${dur.hours()}h`) }
+            if (dur.minutes() > 0) { lefts.push(`${dur.minutes()}m`) }
+            if (dur.seconds() > 0) { lefts.push(`${dur.seconds()}s`) }
+            if (percent <= 0) {
+              lefts.push('-')
+            } else if (lefts.length === 0) {
+              lefts.push('0s')
+            }
+            const speedStr = this.formatFileSize(speedSecond) + 'ps'
+            file.message = `Size: ${this.formatFileSize(file.size)}, ${percent}%, Left: ${lefts.join(':')}, Speed: ${speedStr}`
+          }
+        }
+        let uploadUrl = 'file/upload'
+        if (this.unsupportedImageTypes.includes(file.file.type)) {
+          uploadUrl = 'file/upload/image'
+        }
+        // const { data } = await instance.post(uploadUrl, formData, config)
+        const { data } = await this.$axios.post(uploadUrl, formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          },
+          withCredentials: true
+        }, config)
+        this.$emit('input', data)
+        file.success = true
+      } catch (err) {
+        file.errorMessage = (err.response?.status || err.status || '') + ' ' + (err.response?.data?.message || err.response?.message || err.message)
+      } finally {
+        file.loading = false
+      }
+    }
+  }
+}
+</script>

package/comps/CoreVideo.vue

@@ -0,0 +1,44 @@
+<template>
+  <video ref="videoJsPlayer" class="video-js vjs-defaultskin vjs-16-9" playsinline crossorigin="anonymous" />
+</template>
+<script>
+import videojs from 'video.js'
+import 'video.js/dist/video-js.min.css'
+export default {
+  props: {
+    videoId: { type: Object, default: () => { return null } }
+  },
+  computed: {
+    videoOptions () {
+      const options = {
+        controls: true,
+        autoplay: true,
+        preload: 'auto',
+        fluid: true, // Makes the player responsive
+        html5: {
+          hls: { overrideNative: false }
+        },
+        hls: { overrideNative: false },
+        techOrder: ['html5'],
+        sources: [{
+          src: '/api/file/' + this.videoId._id,
+          type: this.videoId.mimetype
+        }]
+      }
+      return options
+    }
+  },
+  mounted () {
+    this.handleRefresh()
+  },
+  methods: {
+    handleRefresh () {
+      videojs.log.level('debug')
+      this.player = videojs(this.$refs.videoJsPlayer, { ...this.videoOptions }, () => {
+        this.ready = true
+        this.player.log('video player ready')
+      })
+    }
+  }
+}
+</script>