GuerillaStudio/souvenir
GuerillaStudio/souvenir
1
0
Fork 0
mirror of https://github.com/GuerillaStudio/souvenir.git synced 2025-01-20 18:50:21 +00:00
Code Issues Releases Activity Actions

feat(encoding): moar labels

Browse source
This commit is contained in:
Tixie 2019-05-01 03:04:49 +02:00
parent 6b85b10e2f
commit 93e8ad4b5f
1 changed files with 41 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/views/screens/encoding.vue
View file

@ -2,14 +2,14 @@
<div class="encoding"> <div class="encoding">
<div class="encoding-loader"> <div class="encoding-loader">
<encoding-loader :percent="roundedPercentage" class="encoding-progress"></encoding-loader> <encoding-loader :percent="percentage" class="encoding-progress"></encoding-loader>
<preview-canvas class="encoding-loader__preview"></preview-canvas> <preview-canvas class="encoding-loader__preview"></preview-canvas>
</div> </div>
<div class="encoding-percent">{{ roundedPercentage }}%</div> <div class="encoding-percent">{{ percentage }}%</div>
<div class="layoutOverlay-content"> <div class="layoutOverlay-content">
<div class="layoutOverlay-title">Almost ready~</div> <div class="layoutOverlay-title">{{ labelTitle }}</div>
<div class="layoutOverlay-subtitle">Encoding may take some time depending on your device</div> <div class="layoutOverlay-subtitle">{{ labelSubtitle }}</div>
</div> </div>
<button class="encoding-notif"> <button class="encoding-notif">
@ -34,12 +34,46 @@ export default {
props: { props: {
value: Number value: Number
}, },
data: () => ({
lastTitleUpdate: null,
labelTitle: 'Encoding…'
}),
computed: { computed: {
percentage () { percentage () {
return this.value * 100 return Math.trunc(this.value * 100)
}, },
roundedPercentage () { labelSubtitle () {
return Math.trunc(this.percentage) return Math.random() < 0.7 ? 'Encoding may take some time depending on your device' : 'Encoding may take some time depending on your level of cuteness'
}
},
methods: {
updateTitle () {
const currentDate = Date.now()
if (!this.lastTitleUpdate || (currentDate - this.lastTitleUpdate > 1000)) {
this.lastTitleUpdate = currentDate
switch (true) {
case this.percentage < 25:
this.labelTitle = 'Encoding…'
break
case this.percentage < 50:
this.labelTitle = 'A little bit more'
break
case this.percentage < 75:
this.labelTitle = 'One last touch'
break
case this.percentage >= 75:
this.labelTitle = 'Almost ready ~'
break
default:
this.labelTitle = 'Error'
break
}
}
}
},
watch: {
percentage: function () {
this.updateTitle()
} }
} }
} }