less jank song-progress bar
This commit is contained in:
booploops
parent
43a50625a1
commit
4e7e28ef07
3 changed files with 374 additions and 352 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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%)
|
||||
|
|
|
|||
|
|
@ -2,20 +2,20 @@
|
|||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<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://is1-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://is4-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://aod-ssl.itunes.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://is1-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://is4-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://aod-ssl.itunes.apple.com/" crossorigin/>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
<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="vue.js"></script>
|
||||
<script src="sortable.min.js"></script>
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
</head>
|
||||
|
||||
<body oncontextmenu="return false;" loading="1" platform="<%= env.platform %>">
|
||||
<div id="app">
|
||||
<div id="app">
|
||||
<div id="app-main">
|
||||
<div class="mv-chrome" v-if="chrome.topChromeVisible == false"></div>
|
||||
<div class="app-chrome" :style="{'display': chrome.topChromeVisible ? '' : 'none'}">
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
<div class="app-chrome-item playback-controls">
|
||||
<template v-if="mkReady()">
|
||||
<div class="app-playback-controls">
|
||||
<div class="artwork" ></div>
|
||||
<div class="artwork"></div>
|
||||
<div class="playback-info">
|
||||
<div class="song-name">
|
||||
{{ mk.nowPlayingItem["attributes"]["name"] }}
|
||||
|
|
@ -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,13 +172,14 @@
|
|||
</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">
|
||||
<template v-if="chrome.userinfo.attributes">
|
||||
<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>
|
||||
|
||||
<div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
|
||||
|
|
@ -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">
|
||||
|
|
@ -333,10 +338,12 @@
|
|||
aria-role="presentation" focusable="false">
|
||||
<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"
|
||||
fill-rule="nonzero" />
|
||||
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") %>
|
||||
|
|
@ -348,11 +355,11 @@
|
|||
</div>
|
||||
<div id="apple-music-video-player"></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">
|
||||
<template>
|
||||
<div class="content-inner">
|
||||
|
|
@ -361,7 +368,7 @@
|
|||
</template>
|
||||
</script>
|
||||
|
||||
<!-- Listen Now -->
|
||||
<!-- Listen Now -->
|
||||
<script type="text/x-template" id="cider-listen-now">
|
||||
<div class="content-inner">
|
||||
<h1 class="header-text">Listen Now</h1>
|
||||
|
|
@ -388,48 +395,48 @@
|
|||
</div>
|
||||
</script>
|
||||
|
||||
<!-- Playlists / Albums -->
|
||||
<%- include('pages/cider-playlist') %>
|
||||
<!-- Playlists / Albums -->
|
||||
<%- include('pages/cider-playlist') %>
|
||||
|
||||
<!-- Artist Page -->
|
||||
<%- include('pages/artist') %>
|
||||
<!-- Artist Page -->
|
||||
<%- include('pages/artist') %>
|
||||
|
||||
<!-- Search -->
|
||||
<%- include('pages/search') %>
|
||||
<!-- 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>
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<!-- Sidebar Item -->
|
||||
<script type="text/x-template" id="sidebar-library-item">
|
||||
<!-- Sidebar Item -->
|
||||
<script type="text/x-template" id="sidebar-library-item">
|
||||
<button class="app-sidebar-item"
|
||||
:class="$parent.getSidebarItemClass(page)" @click="$parent.page = page">
|
||||
{{ name }}
|
||||
</button>
|
||||
</script>
|
||||
|
||||
<!-- Horizontal MediaItem Scroller -->
|
||||
<%- include('components/mediaitem-scroller-horizontal') %>
|
||||
<!-- Horizontal MediaItem Scroller (Large) -->
|
||||
<%- include('components/mediaitem-scroller-horizontal-large') %>
|
||||
<!-- Horizontal MediaItem Scroller (SP : Special) -->
|
||||
<%- include('components/mediaitem-scroller-horizontal-sp') %>
|
||||
<!-- MediaItem List Item -->
|
||||
<%- include('components/mediaitem-list-item') %>
|
||||
<!-- MediaItem Horizontal Rectangle -->
|
||||
<%- include('components/mediaitem-hrect') %>
|
||||
<!-- MediaItem Square -->
|
||||
<%- include('components/mediaitem-square') %>
|
||||
<!-- MediaItem Square (Large) -->
|
||||
<%- include('components/mediaitem-square-large') %>
|
||||
<!-- MediaItem Square SP -->
|
||||
<%- include('components/mediaitem-square-sp') %>
|
||||
<!-- Animated Artwork View -->
|
||||
<%- include('components/animatedartwork-view') %>
|
||||
<!-- Horizontal MediaItem Scroller -->
|
||||
<%- include('components/mediaitem-scroller-horizontal') %>
|
||||
<!-- Horizontal MediaItem Scroller (Large) -->
|
||||
<%- include('components/mediaitem-scroller-horizontal-large') %>
|
||||
<!-- Horizontal MediaItem Scroller (SP : Special) -->
|
||||
<%- include('components/mediaitem-scroller-horizontal-sp') %>
|
||||
<!-- MediaItem List Item -->
|
||||
<%- include('components/mediaitem-list-item') %>
|
||||
<!-- MediaItem Horizontal Rectangle -->
|
||||
<%- include('components/mediaitem-hrect') %>
|
||||
<!-- MediaItem Square -->
|
||||
<%- include('components/mediaitem-square') %>
|
||||
<!-- MediaItem Square (Large) -->
|
||||
<%- include('components/mediaitem-square-large') %>
|
||||
<!-- MediaItem Square SP -->
|
||||
<%- include('components/mediaitem-square-sp') %>
|
||||
<!-- Animated Artwork View -->
|
||||
<%- include('components/animatedartwork-view') %>
|
||||
|
||||
<!-- Lyrics View -->
|
||||
<script type="text/x-template" id="lyrics-view">
|
||||
<!-- Lyrics View -->
|
||||
<script type="text/x-template" id="lyrics-view">
|
||||
<div class="md-body lyric-body">
|
||||
<template v-if="lyrics && lyrics != []">
|
||||
<template v-for="(lyric, index) in lyrics" v-if="lyric.line != 'lrcInstrumental'">
|
||||
|
|
@ -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>
|
||||
|
|
@ -457,8 +465,8 @@
|
|||
</template>
|
||||
</div>
|
||||
</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="index.js?v=1"></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="index.js?v=1"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue