mirror of
https://github.com/janishutz/MusicPlayerV2.git
synced 2025-11-25 04:54:23 +00:00
129 lines
10 KiB
HTML
129 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MusicPlayerV2</title>
|
|
<script src="/apple-music/helpers/musickit.js"></script>
|
|
<link rel="stylesheet" href="/icon-font.css">
|
|
<link rel="stylesheet" href="/apple-music/helpers/playerStyle.css">
|
|
<link rel="stylesheet" href="/apple-music/helpers/style.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div v-if="isShowingWarning" class="warning">
|
|
<h3>WARNING!</h3>
|
|
<p>A client display is being tampered with!</p>
|
|
<p>A desktop notification with a warning has already been dispatched.</p>
|
|
<button @click="dismissNotification()">Ok</button>
|
|
|
|
<div class="flash"></div>
|
|
</div>
|
|
<div v-if="isPreparingToPlay" class="preparingToPlay">
|
|
<span class="material-symbols-outlined loading-spinner">autorenew</span>
|
|
<h1>Loading player...</h1>
|
|
</div>
|
|
<div v-if="!isLoggedIn" class="start-page">
|
|
<div class="image-wrapper">
|
|
<img src="/logo.png" alt="Music player icon" id="logo-main">
|
|
<img src="/apple-music/helpers/appleMusicIcon.svg" alt="Apple Music Icon" id="apple-music-logo">
|
|
</div>
|
|
<h1>Apple Music integration</h1>
|
|
<button @click="logInto()" class="button">Log in</button>
|
|
</div>
|
|
<div v-else class="home">
|
|
<div v-if="!hasSelectedPlaylist" class="song-list-wrapper">
|
|
<h1>Your playlists</h1>
|
|
<button class="button" @click="selectPlaylistFromDisk()">Load playlist file from disk</button>
|
|
<div v-if="!hasLoadedPlaylists" style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
|
|
<span class="material-symbols-outlined loading-spinner">autorenew</span>
|
|
<h3>Loading playlists...</h3>
|
|
</div>
|
|
<div v-for="playlist in playlists" class="song-list" @click="selectPlaylist( playlist.id )" style="cursor: pointer;">
|
|
<h3>{{ playlist.title }}</h3>
|
|
</div>
|
|
</div>
|
|
<div v-else class="home">
|
|
<div class="top-bar">
|
|
<img src="/logo.png" alt="logo" class="logo">
|
|
<audio :src="'/getSongFile?filename=' + basePath + '/' + playingSong.filename" preload="metadata" id="audio-player"></audio>
|
|
<div class="player-wrapper">
|
|
<div class="player">
|
|
<div class="controls">
|
|
<span class="material-symbols-outlined control-icon" :class="hasFinishedInit ? 'active': 'inactive'" @click="control( 'previous' )">skip_previous</span>
|
|
<span class="material-symbols-outlined control-icon" :class="hasFinishedInit ? 'active': 'inactive'" @click="control( 'replay10' )">replay_10</span>
|
|
<span class="material-symbols-outlined control-icon play-pause" v-if="!isPlaying && hasSelectedPlaylist" @click="control( 'play' )">play_arrow</span>
|
|
<span class="material-symbols-outlined control-icon play-pause" v-else-if="isPlaying && hasSelectedPlaylist" @click="control( 'pause' )">pause</span>
|
|
<span class="material-symbols-outlined control-icon play-pause" style="cursor: default;" v-else>play_disabled</span>
|
|
<span class="material-symbols-outlined control-icon" :class="hasFinishedInit ? 'active': 'inactive'" @click="control( 'forward10' )">forward_10</span>
|
|
<span class="material-symbols-outlined control-icon" :class="hasFinishedInit ? 'active': 'inactive'" @click="control( 'next' )" style="margin-right: 1vw;">skip_next</span>
|
|
<span class="material-symbols-outlined control-icon" :class="hasFinishedInit ? 'active': 'inactive'" v-if="!isShuffleEnabled" @click="control( 'shuffleOn' )">shuffle</span>
|
|
<span class="material-symbols-outlined control-icon" :class="hasFinishedInit ? 'active': 'inactive'" v-else @click="control( 'shuffleOff' )">shuffle_on</span>
|
|
<span class="material-symbols-outlined control-icon" :class="hasFinishedInit ? 'active': 'inactive'" v-if="repeatMode === 'off'" @click="control( 'repeatOne' )">repeat</span>
|
|
<span class="material-symbols-outlined control-icon" :class="hasFinishedInit ? 'active': 'inactive'" v-else-if="repeatMode === 'one'" @click="control( 'repeatAll' )">repeat_one_on</span>
|
|
<span class="material-symbols-outlined control-icon" :class="hasFinishedInit ? 'active': 'inactive'" v-else-if="repeatMode === 'all'" @click="control( 'repeatOff' )">repeat_on</span>
|
|
<span class="material-symbols-outlined control-icon" :class="hasSelectedPlaylist ? 'active': 'inactive'" @click="getAdditionalSongInfo()" title="Load additional song information" style="margin-left: 1vw;">upload</span>
|
|
<span class="material-symbols-outlined control-icon" :class="hasSelectedPlaylist ? 'active': 'inactive'" @click="exportCurrentPlaylist()" title="Export current playlist" style="margin-right: 1vw;">ios_share</span>
|
|
<div class="control-icon" id="settings">
|
|
<span class="material-symbols-outlined">info</span>
|
|
<div id="showIP">
|
|
<h4>IP to connect to:</h4><br>
|
|
<p>{{ localIP }}:8081</p>
|
|
</div>
|
|
</div>
|
|
<button @click="search()">S</button>
|
|
</div>
|
|
<div class="song-info">
|
|
<div class="song-info-wrapper">
|
|
<img v-if="hasFinishedInit" :src="playingSong.coverArtURL" class="image">
|
|
<span class="material-symbols-outlined image" v-else>music_note</span>
|
|
<div class="name">
|
|
<h3>{{ playingSong.title ?? 'No song selected' }}</h3>
|
|
<p>{{ playingSong.artist }}</p>
|
|
</div>
|
|
<div class="image"></div>
|
|
</div>
|
|
<div class="playback-pos-info">
|
|
<div style="margin-right: auto;">{{ playbackPosBeautified }}</div>
|
|
<div @click="toggleShowMode()" style="cursor: pointer;">{{ durationBeautified }}</div>
|
|
</div>
|
|
<div class="slider">
|
|
<progress id="progress-slider" class="progress-slider" :value="sliderProgress" max="1000" @mousedown="( e ) => { setPos( e ) }"
|
|
:class="hasFinishedInit ? '' : 'slider-inactive'"></progress>
|
|
<div v-if="hasFinishedInit" id="slider-knob" @mousedown="( e ) => { startMove( e ) }"
|
|
:style="'left: ' + ( parseInt( originalPos ) + parseInt( sliderPos ) ) + 'px;'">
|
|
<div id="slider-knob-style"></div>
|
|
</div>
|
|
<div v-else id="slider-knob" class="slider-inactive" style="left: 0;">
|
|
<div id="slider-knob-style"></div>
|
|
</div>
|
|
<div id="drag-support" @mousemove="e => { handleDrag( e ) }" @mouseup="() => { stopMove(); }"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pool-wrapper">
|
|
<div style="width: 100%;" class="song-list-wrapper">
|
|
<div v-for="song in songQueue" class="song-list" :class="[ isPlaying ? ( playingSong.queuePos == song.queuePos ? 'playing': 'not-playing' ) : 'not-playing', !isPlaying && playingSong.filename === song.filename ? 'active-song': undefined ]">
|
|
<img :src="song.coverArtURL" class="song-image">
|
|
<div v-if="playingSong.queuePos == song.queuePos && isPlaying" class="playing-symbols">
|
|
<div class="playing-symbols-wrapper">
|
|
<div class="playing-bar" id="bar-1"></div>
|
|
<div class="playing-bar" id="bar-2"></div>
|
|
<div class="playing-bar" id="bar-3"></div>
|
|
</div>
|
|
</div>
|
|
<span class="material-symbols-outlined play-icon" @click="play( song )">play_arrow</span>
|
|
<span class="material-symbols-outlined pause-icon" @click="control( 'pause' )">pause</span>
|
|
<h3>{{ song.title }}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
<script src="/apple-music/helpers/index.js"></script>
|
|
</body>
|
|
</html> |