emacroh5lib 1.0.38 → 1.0.41

package/src/views/VideoViewer/index.vue

@@ -0,0 +1,443 @@
+<template>
+    <div class="duo-viewer" v-if="show" ref="duoViewer" @click="clickAgent">
+        <div class="duo-viewer-mask">
+            <video :width="width" :height="height" :src="realSrc" type="video/mp4" class="duo-viewer-mask__image"
+                controls="controls" autoplay="autoplay" loop="loop">
+                您的浏览器不支持 HTML5 video 标签。
+            </video>
+        </div>
+        <div class="duo-viewer-footer" v-if="showThumbnail">
+            <div class="duo-viewer-footer__title">{{ realName }}</div>
+            <div class="duo-viewer-footer__toolbar">
+                <ul>
+                    <li class="duo-viewer-footer__zoom-in" data-viewer-action="zoom-in"></li>
+                    <li class="duo-viewer-footer__zoom-out" data-viewer-action="zoom-out"></li>
+                    <li class="duo-viewer-footer__one-to-one" data-viewer-action="one-to-one"></li>
+                    <li class="duo-viewer-footer__prev" data-viewer-action="prev"></li>
+
+                    <li class="duo-viewer-footer__play" data-viewer-action="play"></li>
+
+                    <li class="duo-viewer-footer__next" data-viewer-action="next"></li>
+                    <li class="duo-viewer-footer__reset" data-viewer-action="reset"></li>
+                    <li class="duo-viewer-footer__rotate-left" data-viewer-action="rotate-left"></li>
+                    <li class="duo-viewer-footer__rotate-right" data-viewer-action="rotate-right"></li>
+                </ul>
+            </div>
+            <div class="duo-viewer-footer__navbar">
+                <div class="duo-viewer-footer__navbar-thumbnail-wrap">
+                    <div ref="duoViewerImageThumbnailList" class="duo-viewer-footer__navbar-thumbnail-list"
+                        :style="{ width: `${listLength * 34}px` }">
+                        <div :key="item + i" v-for="(item, i) in list" :class="
+                  i === index
+                    ? 'duo-viewer-footer__navbar-thumbnail-item viewer-current'
+                    : 'duo-viewer-footer__navbar-thumbnail-item'
+                ">
+                            <img data-viewer-action="select" :data-viewer-action-index="i" :src="getVideoImg(item, i)"
+                                :alt="alt" class="duo-viewer-footer__navbar-thumbnail-image" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="duo-viewer-close" @click="handleClose">
+            <div class="duo-viewer-close__off"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+    import { EMacro } from "../../utilities/File";
+
+    export default {
+        name: "ImageViewer",
+        data() {
+            return {
+                viewerSrc: "",
+                image: null,
+                listDataCache: [],
+                index: 0,
+                imgUrl: "",
+                isCreatePoster: false
+            };
+        },
+        props: {
+            // Image src list
+            list: {
+                type: Array,
+                default: [],
+            },
+            // Control is show of viewer
+            show: {
+                type: Boolean,
+                default: false,
+            },
+            // Default index
+            currentIndex: {
+                type: Number,
+                default: 0,
+            },
+            name: {
+                type: [String, Array],
+                default: null,
+            },
+            width: {
+                type: String,
+                default: null,
+            },
+            height: {
+                type: String,
+                default: null,
+            },
+            imgList: {
+                type: [String, Array],
+                default: null,
+            },
+            showThumbnail: {
+                type: Boolean,
+                default: false,
+            }
+        },
+        computed: {
+            listLength() {
+                return this.list.length;
+            },
+            realSrc() {
+                if (this.width === null && this.height === null) {
+                    EMacro.getVideoScale(this.list[this.index]).then(info => {
+                        this.width = info[0]
+                        this.height = info[1]
+                    });
+                }
+                return this.list[this.index];
+            },
+            realName() {
+                if (this.name == null) {
+                    return this.list[this.index];
+                } else if (typeof this.name == "string") {
+                    return this.name
+                } else if (Array.isArray(this.name)) {
+                    return this.name[this.index];
+                } else {
+                    return "未命名"
+                }
+            },
+            currentData() {
+                return this.listDataCache[this.index];
+            },
+        },
+        watch: {
+            show(val) {
+                if (val) {
+
+                    if (this.imgList === null && this.showThumbnail) {
+                        this.imgList = new Array();
+                        this.isCreatePoster = true
+                    }
+                    for (let i = 0; i < this.list.length; i++) {
+                        this.createVideoImg(this.list[i], i);
+                    }
+                    this.$emit("open");
+                    this.index = this.currentIndex;
+                    this.init();
+                } else {
+                    this.$emit("close");
+                }
+            },
+        },
+        mounted() {
+
+        },
+        methods: {
+            getVideoImg(url, i) {
+
+                if (this.imgList !== null && typeof this.imgList == "string") {
+                    return this.imgList
+                } else if (this.imgList !== null && Array.isArray(this.imgList)) {
+                    return this.imgList[i]
+                } else {
+                    return ""
+                }
+            },
+            async createVideoImg(url, i) {
+                if (!this.isCreatePoster) {
+                    return
+                }
+                const base64 = await EMacro.getVideoBase64(url)
+                this.imgList.push(base64)
+            },
+            // Global init
+            init() {
+                //   this.initMouseWheel();
+                this.keydown();
+            },
+
+            // Reset Rotate
+            resetRotate() {
+                let image = this.image,
+                    oldTransform = this.getCurrentTransform(image);
+
+                oldTransform.rotate = `0deg`;
+
+                this.setTransform(image, oldTransform);
+            },
+
+            // Reset zoom action
+            resetZoom() {
+                let image = this.image;
+                const imageObject = new Image();
+
+                imageObject.src = this.list[this.index];
+
+                const { width, height } = imageObject;
+
+                this.setStyleByName(image, "width", `${width}px`);
+                this.setStyleByName(image, "height", `${height}px`);
+
+                this.listDataCache[this.index].width = `${width}px`;
+                this.listDataCache[this.index].height = `${height}px`;
+            },
+
+            // Reset all action
+            resetAll() {
+                this.resetZoom();
+                this.resetRotate();
+                this.resetPosition();
+                this.initListDataCache(this.index);
+            },
+
+            // Rotate action
+            rotate(type) {
+                let image = this.image,
+                    oldTransform = this.getCurrentTransform(image),
+                    oldRotate = Math.round(
+                        Math.atan2(+oldTransform.skewY, +oldTransform.scaleX) *
+                        (180 / Math.PI)
+                    ),
+                    changeValue = type === "left" ? -90 : 90,
+                    rotateValue = oldRotate + changeValue;
+
+                oldTransform.rotate = `${rotateValue}deg`;
+
+                oldTransform.translateX = `${oldTransform.translateX}px`;
+                oldTransform.translateY = `${oldTransform.translateY}px`;
+                this.currentData.transform = oldTransform;
+                this.setTransform(image, oldTransform);
+            },
+
+            // Get style by name
+            getStyleByName(obj, type) {
+                return window.getComputedStyle(obj, null)[type];
+            },
+
+            // Set style by name
+            setStyleByName(obj, key, value) {
+                obj && (obj.style[key] = value);
+            },
+
+            // Get element current transform
+            getCurrentTransform(obj) {
+                let value,
+                    transform = this.getStyleByName(obj, "transform");
+
+                if (transform === "none") return;
+
+                value = transform.split("(")[1].split(")")[0].split(",");
+
+                return {
+                    scaleX: value[0].trim(),
+                    skewY: value[1].trim(),
+                    // skewX: value[2].trim(),
+                    // scaleY: value[3].trim(),
+                    translateX: value[4].trim(),
+                    translateY: value[5].trim(),
+                };
+            },
+            // Next or prev action
+            switchAction(a) {
+                let lastIndex = this.index;
+                switch (a) {
+                    case "prev":
+                        // prev action
+                        this.index += this.index <= 0 ? 0 : -1;
+                        break;
+                    case "next":
+                        // next action
+                        let srcListLength = this.listLength - 1;
+
+                        this.index +=
+                            this.index >= srcListLength ? srcListLength - this.index : 1;
+                        break;
+                    default:
+                        this.index = +a;
+                        break;
+                }
+                this.judgeThumbnailListMove(lastIndex, this.index);
+
+                // this.setStyleByName(this.image, "width", this.currentData.width);
+                // this.setStyleByName(this.image, "height", this.currentData.height);
+                // this.setStyleByName(this.image, "left", this.currentData.left);
+                // this.setStyleByName(this.image, "top", this.currentData.top);
+                // this.setTransform(this.image, this.currentData.transform);
+            },
+            // To judge thumbnail list move
+            judgeThumbnailListMove(lastIndex, index) {
+                if (lastIndex == index) return;
+
+                let translateX = 0,
+                    lastTransform = 0,
+                    step = index - lastIndex,
+                    move = step * 34,
+                    length = this.listLength,
+                    target = this.$refs["duoViewerImageThumbnailList"];
+
+                if (!target) return;
+
+                lastTransform = this.getCurrentTransform(target);
+
+                if (lastTransform) {
+                    translateX = Math.abs(+lastTransform.translateX);
+                }
+
+                this.setTransform(target, {
+                    scaleX: "1",
+                    skewY: "0",
+                    translateX: `-${translateX + move}px`,
+                    translateY: "0%",
+                    rotate: "0deg",
+                });
+            },
+            // Set element Transform
+            setTransform(obj, transformValue) {
+                let str = "";
+
+                str += `translateX(${transformValue["translateX"]}) `;
+                str += `translateY(${transformValue["translateY"]}) `;
+                transformValue["rotate"] &&
+                    (str += `rotate(${transformValue["rotate"]}) `);
+
+                this.setStyleByName(obj, "transform", str);
+            },
+
+            // FullScreen action
+            requestFullScreen() {
+                let element = this.$refs["duoViewer"],
+                    requestMethod =
+                        element.requestFullScreen ||
+                        element.webkitRequestFullScreen ||
+                        element.mozRequestFullScreen ||
+                        element.msRequestFullScreen;
+
+                if (requestMethod) {
+                    requestMethod.call(element);
+                } else if (typeof window.ActiveXObject !== "undefined") {
+                    // ie
+                    let wscript = new ActiveXObject("WScript.Shell");
+                    wscript !== null && wscript.SendKeys("{F11}");
+                }
+            },
+
+            // Keydown action
+            keydown() {
+                window.addEventListener("keydown", (e) => {
+                    e = event || window.event || arguments.callee.caller.arguments[0];
+
+                    if (e && e.keyCode == 40) {
+                        // down
+                        this.zoom("out");
+                    }
+                    if (e && e.keyCode == 37) {
+                        // left
+                        this.switchAction("prev");
+                    }
+                    if (e && e.keyCode == 39) {
+                        // right
+                        this.switchAction("next");
+                    }
+                    if (e && e.keyCode == 38) {
+                        // up
+                        this.zoom("in");
+                    }
+                    if (e && e.keyCode == 27) {
+                        // esc
+                        this.handleClose()
+                    }
+                });
+            },
+
+            // Init mouse wheel event
+            initMouseWheel() {
+                const scrollFn = (e) => {
+                    e = e || window.event;
+                    if (e.wheelDelta) {
+                        // for IE/Google
+                        if (e.wheelDelta > 0) {
+                            this.zoom("out");
+                        }
+                        if (e.wheelDelta < 0) {
+                            this.zoom("in");
+                        }
+                    } else if (e.detail) {
+                        // for Firefox
+                        if (e.detail > 0) {
+                            this.zoom("out");
+                        }
+                        if (e.detail < 0) {
+                            this.zoom("in");
+                        }
+                    }
+                };
+
+                document.addEventListener &&
+                    document.addEventListener("DOMMouseScroll", scrollFn, false);
+                window.onmousewheel = document.onmousewheel = scrollFn;
+            },
+
+            // Agent
+            clickAgent(e) {
+                switch (e.target.getAttribute("data-viewer-action")) {
+                    case "zoom-in":
+                        this.zoom("in");
+                        break;
+                    case "zoom-out":
+                        this.zoom("out");
+                        break;
+                    case "one-to-one":
+                        this.resetZoom();
+                        break;
+                    case "prev":
+                        this.switchAction("prev");
+                        break;
+                    case "play":
+                        this.requestFullScreen();
+                        break;
+                    case "next":
+                        this.switchAction("next");
+                        break;
+                    case "reset":
+                        this.resetAll();
+                        break;
+                    case "select":
+                        this.switchAction(e.target.getAttribute("data-viewer-action-index"));
+                        break;
+                    case "rotate-left":
+                        this.rotate("left");
+                        break;
+                    case "rotate-right":
+                        this.rotate("right");
+                        break;
+                }
+            },
+            // On close
+            handleClose() {
+                this.imgList = null
+                this.isCreatePoster = false
+                this.$emit("update:show", false);
+            },
+        },
+    };
+</script>
+
+<style lang="less" scoped>
+    @import "./style/css/index.css";
+</style>

package/src/views/VideoViewer/style/css/index.css

@@ -0,0 +1,186 @@
+.duo-viewer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10000;
+  width: 100%;
+  height: 100vh;
+}
+.duo-viewer-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 9;
+}
+.duo-viewer-mask__image {
+  cursor: grab;
+  height: 750px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 8;
+  transition-property: transform, height, width;
+  transition-duration: 0.3s, 0.3s, 0.3s;
+}
+.duo-viewer-footer {
+  position: absolute;
+  text-align: center;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+}
+.duo-viewer-footer__title {
+  color: #cfcfcf;
+  position: absolute;
+  bottom: 95px;
+  left: 50%;
+  transform: translate(-50%, 0%);
+  z-index: 10;
+  width: 100%;
+}
+.duo-viewer-footer__toolbar {
+  position: absolute;
+  bottom: 60px;
+  left: 50%;
+  transform: translate(-50%, 0%);
+  z-index: 10;
+}
+.duo-viewer-footer__toolbar li {
+  margin: 2px;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
+  cursor: pointer;
+  float: left;
+  height: 28px;
+  overflow: hidden;
+  -webkit-transition: background-color 0.15s;
+  transition: background-color 0.15s;
+  width: 28px;
+  position: relative;
+}
+.duo-viewer-footer__toolbar li::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  content: "";
+  display: inline-block;
+  background: url("../images/icons.png") no-repeat;
+}
+.duo-viewer-footer__toolbar li.duo-viewer-footer__zoom-in::after {
+  background-position: 4px 3px;
+}
+.duo-viewer-footer__toolbar li.duo-viewer-footer__zoom-out::after {
+  background-position: -16px 3px;
+}
+.duo-viewer-footer__toolbar li.duo-viewer-footer__one-to-one::after {
+  background-position: -35px 3px;
+}
+.duo-viewer-footer__toolbar li.duo-viewer-footer__reset::after {
+  background-position: -56px 3px;
+}
+.duo-viewer-footer__toolbar li.duo-viewer-footer__prev::after {
+  background-position: -77px 3px;
+}
+.duo-viewer-footer__toolbar li.duo-viewer-footer__play {
+  width: 34px;
+  height: 34px;
+  margin-top: -2px;
+}
+.duo-viewer-footer__toolbar li.duo-viewer-footer__play::after {
+  background-position: -93px 6px;
+}
+.duo-viewer-footer__toolbar li.duo-viewer-footer__next::after {
+  background-position: -116px 3px;
+}
+.duo-viewer-footer__toolbar li.duo-viewer-footer__rotate-left::after {
+  background-position: -136px 3px;
+}
+.duo-viewer-footer__toolbar li.duo-viewer-footer__rotate-right::after {
+  background-position: -156px 3px;
+}
+.duo-viewer-footer__navbar {
+  width: 100%;
+  height: 50px;
+  background: rgba(0, 0, 0, 0.9);
+  overflow: hidden;
+}
+.duo-viewer-footer__navbar-thumbnail-image {
+  height: 100%;
+  width: 80px;
+  -o-object-fit: fill;
+  object-fit: fill;
+  transform: translateX(-30px);
+}
+.duo-viewer-footer__navbar-thumbnail-item {
+  margin: 0 2px;
+  color: transparent;
+  cursor: pointer;
+  float: left;
+  font-size: 0;
+  width: 30px;
+  opacity: 0.2;
+  overflow: hidden;
+  -webkit-transition: opacity 0.15s;
+  transition: opacity 0.15s;
+}
+.duo-viewer-footer__navbar-thumbnail-item.viewer-current {
+  opacity: 0.9;
+}
+.duo-viewer-footer__navbar-thumbnail-wrap {
+  position: relative;
+  overflow: hidden;
+  width: 660px;
+  height: inherit;
+  margin: 0 auto;
+}
+.duo-viewer-footer__navbar-thumbnail-list {
+  padding: 10px 0;
+  width: auto;
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transition: all 0.3s;
+}
+.duo-viewer-close {
+  background-color: rgba(0, 0, 0, 0.9);
+  border-radius: 0% 0% 0% 100%;
+  cursor: pointer;
+  height: 50px;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: background-color 0.15s;
+  width: 50px;
+  z-index: 10;
+  line-height: 50px;
+  text-align: center;
+}
+.duo-viewer-close__off {
+  margin: 18px 12px;
+  position: relative;
+  width: 2em;
+  height: 0.3em;
+  background-color: #fff;
+  transform: rotate(45deg);
+  border-radius: 0.15em;
+}
+.duo-viewer-close__off:after {
+  content: "";
+  position: absolute;
+  width: 2em;
+  height: 0.3em;
+  top: 0;
+  left: 0;
+  background-color: #fff;
+  transform: rotate(90deg);
+  border-radius: 0.15em;
+}