video controls

szuprefix · Mar 11, 2020 · 704299f · 704299f
1 parent a80e76e
commit 704299f
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-django",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "个人实验项目, 本框架的目标是借鉴并超越django admin的自动化思想, 实现UI前端的极简快速定制开发",
   "main": "index.js",
   "files": [

diff --git a/src/components/media/qcloud/Controls.vue b/src/components/media/qcloud/Controls.vue
@@ -1,11 +1,19 @@
 <template>
     <div v-if="isActive">
-        <popup-radio title="画质" v-model="definition" :options="definitionOptions"></popup-radio>
-        <!--<x-button @click.native="changeSrc(f)" v-for="f in files" :key="f.Definition">{{f.name}}</x-button>-->
+        <div class="wechat_android_video_control">
+            <span @click="showPopup = true">{{definitionMap[definition]}}</span>
+            <span @click="togglePlaybackRate">{{playbackRate}}x</span>
+        </div>
+        <!--<popup-radio title="倍速" v-model="playbackRate" :options="playbackRateOptions"></popup-radio>-->
+        <popup v-model="showPopup">
+            <group title="画质">
+                <radio v-model="definition" :options="definitionOptions" :fill-mode="false"></radio>
+            </group>
+        </popup>
     </div>
 </template>
 <script>
-    import {XButton, PopupRadio} from 'vux'
+    import {XButton, PopupRadio, Popup, Radio, Group} from 'vux'
     import {get} from 'lodash'
     import Cache from 'vue-django/src/utils/cache'
     export default{
@@ -15,12 +23,21 @@
         data () {
             return {
                 definition: 20,
+                definitionMap: {
+                    10: '流畅',
+                    20: '标清',
+                    30: '高清',
+                    1100: '纯音频'
+                },
                 breakPoint: 0,
+                playbackRate: 1,
+                playbackRates: [0.5, 1, 1.25, 1.5, 2],
+                showPopup: false,
                 currentTime: 0,
                 cache: Cache(`qcloud.vod.${this.fileId}.currentTime`)
             }
         },
-        components: {XButton, PopupRadio},
+        components: {XButton, PopupRadio, Popup, Radio, Group},
         mounted () {
             if (this.isActive) {
                 this.init()
@@ -35,6 +52,9 @@
                 this.breakPoint = ct
                 this.setCurrentTime(ct)
             },
+            togglePlaybackRate () {
+                this.playbackRate = this.playbackRates.find(a => a > this.playbackRate) || this.playbackRates[0]
+            },
             init () {
                 let ct = this.cache.read() || 0
                 this.breakPoint = ct
@@ -70,17 +90,10 @@
                 return this.options.FileId || this.options.FileId
             },
             files () {
-                let dm = {
-                    10: '流畅',
-                    20: '标清',
-                    30: '高清',
-                    1100: '纯音频'
-                }
-
                 return get(this.options, 'TranscodeInfo.TranscodeSet', [])
                     .filter(a => [10, 20, 30, 1100].includes(a.Definition))
                     .map(a => {
-                        return {definition: a.Definition, name: dm[a.Definition], url: a.Url}
+                        return {definition: a.Definition, name: this.definitionMap[a.Definition], url: a.Url}
                     })
             },
             isActive () {
@@ -95,7 +108,21 @@
         watch: {
             definition (v) {
                 this.changeSrc(this.files.find(a => a.definition === v))
+            },
+            playbackRate (v) {
+                this.getEl().playbackRate = v
             }
         }
     }
 </script>
+<style>
+    .wechat_android_video_control {
+        background-color: darkgray;
+        color: white;
+        padding: 0.5rem;
+    }
+
+    .wechat_android_video_control span {
+        padding: 0 1rem;
+    }
+</style>
diff --git a/src/components/mobile/model/Panel.vue b/src/components/mobile/model/Panel.vue
@@ -21,7 +21,7 @@
                     let d = {meta: {}}
                     this.items.forEach((f) => {
                         let p = f.placeholder || 'meta'
-                        let v = a[f.name]
+                        let v = (f.name === '$' && a) || a[f.name]
                         if (f.format) {
                             v = f.format(v)
                         }

diff --git a/src/mixins/server_response.js b/src/mixins/server_response.js
@@ -63,7 +63,7 @@ export default  {
         },
         onServerResponseError: function (error) {
             this.loading = false
-            if(error == 'cancel'){  // confirm dialog cancel ?
+            if (error == 'cancel') {  // confirm dialog cancel ?
                return
             }
             if ([404,403,405,429, 537].includes(error.code) && error.msg.detail) {
@@ -73,9 +73,11 @@ export default  {
             if (error.code === 400) {
                 // this.errors = this.formErrors = joinErrors(error.msg)
             } else if (error.code === 401) {
-                this.$store.state.bus.$emit("user-logout")
-            } else if (error.code === 502){
-                this.alertError("网关错误")
+                this.$store.state.bus.$emit('user-logout')
+            } else if (error.code === 502) {
+                this.alertError('网关错误')
+            } else if (error instanceof Error) {
+                this.alertError({code: error.name, msg: error.message})
             } else {
                 this.alertError(error)
             }

diff --git a/src/utils/filters.js b/src/utils/filters.js
@@ -4,7 +4,7 @@
 import {formatRelative, subDays, distance_in_words_to_now} from 'date-fns'
 import zh_cn from 'date-fns/locale/zh_cn'
 
-function dateTime (t) {
+export function dateTime (t) {
     if (typeof t === 'string' && !t.includes('+')) {
         t = t.concat('+08:00')
     }
@@ -141,6 +141,7 @@ export function duration (a) {
 }
 
 export default {
+    dateTime,
     date2now,
     date,
     parseTime,