aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/assets
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2019-12-20 17:49:57 +0100
committerRigel Kent <sendmemail@rigelk.eu>2019-12-20 17:49:57 +0100
commit223b24e618146f85b20b5bf365bc18d14a5964cd (patch)
tree236fde34d190fa5d0d9a44c6760c0161594dd872 /client/src/assets
parent1dc240a9488c66ad38205d08fcfdb32d35efceaa (diff)
downloadPeerTube-223b24e618146f85b20b5bf365bc18d14a5964cd.tar.gz
PeerTube-223b24e618146f85b20b5bf365bc18d14a5964cd.tar.zst
PeerTube-223b24e618146f85b20b5bf365bc18d14a5964cd.zip
Fix upnext, refactor avatar menu, add to playlist overflow
Diffstat (limited to 'client/src/assets')
-rw-r--r--client/src/assets/player/upnext/upnext-plugin.ts54
1 files changed, 29 insertions, 25 deletions
diff --git a/client/src/assets/player/upnext/upnext-plugin.ts b/client/src/assets/player/upnext/upnext-plugin.ts
index ba9afbe3d..a3747b25f 100644
--- a/client/src/assets/player/upnext/upnext-plugin.ts
+++ b/client/src/assets/player/upnext/upnext-plugin.ts
@@ -18,6 +18,7 @@ function getMainTemplate (options: any) {
18 <span class="vjs-upnext-cancel"> 18 <span class="vjs-upnext-cancel">
19 <button class="vjs-upnext-cancel-button" tabindex="0" aria-label="Cancel autoplay">${options.cancelText}</button> 19 <button class="vjs-upnext-cancel-button" tabindex="0" aria-label="Cancel autoplay">${options.cancelText}</button>
20 </span> 20 </span>
21 <span class="vjs-upnext-suspended">${options.suspendedText}</span>
21 </span> 22 </span>
22 ` 23 `
23} 24}
@@ -26,40 +27,34 @@ function getMainTemplate (options: any) {
26const Component = videojs.getComponent('Component') 27const Component = videojs.getComponent('Component')
27class EndCard extends Component { 28class EndCard extends Component {
28 options_: any 29 options_: any
29 getTitle: Function
30 next: Function
31 condition: Function
32 dashOffsetTotal = 586 30 dashOffsetTotal = 586
33 dashOffsetStart = 293 31 dashOffsetStart = 293
34 interval = 50 32 interval = 50
35 upNextEvents = new videojs.EventTarget() 33 upNextEvents = new videojs.EventTarget()
36 chunkSize: number 34 ticks = 0
35 totalTicks: number
37 36
38 container: HTMLElement 37 container: HTMLElement
39 title: HTMLElement 38 title: HTMLElement
40 autoplayRing: HTMLElement 39 autoplayRing: HTMLElement
41 cancelButton: HTMLElement 40 cancelButton: HTMLElement
41 suspendedMessage: HTMLElement
42 nextButton: HTMLElement 42 nextButton: HTMLElement
43 43
44 constructor (player: videojs.Player, options: any) { 44 constructor (player: videojs.Player, options: any) {
45 super(player, options) 45 super(player, options)
46 this.options_ = options
47 46
48 this.getTitle = this.options_.getTitle 47 this.totalTicks = this.options_.timeout / this.interval
49 this.next = this.options_.next
50 this.condition = this.options_.condition
51
52 this.chunkSize = (this.dashOffsetTotal - this.dashOffsetStart) / (this.options_.timeout / this.interval)
53 48
54 player.on('ended', (_: any) => { 49 player.on('ended', (_: any) => {
55 if (!this.condition()) return 50 if (!this.options_.condition()) return
56 51
57 player.addClass('vjs-upnext--showing') 52 player.addClass('vjs-upnext--showing')
58 this.showCard((canceled: boolean) => { 53 this.showCard((canceled: boolean) => {
59 player.removeClass('vjs-upnext--showing') 54 player.removeClass('vjs-upnext--showing')
60 this.container.style.display = 'none' 55 this.container.style.display = 'none'
61 if (!canceled) { 56 if (!canceled) {
62 this.next() 57 this.options_.next()
63 } 58 }
64 }) 59 })
65 }) 60 })
@@ -81,6 +76,7 @@ class EndCard extends Component {
81 this.autoplayRing = container.getElementsByClassName('vjs-upnext-svg-autoplay-ring')[0] 76 this.autoplayRing = container.getElementsByClassName('vjs-upnext-svg-autoplay-ring')[0]
82 this.title = container.getElementsByClassName('vjs-upnext-title')[0] 77 this.title = container.getElementsByClassName('vjs-upnext-title')[0]
83 this.cancelButton = container.getElementsByClassName('vjs-upnext-cancel-button')[0] 78 this.cancelButton = container.getElementsByClassName('vjs-upnext-cancel-button')[0]
79 this.suspendedMessage = container.getElementsByClassName('vjs-upnext-suspended')[0]
84 this.nextButton = container.getElementsByClassName('vjs-upnext-autoplay-icon')[0] 80 this.nextButton = container.getElementsByClassName('vjs-upnext-autoplay-icon')[0]
85 81
86 this.cancelButton.onclick = () => { 82 this.cancelButton.onclick = () => {
@@ -96,14 +92,11 @@ class EndCard extends Component {
96 92
97 showCard (cb: Function) { 93 showCard (cb: Function) {
98 let timeout: any 94 let timeout: any
99 let start: number
100 let now: number
101 let newOffset: number
102 95
103 this.autoplayRing.setAttribute('stroke-dasharray', '' + this.dashOffsetStart) 96 this.autoplayRing.setAttribute('stroke-dasharray', '' + this.dashOffsetStart)
104 this.autoplayRing.setAttribute('stroke-dashoffset', '' + -this.dashOffsetStart) 97 this.autoplayRing.setAttribute('stroke-dashoffset', '' + -this.dashOffsetStart)
105 98
106 this.title.innerHTML = this.getTitle() 99 this.title.innerHTML = this.options_.getTitle()
107 100
108 this.upNextEvents.one('cancel', () => { 101 this.upNextEvents.one('cancel', () => {
109 clearTimeout(timeout) 102 clearTimeout(timeout)
@@ -120,23 +113,32 @@ class EndCard extends Component {
120 cb(false) 113 cb(false)
121 }) 114 })
122 115
123 const update = () => { 116 const goToPercent = (percent: number) => {
124 now = this.options_.timeout - (new Date().getTime() - start) 117 const newOffset = Math.max(-this.dashOffsetTotal, - this.dashOffsetStart - percent * this.dashOffsetTotal / 2 / 100)
118 this.autoplayRing.setAttribute('stroke-dashoffset', '' + newOffset)
119 }
125 120
126 if (now <= 0) { 121 const tick = () => {
122 goToPercent((this.ticks++) * 100 / this.totalTicks)
123 }
124
125 const update = () => {
126 if (this.options_.suspended()) {
127 this.suspendedMessage.innerText = this.options_.suspendedText
128 goToPercent(0)
129 this.ticks = 0
130 timeout = setTimeout(update.bind(this), 300) // checks once supsended can be a bit longer
131 } else if (this.ticks >= this.totalTicks) {
127 clearTimeout(timeout) 132 clearTimeout(timeout)
128 cb(false) 133 cb(false)
129 } else { 134 } else {
130 const strokeDashOffset = parseInt(this.autoplayRing.getAttribute('stroke-dashoffset'), 10) 135 this.suspendedMessage.innerText = ''
131 newOffset = Math.max(-this.dashOffsetTotal, strokeDashOffset - this.chunkSize) 136 tick()
132 this.autoplayRing.setAttribute('stroke-dashoffset', '' + newOffset)
133 timeout = setTimeout(update.bind(this), this.interval) 137 timeout = setTimeout(update.bind(this), this.interval)
134 } 138 }
135
136 } 139 }
137 140
138 this.container.style.display = 'block' 141 this.container.style.display = 'block'
139 start = new Date().getTime()
140 timeout = setTimeout(update.bind(this), this.interval) 142 timeout = setTimeout(update.bind(this), this.interval)
141 } 143 }
142} 144}
@@ -153,7 +155,9 @@ class UpNextPlugin extends Plugin {
153 timeout: options.timeout || 5000, 155 timeout: options.timeout || 5000,
154 cancelText: options.cancelText || 'Cancel', 156 cancelText: options.cancelText || 'Cancel',
155 headText: options.headText || 'Up Next', 157 headText: options.headText || 'Up Next',
156 condition: options.condition 158 suspendedText: options.suspendedText || 'Autoplay is suspended',
159 condition: options.condition,
160 suspended: options.suspended
157 } 161 }
158 162
159 super(player, settings) 163 super(player, settings)