Skip to content

Commit

Permalink
cache, mobile , video
Browse files Browse the repository at this point in the history
  • Loading branch information
szuprefix committed Feb 12, 2020
1 parent e78fd04 commit f8c0b97
Show file tree
Hide file tree
Showing 7 changed files with 236 additions and 31 deletions.
88 changes: 88 additions & 0 deletions src/components/media/qcloud/Controls.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<template>
<div v-if="isActive">
<!--<x-button @click.native="changeSrc(f)" v-for="f in files" :key="f.Definition">{{f.name}}</x-button>-->
</div>
</template>
<script>
import {XButton} from 'vux'
import {get} from 'lodash'
import Cache from 'vue-django/src/utils/cache'
export default{
props: {
options: Object
},
data () {
return {
breakPoint: 0,
currentTime: 0,
cache: Cache(`qcloud.vod.${this.fileId}.currentTime`)
}
},
components: {XButton},
mounted () {
if (this.isActive) {
this.init()
}
},
methods: {
changeSrc (f) {
let el = this.getEl()
let ct = el.currentTime
el.src = f.url
el.play()
this.setCurrentTime(ct)
},
init () {
let ct = this.cache.read() || 0
this.breakPoint = ct
// this.setCurrentTime(ct)
this.getEl().addEventListener('timeupdate', this.onTimeUpdate)
},
getEl () {
return document.querySelector('video')
},
onTimeUpdate () {
let ct = this.getEl().currentTime
if (this.breakPoint > 0 && ct > 0) {
ct = this.breakPoint
this.breakPoint = 0
this.getEl().currentTime = ct
}
this.cache.save(ct)
},
setCurrentTime (ct) {
setTimeout(() => {
this.getEl().currentTime = ct
}, 800)
}
},
computed: {
isWechat () {
return (/MicroMessenger/i).test(window.navigator.userAgent)
},
isIPhone () {
return (/iphone/i).test(window.navigator.userAgent)
},
fileId () {
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}
})
},
isActive () {
return this.isWechat && !this.isIPhone
}
}
}
</script>
35 changes: 8 additions & 27 deletions src/components/media/qcloud/Video.vue
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,18 @@
init () {
if (!window.TCPlayer) {
this.loadStyle('//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css')
$script('//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js', () => {
$script([
'//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js',
// '//imgcache.qq.com/open/qcloud/video/tcplayer/lib/hls.min.0.8.8.js'
], () => {
this.createPlayer()
})
} else {
this.createPlayer()
}
},
setCurrentTime (ct) {
document.querySelector('video').currentTime = ct
}
},
computed: {
Expand Down Expand Up @@ -112,30 +118,5 @@
width: 50%;
}
}
video{
width: 100%;
}
video::-webkit-media-controls-fullscreen-button {
display: none;
}
video::-webkit-media-controls-play-button {
background: red;
}
video::-webkit-media-controls-play-button {display: none}
video::-webkit-media-controls-timeline {display: none}
video::-webkit-media-controls-current-time-display{}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}
video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-enclosure {
overflow:hidden;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px);
}
</style>
15 changes: 15 additions & 0 deletions src/components/media/qcloud/WechatPatch.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/**
* Created by denishuang on 2020/2/11.
*/

export default function (cache) {
return {
cache,
isWechat () {
return window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) === 'micromessenger'
},
cacheCurrentTime () {
this.cache.save()
}
}
}
36 changes: 36 additions & 0 deletions src/components/mobile/ModelList.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<template>
<list v-bind="[$attrs,$props]" v-model="data"></list>
</template>
<script>
import List from './List.vue'
import {Register} from '../../utils/app_model'
export default{
props: {
appModel: String,
queries: {type: Object, default: {}},
},
data () {
return {
data: [],
model: Register.get(this.appModel)
}
},
components: {List},
created () {
this.load()
},
methods: {
load () {
return this.model.query(this.queries).then(data => {
this.data = data.results
})
}
},
computed: {},
watch: {
queries (v) {
this.load()
}
}
}
</script>
54 changes: 54 additions & 0 deletions src/components/mobile/PopupRadio.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<template>
<popup-radio v-bind="[$attrs]" :title="title" :options="options" v-model="value_"></popup-radio>
</template>
<script>
import {Register} from '../../utils/app_model'
import {PopupRadio} from 'vux'
export default{
props: {
appModel: String,
queries: {type: Object, default: {}},
value: [String, Number]
},
data () {
return {
model: Register.get(this.appModel),
options: [],
value_: undefined
}
},
components: {PopupRadio},
created () {
this.value_ = this.value
this.load()
},
methods: {
load () {
return this.model.query(this.queries).then(data => {
this.options = data.results.map(a => {
return {key: a.id, value: a[this.labelField]}
})
})
}
},
computed: {
title () {
return this.$attrs.title || this.model.verboseName
},
labelField () {
return this.$attrs.labelField || this.model.title_field
}
},
watch: {
value (v) {
this.value_ = v
},
value_ (v) {
this.$emit('input', v)
},
queries (v) {
this.load()
}
}
}
</script>
13 changes: 9 additions & 4 deletions src/utils/app_model.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,18 @@ export function AppModel (config) {
return data
})
},
query (d) {
return axios.get(`${this.listUrl}?${Qs.stringify(d, {arrayFormat: 'comma'})}`).then(({data}) => {
return data
})
},
updateOrCreate (s, d) {
return axios.get(`${this.listUrl}?${Qs.stringify(s)}`).then(({data}) => {
if (data.count === 1){
if (data.count === 1) {
let id = data.results[0].id
return Promise.resolve(id)
} else if (data.count > 1){
return Promise.reject('不是唯一')
} else if (data.count > 1) {
throw Error('不是唯一')
} else {
return Promise.resolve(undefined)
}
Expand Down Expand Up @@ -83,7 +88,7 @@ export var Register = {
getConfig (fullName) {
let config = this.configs[fullName]
if (!config) {
throw `model ${fullName} not found!`
throw Error(`model ${fullName} not found!`)
} else {
return config
}
Expand Down
26 changes: 26 additions & 0 deletions src/utils/cache.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/**
* Created by denishuang on 2020/2/11.
*/
import {throttle} from 'lodash'
export default function (key, interval) {
function saveAtOnce (v) {
localStorage.setItem(key, v)
}

let save = throttle(saveAtOnce, interval || 1000)

function destroy () {
localStorage.removeItem(key)
}

function read () {
return localStorage.getItem(key)
}

return {
save,
read,
saveAtOnce,
destroy
}
}

0 comments on commit f8c0b97

Please sign in to comment.