okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

less jank song-progress bar

Browse source
This commit is contained in:
booploops 2021-12-08 19:35:11 -08:00
parent 43a50625a1
commit 4e7e28ef07
3 changed files with 374 additions and 352 deletions
Download patch file Download diff file Expand all files Collapse all files

14
resources/cider-ui-tests/index.js
View file

@ -65,7 +65,9 @@ const app = new Vue({
limit: 10
},
playerLCD: {
playbackDuration: 0
playbackDuration: 0,
desiredDuration: 0,
userInteraction: false
},
listennow: [],
radio: {
@ -290,6 +292,9 @@ const app = new Vue({
},
progressBarStyle () {
let val = this.playerLCD.playbackDuration
if(this.playerLCD.desiredDuration > 0) {
val = this.playerLCD.desiredDuration
}
let min = 0
let max = this.mk.currentPlaybackDuration
let value = (val-min)/(max-min)*100
@ -297,6 +302,13 @@ const app = new Vue({
'background': ('linear-gradient(to right, var(--keyColor) 0%, var(--keyColor) ' + value + '%, #333 ' + value + '%, #333 100%)')
}
},
getSongProgress() {
if(this.playerLCD.userInteraction) {
return this.playerLCD.desiredDuration
} else{
return this.playerLCD.playbackDuration
}
},
hashCode(str) {
var hash = 0, i, chr;
if (str.length === 0) return hash;

6
resources/cider-ui-tests/style.less
View file

@ -631,6 +631,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
>input[type=range] {
&::-webkit-slider-thumb {
opacity: 1;
transform: scale(1);
z-index: 1;
}
}
@ -644,6 +645,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
&::-webkit-slider-thumb {
opacity: 0;
transform: scale(0.5);
-webkit-appearance: none;
appearance: none;
width: 12px;
@ -651,7 +653,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
border-radius: 100%;
background: var(--keyColor);
cursor: ew-resize;
transition: opacity .10s var(--appleEase);
transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
}
&::-moz-range-thumb {
@ -2051,10 +2053,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
border: 0px;
color: var(--keyColor);
font-family: inherit;
font-weight: 500;
font-size: 16px;
border-radius: 4px;
padding: 6px;
&:hover {
cursor: pointer;
background: rgb(200 200 200 / 10%)

22
resources/cider-ui-tests/views/main.ejs
View file

@ -73,12 +73,15 @@
</div>
<div class="song-progress">
<input type="range" step="0.01" min="0" :style="progressBarStyle()"
@change="mk.seekToTime($event.target.value)"
:max="mk.currentPlaybackDuration" :value="playerLCD.playbackDuration">
@input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
@mouseup="mk.seekToTime($event.target.value);playerLCD.desiredDuration = 0;playerLCD.userInteraction = false"
:max="mk.currentPlaybackDuration" :value="getSongProgress()">
</div>
</div>
<template v-if="mk.nowPlayingItem['attributes']['playParams']">
<div class="actions" v-if="isInLibrary(mk.nowPlayingItem['attributes']['playParams'])">❤️</div>
<div class="actions" v-if="isInLibrary(mk.nowPlayingItem['attributes']['playParams'])">
❤️
</div>
<div class="actions" v-else>🖤</div>
</template>
@ -169,7 +172,8 @@
</div>
</transition>
<div class="app-sidebar-footer">
<input type="range" class="web-slider display--small" step="0.01" min="0" max="1" v-model="mk.volume"
<input type="range" class="web-slider display--small" step="0.01" min="0" max="1"
v-model="mk.volume"
v-if="typeof mk.volume != 'undefined'">
<button class="app-sidebar-button" style="width:100%"
@click="chrome.menuOpened = !chrome.menuOpened">
@ -308,7 +312,8 @@
</transition>
<!-- Library - Albums -->
<transition name="wpfade" v-on:enter="getLibraryAlbumsFull()">
<%- include('pages/library-albums') %>'); %>
<%- include('pages/library-albums') %>');
%>
</transition>
</div>
<transition name="drawertransition">
@ -336,7 +341,9 @@
fill-rule="nonzero"/>
</svg>
</div>
<div id="captions">{{(lyricon) ? ((lyrics.length > 0 ) ? lyrics[currentLyricsLine].line.replace('lrcInstrumental','') : "") : ''}}</div>
<div id="captions">{{(lyricon) ? ((lyrics.length > 0 ) ?
lyrics[currentLyricsLine].line.replace('lrcInstrumental','') : "") : ''}}
</div>
<div id="player-pip" @click="document.querySelector('video').requestPictureInPicture()"
title="Picture-in-Picture">
<%- include("svg/fullscreen.svg") %>
@ -442,7 +449,8 @@
</h3>
</template>
<template v-else>
<h3 class="lyric-line" @click="if(lyric.startTime != 9999999) app.seekTo(lyric.startTime, false)" :start="lyric.startTime"
<h3 class="lyric-line" @click="if(lyric.startTime != 9999999) app.seekTo(lyric.startTime, false)"
:start="lyric.startTime"
:end="lyric.endTime" v-bind:line-index="index.toString()">
<div class="lyricWaiting">
<div class='WaitingDot1'></div>