WebPlay/client
1
1
Fork 0
Code Issues 10 Pull Requests Packages Projects Releases Wiki Activity

main #19

Merged
artem merged 39 commits from main into dev 2023-09-22 14:13:12 +02:00
Conversation 0 Commits 39 Files Changed 36 +29 -76
1 changed files with 29 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ec9c9858f6 - Show all commits

103
src/components/Player.vue
View File

@ -1,26 +1,9 @@
<template>
<div
id="player"
class="flex-column"
v-show="selectedTrack._id || selectedRadio._id"
>
<input
type="range"
id="slider"
min="0"
max="100"
step="0.1"
v-model="selectedTrack.percent"
@change="slideChanged"
/>
<div id="player" class="flex-column" v-show="selectedTrack._id || selectedRadio._id">
<input type="range" id="slider" min="0" max="100" step="0.1" v-model="selectedTrack.percent" @change="slideChanged" />
<div id="playerBar" class="flex-row">
<div class="flex-row grow">
<img
class="cover pointer"
:src="cover"
:title="selectedTrack.parent.title"
@click="gotoContainer"
/>
<img class="cover pointer" :src="cover" :title="selectedTrack.parent.title" @click="gotoContainer" />
<div v-if="selectedTrack._id" class="flex-column">
<b>{{ selectedTrack.title }}</b>
from
@ -28,21 +11,9 @@
</div>
</div>
<div id="playerControls" class="flex-row center">
<button
@click="switchShuffle"
title="Shuffle mode"
v-if="selectedTrack._id"
>
<img
src="static/icons/media-shuffle-dark.svg"
v-show="$store.getters['player/shuffle']"
class="small"
/>
<img
src="static/icons/media-consecutive-dark.svg"
v-show="$store.getters['player/shuffle'] == false"
class="small"
/>
<button @click="switchShuffle" title="Shuffle mode" v-if="selectedTrack._id">
<img src="static/icons/media-shuffle-dark.svg" v-show="$store.getters['player/shuffle']" class="small" />
<img src="static/icons/media-consecutive-dark.svg" v-show="$store.getters['player/shuffle'] == false" class="small" />
</button>
<button @click="prevTrack" title="Back" v-if="selectedTrack._id">
<awesome-icon icon="backward" />
@ -54,46 +25,17 @@
<button @click="nextTrack" title="Forward" v-if="selectedTrack._id">
<awesome-icon icon="forward" />
</button>
<button
@click="switchRepeatType"
title="Repeat mode"
v-if="selectedTrack._id"
>
<img
src="static/icons/media-repeat-dark.svg"
class="small"
v-show="$store.getters['player/repeatType'] == 'all'"
/>
<img
src="static/icons/media-repeat-song-dark.svg"
class="small"
v-show="$store.getters['player/repeatType'] == 'one'"
/>
<img
src="static/icons/media-no-repeat-dark.svg"
class="small"
v-show="$store.getters['player/repeatType'] == 'none'"
/>
<button @click="switchRepeatType" title="Repeat mode" v-if="selectedTrack._id">
<img src="static/icons/media-repeat-dark.svg" class="small" v-show="$store.getters['player/repeatType'] == 'all'" />
<img src="static/icons/media-repeat-song-dark.svg" class="small" v-show="$store.getters['player/repeatType'] == 'one'" />
<img src="static/icons/media-no-repeat-dark.svg" class="small" v-show="$store.getters['player/repeatType'] == 'none'" />
</button>
</div>
<div
class="flex-row ma-right hideOnMobilePortrait grow right"
v-show="selectedTrack.title"
>
<div class="flex-row ma-right hideOnMobilePortrait grow right" v-show="selectedTrack.title">
{{ formatedP }}&nbsp;|&nbsp;{{ formatedD }}
</div>
</div>
<audio
preload="auto"
ref="audioControl"
type="audio/mpeg"
@ended="nextTrack"
@canplay="play"
@playing="playing"
@durationchange="durationChanged"
@timeupdate="timeUpdate"
src
></audio>
<audio preload="auto" ref="audioControl" type="audio/mpeg" @ended="nextTrack" @canplay="play" @playing="playing" @durationchange="durationChanged" @timeupdate="timeUpdate" src></audio>
</div>
</template>
@ -105,7 +47,8 @@ export default {
audio: {},
duration: 0,
progress: 0,
interval: 0,
intervalProgress: 0,
intervalHistory: 0,
preConvert: false,
};
},
@ -121,7 +64,6 @@ export default {
play() {
this.audio.play();
},
pause() {
if (!this.audio.paused) {
this.audio.pause();
@ -131,11 +73,17 @@ export default {
this.duration = this.audio.duration;
},
playing() {
window.clearInterval(this.interval);
this.interval = setInterval(() => {
window.clearInterval(this.intervalProgress);
window.clearInterval(this.intervalHistory);
this.intervalProgress = setInterval(() => {
this.progress = this.audio.currentTime;
this.selectedTrack.percent = (100 / this.duration) * this.progress;
}, 500);
this.intervalHistory = setInterval(() => {
console.log(this.selectedTrack);
}, 10000);
},
audioReset() {
this.audio.pause();
@ -238,7 +186,8 @@ export default {
}
},
reset() {
window.clearInterval(this.interval);
window.clearInterval(this.intervalProgress);
window.clearInterval(this.intervalHistory);
if (!this.audio.paused) {
this.audio.pause();
}
@ -409,17 +358,21 @@ export default {
z-index: 1001;
box-shadow: 0 0px 4px var(--shadow);
}
#player .cover {
width: 52px;
margin-right: 4px;
}
#playerBar {
overflow: hidden;
max-height: 52px;
}
#playerBar>div {
align-items: center;
}
#playerControls button {
display: flex;
padding: 4px 12px;