zydx-plus 1.8.31 → 1.9.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.8.31",
+  "version": "1.9.31",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [
@@ -23,7 +23,8 @@
     "vue": "^3.2.13",
     "vue-draggable-next": "^2.1.1",
     "pdfjs-dist": "^2.0.943",
-    "flipbook-vue": "^1.0.0-beta.4"
+    "flipbook-vue": "^1.0.0-beta.4",
+    "hls.js": "^1.3.5"
   },
   "devDependencies": {
     "@vue/component-compiler-utils": "^2.6.0",

package/src/components/videos/src/videos.css

@@ -0,0 +1,127 @@
+.video{
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background-color: #000;
+    overflow: hidden;
+}
+.video:hover .bottom{
+    transform: translateY(0);
+}
+.video>video{
+    width: 100%;
+    height: 100%;
+}
+.bottom{
+    height: 40px;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    background-color: rgba(0,0,0,0.4);
+    transform: translateY(100%);
+    transition-duration: 200ms
+}
+/*--------------------------*/
+/* 播放按钮样式 */
+.play-pause {
+    width: 40px;
+    height: 40px;
+    position: relative;
+    cursor: pointer;
+    animation: play-pause 0.5s ease;
+}
+/* 播放状态样式 */
+.play-pause.play:before{
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(1);
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 8px 0 8px 16px;
+    border-color: transparent transparent transparent #fff;
+    animation: play 0.5s ease;
+}
+/* 暂停状态样式 */
+.play-pause.pause:before,.play-pause.pause:after{
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(1);
+    width: 6px;
+    height: 16px;
+    background-color: #fff;
+    animation: pause 0.5s ease;
+}
+.play-pause.pause:before{
+    margin-left: -6px;
+}
+.play-pause.pause:after{
+    margin-left: 3px;
+}
+/* 动画定义 */
+@keyframes play-pause {
+    from {
+        transform: scale(1);
+    }
+    to {
+        transform: scale(1.1);
+    }
+}
+
+@keyframes play {
+    from {
+        transform: translate(-50%, -50%) scale(0);
+    }
+    to {
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+
+@keyframes pause {
+    from {
+        transform: translate(-50%, -50%) scale(0);
+    }
+    to {
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+.volume{
+    position: absolute;
+    top: 50%;
+    right: 20px;
+    margin-top: -3px;
+    z-index: 1;
+    height: 6px;
+    width: 100px;
+    border-radius: 20px;
+    background-color: rgba(255,255,255,0.5);
+    user-select: none;
+}
+.volume-ico{
+    position: absolute;
+    top: -4px;
+    left: -7px;
+    z-index: 1;
+    width: 14px;
+    height: 14px;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    background-color: #fff;
+    cursor: pointer;
+    box-shadow: 0 0 2px 1px #ccc;
+}
+.volume-img{
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    top: -6px;
+    left: -30px;
+    z-index: 1;
+}
+

package/src/components/videos/src/videos.vue

@@ -0,0 +1,102 @@
+<template>
+   <div class="video">
+     <video ref="videoEl"></video>
+     <div class="bottom">
+       <div class="play-pause" :class="{'play': !playing, 'pause': playing}" @click="playOrPause"></div>
+       <div class="volume"
+            ref="circle"
+            @mousedown="circleBegin($event)"
+            @mousemove="circleMove($event)"
+            @mouseup="circleEnd($event)">
+         <div v-html="volumeIco" class="volume-img"></div>
+         <div class="volume-ico"
+              @mousedown="circleBegin($event)"
+              @mousemove="circleMove($event)"
+              @mouseup="circleEnd($event)"
+              :style="{transform: 'translateX('+ circleX +'px)'}"></div>
+       </div>
+     </div>
+   </div>
+</template>
+
+<script>
+import Hls from 'hls.js';
+export default {
+  name: "zydx-videos",
+  mounted() {
+    this.initPlayer();
+    // this.initWebRtc();
+  },
+  data() {
+    return {
+      volumeIco: '<svg t="1679643651310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2756" width="20" height="20" fill="#ffffff"><path d="M431.207929 106.919125c-14.536065-5.991458-30.570249-2.454912-41.684378 8.683776L198.703551 308.032562l-94.77862 0c-21.468964 0-38.633902 17.024745-38.633902 38.486546l0 331.002716c0 21.460778 17.164938 38.485523 38.633902 38.485523l94.77862 0 191.521988 192.429661c7.446599 7.467065 17.411555 11.530614 27.557636 11.530614 4.992711 0 8.626471-0.915859 13.424754-2.89391 14.545274-6.005784 22.63144-20.143783 22.63144-35.874045L453.839369 142.839219C453.838346 127.108956 445.753203 112.924909 431.207929 106.919125zM376.128473 787.108708 241.016239 649.917116c-7.299243-7.320733-15.827477-11.618619-26.163893-11.618619l-71.852468 0L142.999878 385.742435l71.852468 0c10.336416 0 18.86465-4.297886 26.163893-11.618619l135.112234-137.191592L376.128473 787.108708zM581.9 676.526147c-7.67889 8.590656-18.318204 12.96529-29.000498 12.96529-9.221012 0-18.47477-3.25923-25.891693-9.886161-16.011672-14.302751-17.388019-38.870286-3.080152-54.870702 97.04729-108.533902 10.117428-213.893508-0.113587-225.548966-14.113439-16.081257-12.632715-40.605813 3.388167-54.78986 16.020882-14.189164 40.431851-12.817933 54.697763 3.1262C632.777761 404.416749 698.252984 546.403554 581.9 676.526147zM699.338712 780.485871c-7.677866 8.591679-18.318204 12.96529-29.000498 12.96529-9.219989 0-18.478863-3.25923-25.891693-9.885138-16.010649-14.302751-17.388019-38.871309-3.079128-54.871725 191.540408-214.210733 7.91118-424.49811 0-433.345616-14.307867-16.000416-12.93152-40.568974 3.079128-54.871725 15.997346-14.302751 40.575114-12.927427 54.892191 3.079128C701.739389 246.240217 936.651606 515.090385 699.338712 780.485871zM821.955354 858.351286c-7.67889 8.590656-18.318204 12.96529-29.000498 12.96529-9.221012 0-18.47477-3.25923-25.891693-9.886161-16.011672-14.302751-17.388019-38.870286-3.080152-54.870702 109.224634-122.153084 142.595672-257.939677 99.177813-403.597081-32.952506-110.559025-98.518804-184.728258-99.177813-185.468109-14.307867-16.000416-12.93152-40.564881 3.080152-54.871725 15.992229-14.306844 40.568974-12.930497 54.892191 3.079128C825.049832 169.162748 1128.098893 515.981684 821.955354 858.351286z" p-id="2757"></path></svg>',
+      playing: false,
+      rtcPeerConnection: null,
+      cx: 0,
+      circleCDown: false,
+      circleX: 100
+    };
+  },
+  props: {
+    url: {
+      type: String,
+      required: true
+    },
+  },
+  methods: {
+    async initWebRtc() {
+      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+      // this.$refs.videoEl.srcObject = stream;
+      this.rtcPeerConnection = new RTCPeerConnection();
+      this.rtcPeerConnection.addStream(stream);
+      this.rtcPeerConnection.addEventListener('track', (event) => {
+        this.$refs.videoEl.srcObject = event.streams[0];
+      });
+    },
+    circleBegin(event) {
+      this.circleCDown = true
+      this.cx = this.$refs.circle.getBoundingClientRect().x
+      let x = event.clientX - this.cx
+      this.circleMask(x)
+    },
+    circleMove(event) {
+      if(this.circleCDown) {
+        let x = event.clientX - this.cx
+        this.circleMask(x)
+      }
+    },
+    circleEnd(event) {
+      this.circleCDown = false
+    },
+    circleMask(x) {
+      let w = this.$refs.circle.getBoundingClientRect().width
+      this.circleX = x
+      if(x <= 0) this.circleX = 0
+      if(x >= w) this.circleX = w
+      this.$refs.videoEl.volume = this.circleX/100
+    },
+    initPlayer() {
+      if (Hls.isSupported()) {
+        const hls = new Hls();
+        hls.loadSource(this.url);
+        hls.attachMedia(this.$refs.videoEl);
+        hls.on(Hls.Events.MANIFEST_PARSED, () => {
+          // this.duration = this.$refs.videoEl.duration;
+        });
+      } else if (this.$refs.videoEl.canPlayType('application/vnd.apple.mpegurl')) {
+        this.$refs.videoEl.src = this.url;
+      }
+    },
+    playOrPause() {
+      if (this.playing) {
+        this.$refs.videoEl.pause();
+      } else {
+        this.$refs.videoEl.play();
+      }
+      this.playing = !this.playing;
+    }
+  }
+}
+</script>
+
+<style scoped src="./videos.css"></style>

package/src/index.js

@@ -12,6 +12,7 @@ import buttonGroup from './components/buttonGroup/index';
 import spinner from './components/spinner/index';
 import treeList from './components/treeList/index';
 import flip from './components/flip/index';
+import videos from './components/videos/index';
 
 const components = [
     Calendar,
@@ -25,7 +26,8 @@ const components = [
     Table,
     buttonGroup,
     treeList,
-    flip
+    flip,
+    videos
 ];
 
 function install(app) {
@@ -37,7 +39,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.8.31',
+    version: '1.9.31',
     install,
     Calendar,
     Message,
@@ -52,6 +54,7 @@ export default {
     Table,
     buttonGroup,
     treeList,
-    flip
+    flip,
+    videos
 };