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 limit: 10
}, },
playerLCD: { playerLCD: {
playbackDuration: 0 playbackDuration: 0,
desiredDuration: 0,
userInteraction: false
}, },
listennow: [], listennow: [],
radio: { radio: {
@ -290,6 +292,9 @@ const app = new Vue({
}, },
progressBarStyle () { progressBarStyle () {
let val = this.playerLCD.playbackDuration let val = this.playerLCD.playbackDuration
if(this.playerLCD.desiredDuration > 0) {
val = this.playerLCD.desiredDuration
}
let min = 0 let min = 0
let max = this.mk.currentPlaybackDuration let max = this.mk.currentPlaybackDuration
let value = (val-min)/(max-min)*100 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%)') '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) { hashCode(str) {
var hash = 0, i, chr; var hash = 0, i, chr;
if (str.length === 0) return hash; 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] { >input[type=range] {
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
opacity: 1; opacity: 1;
transform: scale(1);
z-index: 1; z-index: 1;
} }
} }
@ -644,6 +645,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
opacity: 0; opacity: 0;
transform: scale(0.5);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 12px; width: 12px;
@ -651,7 +653,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
border-radius: 100%; border-radius: 100%;
background: var(--keyColor); background: var(--keyColor);
cursor: ew-resize; cursor: ew-resize;
transition: opacity .10s var(--appleEase); transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
} }
&::-moz-range-thumb { &::-moz-range-thumb {
@ -2051,10 +2053,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
border: 0px; border: 0px;
color: var(--keyColor); color: var(--keyColor);
font-family: inherit; font-family: inherit;
font-weight: 500;
font-size: 16px; font-size: 16px;
border-radius: 4px; border-radius: 4px;
padding: 6px; padding: 6px;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
background: rgb(200 200 200 / 10%) background: rgb(200 200 200 / 10%)

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

@ -2,20 +2,20 @@
<html lang="en"> <html lang="en">
<head> <head>
<link rel="preconnect" href="https://amp-api.music.apple.com/" crossorigin /> <link rel="preconnect" href="https://amp-api.music.apple.com/" crossorigin/>
<link rel="preconnect" href="https://api.music.apple.com/" crossorigin /> <link rel="preconnect" href="https://api.music.apple.com/" crossorigin/>
<link rel="preconnect" href="https://is1-ssl.mzstatic.com/" crossorigin /> <link rel="preconnect" href="https://is1-ssl.mzstatic.com/" crossorigin/>
<link rel="preconnect" href="https://is2-ssl.mzstatic.com/" crossorigin /> <link rel="preconnect" href="https://is2-ssl.mzstatic.com/" crossorigin/>
<link rel="preconnect" href="https://is3-ssl.mzstatic.com/" crossorigin /> <link rel="preconnect" href="https://is3-ssl.mzstatic.com/" crossorigin/>
<link rel="preconnect" href="https://is4-ssl.mzstatic.com/" crossorigin /> <link rel="preconnect" href="https://is4-ssl.mzstatic.com/" crossorigin/>
<link rel="preconnect" href="https://is5-ssl.mzstatic.com/" crossorigin /> <link rel="preconnect" href="https://is5-ssl.mzstatic.com/" crossorigin/>
<link rel="preconnect" href="https://play.itunes.apple.com/" crossorigin /> <link rel="preconnect" href="https://play.itunes.apple.com/" crossorigin/>
<link rel="preconnect" href="https://aod-ssl.itunes.apple.com/" crossorigin /> <link rel="preconnect" href="https://aod-ssl.itunes.apple.com/" crossorigin/>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>Cider</title> <title>Cider</title>
<link rel="stylesheet/less" type="text/css" href="style.less" /> <link rel="stylesheet/less" type="text/css" href="style.less"/>
<script src="less.js"></script> <script src="less.js"></script>
<script src="vue.js"></script> <script src="vue.js"></script>
<script src="sortable.min.js"></script> <script src="sortable.min.js"></script>
@ -25,7 +25,7 @@
</head> </head>
<body oncontextmenu="return false;" loading="1" platform="<%= env.platform %>"> <body oncontextmenu="return false;" loading="1" platform="<%= env.platform %>">
<div id="app"> <div id="app">
<div id="app-main"> <div id="app-main">
<div class="mv-chrome" v-if="chrome.topChromeVisible == false"></div> <div class="mv-chrome" v-if="chrome.topChromeVisible == false"></div>
<div class="app-chrome" :style="{'display': chrome.topChromeVisible ? '' : 'none'}"> <div class="app-chrome" :style="{'display': chrome.topChromeVisible ? '' : 'none'}">
@ -62,7 +62,7 @@
<div class="app-chrome-item playback-controls"> <div class="app-chrome-item playback-controls">
<template v-if="mkReady()"> <template v-if="mkReady()">
<div class="app-playback-controls"> <div class="app-playback-controls">
<div class="artwork" ></div> <div class="artwork"></div>
<div class="playback-info"> <div class="playback-info">
<div class="song-name"> <div class="song-name">
{{ mk.nowPlayingItem["attributes"]["name"] }} {{ mk.nowPlayingItem["attributes"]["name"] }}
@ -73,12 +73,15 @@
</div> </div>
<div class="song-progress"> <div class="song-progress">
<input type="range" step="0.01" min="0" :style="progressBarStyle()" <input type="range" step="0.01" min="0" :style="progressBarStyle()"
@change="mk.seekToTime($event.target.value)" @input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
:max="mk.currentPlaybackDuration" :value="playerLCD.playbackDuration"> @mouseup="mk.seekToTime($event.target.value);playerLCD.desiredDuration = 0;playerLCD.userInteraction = false"
:max="mk.currentPlaybackDuration" :value="getSongProgress()">
</div> </div>
</div> </div>
<template v-if="mk.nowPlayingItem['attributes']['playParams']"> <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> <div class="actions" v-else>🖤</div>
</template> </template>
@ -169,13 +172,14 @@
</div> </div>
</transition> </transition>
<div class="app-sidebar-footer"> <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'"> v-if="typeof mk.volume != 'undefined'">
<button class="app-sidebar-button" style="width:100%" <button class="app-sidebar-button" style="width:100%"
@click="chrome.menuOpened = !chrome.menuOpened"> @click="chrome.menuOpened = !chrome.menuOpened">
<template v-if="chrome.userinfo.attributes"> <template v-if="chrome.userinfo.attributes">
<img class="sidebar-user-icon" loading="lazy" <img class="sidebar-user-icon" loading="lazy"
:src="getMediaItemArtwork(chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : '', 26)" /> :src="getMediaItemArtwork(chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : '', 26)"/>
</template> </template>
<div class="sidebar-user-text" v-if="!chrome.hideUserInfo"> <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
@ -308,7 +312,8 @@
</transition> </transition>
<!-- Library - Albums --> <!-- Library - Albums -->
<transition name="wpfade" v-on:enter="getLibraryAlbumsFull()"> <transition name="wpfade" v-on:enter="getLibraryAlbumsFull()">
<%- include('pages/library-albums') %>'); %> <%- include('pages/library-albums') %>');
%>
</transition> </transition>
</div> </div>
<transition name="drawertransition"> <transition name="drawertransition">
@ -333,10 +338,12 @@
aria-role="presentation" focusable="false"> aria-role="presentation" focusable="false">
<path <path
d="M10.5 21C4.724 21 0 16.275 0 10.5S4.724 0 10.5 0 21 4.725 21 10.5 16.276 21 10.5 21zm-3.543-5.967a.96.96 0 00.693-.295l2.837-2.842 2.85 2.842c.167.167.41.295.693.295.552 0 1.001-.461 1.001-1.012 0-.281-.115-.512-.295-.704L11.899 10.5l2.85-2.855a.875.875 0 00.295-.68c0-.55-.45-.998-1.001-.998a.871.871 0 00-.668.295l-2.888 2.855-2.862-2.843a.891.891 0 00-.668-.281.99.99 0 00-1.001.986c0 .269.116.512.295.678L9.088 10.5l-2.837 2.843a.926.926 0 00-.295.678c0 .551.45 1.012 1.001 1.012z" d="M10.5 21C4.724 21 0 16.275 0 10.5S4.724 0 10.5 0 21 4.725 21 10.5 16.276 21 10.5 21zm-3.543-5.967a.96.96 0 00.693-.295l2.837-2.842 2.85 2.842c.167.167.41.295.693.295.552 0 1.001-.461 1.001-1.012 0-.281-.115-.512-.295-.704L11.899 10.5l2.85-2.855a.875.875 0 00.295-.68c0-.55-.45-.998-1.001-.998a.871.871 0 00-.668.295l-2.888 2.855-2.862-2.843a.891.891 0 00-.668-.281.99.99 0 00-1.001.986c0 .269.116.512.295.678L9.088 10.5l-2.837 2.843a.926.926 0 00-.295.678c0 .551.45 1.012 1.001 1.012z"
fill-rule="nonzero" /> fill-rule="nonzero"/>
</svg> </svg>
</div> </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()" <div id="player-pip" @click="document.querySelector('video').requestPictureInPicture()"
title="Picture-in-Picture"> title="Picture-in-Picture">
<%- include("svg/fullscreen.svg") %> <%- include("svg/fullscreen.svg") %>
@ -348,11 +355,11 @@
</div> </div>
<div id="apple-music-video-player"></div> <div id="apple-music-video-player"></div>
</div> </div>
</div> </div>
<%- include("components/mediaitem-artwork"); %> <%- include("components/mediaitem-artwork"); %>
<!-- Generic Collection of MediaItems --> <!-- Generic Collection of MediaItems -->
<script type="text/x-template" id="collection-view-generic"> <script type="text/x-template" id="collection-view-generic">
<template> <template>
<div class="content-inner"> <div class="content-inner">
@ -361,7 +368,7 @@
</template> </template>
</script> </script>
<!-- Listen Now --> <!-- Listen Now -->
<script type="text/x-template" id="cider-listen-now"> <script type="text/x-template" id="cider-listen-now">
<div class="content-inner"> <div class="content-inner">
<h1 class="header-text">Listen Now</h1> <h1 class="header-text">Listen Now</h1>
@ -388,48 +395,48 @@
</div> </div>
</script> </script>
<!-- Playlists / Albums --> <!-- Playlists / Albums -->
<%- include('pages/cider-playlist') %> <%- include('pages/cider-playlist') %>
<!-- Artist Page --> <!-- Artist Page -->
<%- include('pages/artist') %> <%- include('pages/artist') %>
<!-- Search --> <!-- Search -->
<%- include('pages/search') %> <%- include('pages/search') %>
<script type="text/x-template" id="am-musiccovershelf"> <script type="text/x-template" id="am-musiccovershelf">
<h1>{{ component.attributes.title.stringForDisplay }}</h1> <h1>{{ component.attributes.title.stringForDisplay }}</h1>
</script> </script>
<!-- Sidebar Item --> <!-- Sidebar Item -->
<script type="text/x-template" id="sidebar-library-item"> <script type="text/x-template" id="sidebar-library-item">
<button class="app-sidebar-item" <button class="app-sidebar-item"
:class="$parent.getSidebarItemClass(page)" @click="$parent.page = page"> :class="$parent.getSidebarItemClass(page)" @click="$parent.page = page">
{{ name }} {{ name }}
</button> </button>
</script> </script>
<!-- Horizontal MediaItem Scroller --> <!-- Horizontal MediaItem Scroller -->
<%- include('components/mediaitem-scroller-horizontal') %> <%- include('components/mediaitem-scroller-horizontal') %>
<!-- Horizontal MediaItem Scroller (Large) --> <!-- Horizontal MediaItem Scroller (Large) -->
<%- include('components/mediaitem-scroller-horizontal-large') %> <%- include('components/mediaitem-scroller-horizontal-large') %>
<!-- Horizontal MediaItem Scroller (SP : Special) --> <!-- Horizontal MediaItem Scroller (SP : Special) -->
<%- include('components/mediaitem-scroller-horizontal-sp') %> <%- include('components/mediaitem-scroller-horizontal-sp') %>
<!-- MediaItem List Item --> <!-- MediaItem List Item -->
<%- include('components/mediaitem-list-item') %> <%- include('components/mediaitem-list-item') %>
<!-- MediaItem Horizontal Rectangle --> <!-- MediaItem Horizontal Rectangle -->
<%- include('components/mediaitem-hrect') %> <%- include('components/mediaitem-hrect') %>
<!-- MediaItem Square --> <!-- MediaItem Square -->
<%- include('components/mediaitem-square') %> <%- include('components/mediaitem-square') %>
<!-- MediaItem Square (Large) --> <!-- MediaItem Square (Large) -->
<%- include('components/mediaitem-square-large') %> <%- include('components/mediaitem-square-large') %>
<!-- MediaItem Square SP --> <!-- MediaItem Square SP -->
<%- include('components/mediaitem-square-sp') %> <%- include('components/mediaitem-square-sp') %>
<!-- Animated Artwork View --> <!-- Animated Artwork View -->
<%- include('components/animatedartwork-view') %> <%- include('components/animatedartwork-view') %>
<!-- Lyrics View --> <!-- Lyrics View -->
<script type="text/x-template" id="lyrics-view"> <script type="text/x-template" id="lyrics-view">
<div class="md-body lyric-body"> <div class="md-body lyric-body">
<template v-if="lyrics && lyrics != []"> <template v-if="lyrics && lyrics != []">
<template v-for="(lyric, index) in lyrics" v-if="lyric.line != 'lrcInstrumental'"> <template v-for="(lyric, index) in lyrics" v-if="lyric.line != 'lrcInstrumental'">
@ -442,7 +449,8 @@
</h3> </h3>
</template> </template>
<template v-else> <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()"> :end="lyric.endTime" v-bind:line-index="index.toString()">
<div class="lyricWaiting"> <div class="lyricWaiting">
<div class='WaitingDot1'></div> <div class='WaitingDot1'></div>
@ -457,8 +465,8 @@
</template> </template>
</div> </div>
</script> </script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js"></script> <script src="https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js"></script>
<script src="index.js?v=1"></script> <script src="index.js?v=1"></script>
</body> </body>
</html> </html>