yks-element 1.0.0 → 1.0.315

package/packages/Video/src/index.vue

@@ -0,0 +1,352 @@
+<template>
+    <div class="multimedia__video">
+        <div
+            class="ks-stem__videos yks-flex h-center v-center"
+            :class="{ 'dialog-pause': playing }"
+        >
+            <video
+                :ref="videoId"
+                :width="width"
+                :height="height"
+                :src="src"
+                :poster="musicBgs"
+                playsinline
+                webkit-playsinline
+                preload="auto"
+                class="file__videos"
+                @timeupdate="durationUpdate"
+                @canplay="getDuration"
+            ></video>
+            <div v-if="!isInfinity" class="slider-video">
+                <i class="el-icon-video-pause video-icon_mini" @click.stop="handlePause"></i>
+                <Slider
+                    v-model="musicDuration"
+                    :max="musicAllDuration"
+                    height="2px"
+                    :show-tooltip="false"
+                    class="slider__value"
+                    @change="changeMusicDuration"
+                    @mousedown.native="isChange = true"
+                    @mouseup.native="isChange = false"
+                ></Slider>
+                <span class="slider__text video-icon_mini">{{ formatTime(musicAllDuration) }}</span>
+                <i
+                    v-if="fileType === '3'"
+                    class="el-icon-full-screen video-icon_mini"
+                    @click.stop="handleFullScreen"
+                ></i>
+            </div>
+            <div
+                v-if="!playing || isInfinity"
+                class="dialog-playing yks-flex h-center v-center"
+                @click.stop="handlePlaying"
+            >
+                <i :class="[`icon-recording ${playingIcon}`]"></i>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import videoBg from '../../icon/video-bg.png'
+import musicBg1 from '../../icon/music-bg.png'
+import { Slider } from 'element-ui'
+import { formatTimeMin } from '../../assets/utils/index'
+export default {
+    name: 'YksVideo',
+    components: {
+        Slider
+    },
+    props: {
+        src: { type: String, require: true },
+        width: { type: Number, default: 160 },
+        height: { type: Number, default: 90 }
+    },
+    data() {
+        return {
+            /* 播放状态 */
+            playing: false,
+            /* 歌曲总时长 */
+            musicAllDuration: 0,
+            /* 歌曲当前时长 */
+            musicDuration: 0,
+            /* 判断是否被拖动 */
+            isChange: false,
+            /* 判断是否为Infinity */
+            isInfinity: false
+        }
+    },
+    computed: {
+        playingIcon() {
+            if (this.playing) {
+                return 'el-icon-video-pause'
+            } else {
+                return 'el-icon-video-play'
+            }
+        },
+        /* 播放背景图 */
+        musicBgs() {
+            if (this.fileType === '3') {
+                return videoBg
+            }
+            if (this.playing) {
+                return 'https://pub-static.yks365.net/assets/image/music-bg.gif'
+            } else {
+                return musicBg1
+            }
+        },
+        /* 获取文件后缀 */
+        fileNameType() {
+            const url = this.src
+            return url.substr(url.lastIndexOf('.') + 1).toLowerCase()
+        },
+        /* 获取文件类型 */
+        fileType() {
+            if (['mp3'].includes(this.fileNameType)) {
+                return '2'
+            }
+            if (['mp4'].includes(this.fileNameType)) {
+                return '3'
+            }
+            return false
+        },
+        /* 播放图标 */
+        iconName() {
+            if (!this.playing) {
+                return 'el-icon-video-play'
+            } else {
+                return 'el-icon-video-pause'
+            }
+        },
+        /* 组件key */
+        videoId() {
+            return `video${Date.now()}${(Math.random() * 1000).toFixed(0)}`
+        }
+    },
+    created() {
+        /* 监听播放状态 */
+        this.$nextTick(() => {
+            if (this.fileType === '2' || this.fileType === '3') {
+                const video = this.$refs[this.videoId]
+                video.addEventListener('play', () => {
+                    this.playing = true
+                })
+                video.addEventListener('pause', () => {
+                    this.playing = false
+                })
+            }
+        })
+    },
+    methods: {
+        handleFullScreen() {
+            const video = this.$refs[this.videoId]
+            const requestMethod =
+                video.requestFullScreen ||
+                video.webkitRequestFullScreen ||
+                video.mozRequestFullScreen ||
+                video.msRequestFullScreen
+            if (requestMethod) {
+                requestMethod.call(video)
+            } else if (typeof window.ActiveXObject !== 'undefined') {
+                // eslint-disable-next-line no-undef
+                const wscript = new ActiveXObject('WScript.Shell')
+                if (wscript !== null) {
+                    wscript.SendKeys('{F11}')
+                }
+            }
+        },
+        /* 进度时间转换 */
+        formatTime(time) {
+            return formatTimeMin(time)
+        },
+        /* 进度条时间定位 */
+        changeMusicDuration() {
+            if (this.musicAllDuration !== 0) {
+                const video = this.$refs[this.videoId]
+                video.currentTime = this.musicDuration
+            }
+        },
+        /* 获取音视频时长 */
+        getDuration() {
+            const video = this.$refs[this.videoId]
+            console.log(video.duration)
+
+            if (!Number.isFinite(video.duration)) {
+                this.musicAllDuration = 300
+                this.isInfinity = true
+            } else {
+                this.isInfinity = false
+                this.musicAllDuration = video.duration
+            }
+        },
+        /* 获取音视频播放当前时间 */
+        durationUpdate() {
+            if (!this.isChange) {
+                const video = this.$refs[this.videoId]
+                this.musicDuration = video.currentTime
+            }
+        },
+        /* 播放 */
+        handlePlaying() {
+            if (!this.playing) {
+                this.$refs[this.videoId].play()
+            } else {
+                this.handlePause()
+            }
+        },
+        /* 暂停 */
+        handlePause() {
+            if (this.playing) {
+                this.$refs[this.videoId].pause()
+            }
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.multimedia__video {
+    position: relative;
+    margin-right: 10px;
+
+    .slider-video {
+        position: absolute;
+        width: 100%;
+        left: 0;
+        bottom: 2px;
+        display: flex;
+        align-items: center;
+
+        .video-icon_mini {
+            font-size: 13px !important;
+            cursor: pointer;
+            color: #ffffff;
+            margin-left: 5px;
+            margin-right: 5px;
+        }
+
+        .el-icon-video-pause {
+            cursor: pointer;
+            color: #ffffff;
+            margin-left: 5px;
+            margin-right: 5px;
+        }
+        .slider__value {
+            flex: 1;
+            margin: 0 5px;
+        }
+        .slider__text {
+            color: #fff;
+            font-size: 12px;
+            transform: scale(0.7);
+        }
+        ::v-deep {
+            .el-slider__runway {
+                margin: 0;
+            }
+            .el-slider__runway {
+                height: 1px;
+                background-color: #ffffff;
+                border-radius: 1px;
+            }
+            .el-slider__bar {
+                height: 1px;
+                background-color: transparent;
+                border-radius: 1px;
+            }
+            .el-slider__button-wrapper {
+                height: 31px;
+                width: 13px;
+            }
+            .el-slider__button {
+                height: 5px;
+                width: 5px;
+                background: #ffffff;
+                border: unset;
+            }
+        }
+    }
+
+    .file-stem {
+        position: relative;
+        width: 80px;
+        margin: 0 auto;
+    }
+
+    &:hover {
+        .media-delfile,
+        .media-delvideo {
+            opacity: 1 !important;
+        }
+
+        .dialog-pause {
+            .slider-video {
+                opacity: 1 !important;
+            }
+        }
+    }
+    .media-delfile,
+    .media-delvideo {
+        color: red;
+        position: absolute;
+        opacity: 0;
+        right: -3px;
+        top: -3px;
+        background: #fff;
+        border-radius: 50%;
+        cursor: pointer;
+        transition: 0.3s opacity;
+        -webkit-transition: 0.3s opacity;
+    }
+    .media-delvideo {
+        top: -5px;
+        right: -5px;
+    }
+
+    .ks-stem__itemattrs {
+        border-radius: 4px;
+        position: relative;
+        .ks-stem__icon {
+            width: 77px;
+            height: 77px;
+            margin-bottom: 9px;
+            cursor: pointer;
+        }
+    }
+    .ks-stem__content {
+        width: 160px;
+        font-size: 12px;
+        text-align: center;
+        padding-top: 5px;
+        color: #000;
+    }
+
+    .ks-stem__videos {
+        border-radius: 4px;
+        position: relative;
+        .file__videos {
+            background: #000000;
+        }
+    }
+
+    .dialog-playing {
+        margin: 0 auto;
+        width: 50px;
+        height: 50px;
+        cursor: pointer;
+        position: absolute;
+
+        &:hover {
+            opacity: 0.7;
+        }
+        .icon-recording {
+            color: #fff;
+            font-size: 30px !important;
+        }
+    }
+
+    .slider-video {
+        opacity: 0;
+        transition: 0.3s opacity;
+        -webkit-transition: 0.3s opacity;
+    }
+}
+</style>

package/packages/assets/utils/index.js

@@ -0,0 +1,83 @@
+
+/**
+ * @param {string} time
+ * @returns {string}
+ */
+export function formatTime(time) {
+    if (!time) {
+        return '00:00:00'
+    }
+    const value = parseInt(time, 10)
+    let HH
+    let MM
+    let SS
+    switch (true) {
+        case value < 60:
+            if (value < 10) {
+                SS = '0' + value
+            } else {
+                SS = value
+            }
+            return `00:00:${SS}`
+        case value >= 60 && value < 3600:
+            MM = parseInt((value / 60).toString(), 10)
+            SS = parseInt((value % 60).toString(), 10)
+            if (MM < 10) {
+                MM = '0' + MM
+            }
+            if (SS < 10) {
+                SS = '0' + SS
+            }
+            return `00:${MM}:${SS}`
+        case value >= 3600:
+            HH = parseInt((value / 3600).toString(), 10)
+            MM = parseInt((value / 60).toString(), 10) - HH * 60
+            SS = parseInt((value % 60).toString(), 10)
+            if (SS < 10) {
+                SS = '0' + SS
+            }
+            if (MM < 10) {
+                MM = '0' + MM
+            }
+            if (SS < 10) {
+                SS = '0' + SS
+            }
+            return `${HH}:${MM}:${SS}`
+        default:
+            throw new Error('Val data is abnormal, please check the data!')
+    }
+}
+
+/**
+ * @param {string} time
+ * @returns {string}
+ */
+export function formatTimeMin(time) {
+    if (!time) {
+        return '00:00'
+    }
+    const value = parseInt(time, 10)
+    let MM
+    let SS
+    switch (true) {
+        case value < 60:
+            if (value < 10) {
+                SS = '0' + value
+            } else {
+                SS = value
+            }
+            return `00:${SS}`
+        case value >= 60:
+            MM = parseInt((value / 60).toString(), 10)
+            SS = parseInt((value % 60).toString(), 10)
+            if (MM < 10) {
+                MM = '0' + MM
+            }
+            if (SS < 10) {
+                SS = '0' + SS
+            }
+            return `${MM}:${SS}`
+        default:
+            throw new Error('Val data is abnormal, please check the data!')
+    }
+}