mirror of
https://github.com/IrosTheBeggar/mStream.git
synced 2025-10-27 07:31:02 +00:00
276 lines
9.6 KiB
HTML
276 lines
9.6 KiB
HTML
<head>
|
|
<!-- mStream CSS -->
|
|
<link rel="stylesheet" href="/public/css/shared.css">
|
|
<!-- Pure CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.1/build/pure-min.css" integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY" crossorigin="anonymous">
|
|
|
|
<!-- Vue JS -->
|
|
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
|
<!-- Sortable JS -->
|
|
<script src="https://unpkg.com/sortablejs@latest"></script>
|
|
<!-- https://github.com/SortableJS/Vue.Draggable - v2.6 -->
|
|
<script src="/public/js/vue-sortable.js"></script>
|
|
|
|
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/8bit-wonder" type="text/css"/>
|
|
|
|
<!--
|
|
This is the mStream Player stack
|
|
DO NOT Change to order these are loaded in
|
|
You do not need to worry about how these work
|
|
-->
|
|
<script src="/public/js/aurora.js"></script>
|
|
<script src="/public/js/flac.js"></script>
|
|
<script src="/public/js/howler.core.min.js"></script>
|
|
<script src="/public/js/mstream.player.js"></script>
|
|
<script src="/public/js/mstream.api.js"></script>
|
|
|
|
|
|
<!-- Look at this for an example of how to use the mStream Player -->
|
|
<script>
|
|
window.onload = function() {
|
|
MSTREAMAPI.getSharedPlaylist();
|
|
|
|
MSTREAM.addSong('/Darn Coyotes - See You in Hell- I Guess/Darn Coyotes - See You in Hell, I Guess - 02 We Oughtta Make Like Antelope and Split.mp3');
|
|
MSTREAM.addSong('/Darn Coyotes - See You in Hell- I Guess/Darn Coyotes - See You in Hell, I Guess - 06 We Are Not the Friends You Are Looking For.mp3');
|
|
MSTREAM.addSong('/TV Torso - Clear Lake Strangler (1)/TV Torso - Clear Lake Strangler - 02 Prismatic Ideation.flac');
|
|
MSTREAM.addSong('/Darn Coyotes - See You in Hell- I Guess/Darn Coyotes - See You in Hell, I Guess - 02 We Oughtta Make Like Antelope and Split.mp3');
|
|
MSTREAM.addSong('/Darn Coyotes - See You in Hell- I Guess/Darn Coyotes - See You in Hell, I Guess - 06 We Are Not the Friends You Are Looking For.mp3');
|
|
MSTREAM.addSong('/Darn Coyotes - See You in Hell- I Guess/Darn Coyotes - See You in Hell, I Guess - 02 We Oughtta Make Like Antelope and Split.mp3');
|
|
|
|
MSTREAM.addSong('/TV Torso - Clear Lake Strangler (1)/TV Torso - Clear Lake Strangler - 02 Prismatic Ideation.flac');
|
|
// Template for playlist items
|
|
Vue.component('playlist-item', {
|
|
template: '\
|
|
<div class="playlist-item" v-bind:class="{ playing: (this.index == positionCache.val) }" >\
|
|
<span v-on:click="goToSong($event)" class="song-area">{{ text }}</span> <span v-on:click="removeSong($event)" class="removeSong">X</div>\
|
|
</div>\
|
|
',
|
|
|
|
props: ['text', 'index'],
|
|
|
|
// We need the positionCache to track the currently playing song
|
|
data: function(){
|
|
return {
|
|
positionCache: MSTREAM.positionCache,
|
|
}
|
|
},
|
|
|
|
// Methods used by playlist item events
|
|
methods: {
|
|
// Go to a song on item click
|
|
goToSong: function(event){
|
|
MSTREAM.goToSongAtPosition(this.index);
|
|
},
|
|
// Remove song
|
|
removeSong: function(event){
|
|
MSTREAM.removeSongAtPosition(this.index, false);
|
|
}
|
|
}
|
|
});
|
|
|
|
// Code to update playlist
|
|
var playlistElement = new Vue({
|
|
el: '#playlist',
|
|
data: {
|
|
playlist: MSTREAM.playlist,
|
|
},
|
|
methods: {
|
|
// checkMove is called when a drag-and-drop action happens
|
|
checkMove: function (event) {
|
|
MSTREAM.resetPositionCache();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Code to handle Play/Pause images
|
|
var playPauseButton = new Vue({
|
|
el: '#play-pause-image',
|
|
data: {
|
|
status: MSTREAM.playerStats,
|
|
},
|
|
computed: {
|
|
imgsrc: function () {
|
|
return "/public/img/"+(this.status.playing ? 'pause' : 'play')+"-white.svg";
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
var progressBar = new Vue({
|
|
el: '#progress-bar',
|
|
data: {
|
|
playerStats: MSTREAM.playerStats,
|
|
playlist: MSTREAM.playlist,
|
|
positionCache: MSTREAM.positionCache
|
|
|
|
},
|
|
computed: {
|
|
widthcss: function ( ) {
|
|
if(this.playerStats.duration === 0){
|
|
return "width:0";
|
|
}
|
|
|
|
var totalWidth = this.$el.getBoundingClientRect().width;
|
|
var percentage = 100 - (( this.playerStats.currentTime / this.playerStats.duration) * 100);
|
|
|
|
return "width:calc(100% - "+percentage+"%)";
|
|
},
|
|
|
|
showTime: function(){
|
|
if (this.playerStats.duration === 0) {
|
|
return '';
|
|
}
|
|
|
|
var curr = this.playerStats.duration - this.playerStats.currentTime;
|
|
var minutes = Math.floor(curr / 60);
|
|
var secondsToCalc = Math.floor(curr % 60) + '';
|
|
var currentText = minutes + ':' + (secondsToCalc.length < 2 ? '0' + secondsToCalc : secondsToCalc);
|
|
|
|
return currentText;
|
|
},
|
|
|
|
currentSongText: function(){
|
|
if(this.positionCache.val === -1){
|
|
return '\u00A0\u00A0\u00A0Welcome To mStream!\u00A0\u00A0\u00A0';
|
|
}
|
|
|
|
var filepathArray = this.playlist[this.positionCache.val].filepath.split("/");
|
|
|
|
return '\u00A0\u00A0\u00A0' + filepathArray[filepathArray.length-1] + '\u00A0\u00A0\u00A0';
|
|
}
|
|
},
|
|
methods: {
|
|
goToPosition: function(event){
|
|
var relativeClickPosition = event.clientX - this.$el.getBoundingClientRect().left;
|
|
var totalWidth = this.$el.getBoundingClientRect().width;
|
|
var percentage = (relativeClickPosition / totalWidth) * 100;
|
|
// Set Player time
|
|
MSTREAM.seekByPercentage(percentage);
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
// Button Events
|
|
document.getElementById( "next-button" ).addEventListener("click",function() {
|
|
MSTREAM.nextSong();
|
|
});
|
|
document.getElementById( "play-pause-button" ).addEventListener("click", function() {
|
|
MSTREAM.playPause();
|
|
});
|
|
document.getElementById("previous-button").addEventListener("click", function(){
|
|
MSTREAM.previousSong();
|
|
});
|
|
|
|
|
|
// This makes the title text scroll back and forth
|
|
var scrollTimer;
|
|
var scrollRight = true; //Track Scroll Direction
|
|
function startTime(interval = 100) {
|
|
if (scrollTimer) { clearInterval(scrollTimer); }
|
|
|
|
scrollTimer = setInterval( function(){
|
|
// Get the max scroll distance
|
|
var maxScrollLeft = document.getElementById('title-text').scrollWidth - document.getElementById('title-text').clientWidth;
|
|
|
|
// Change the scroll direction if necessary
|
|
// TODO: Pause for a second when these conditions are hit
|
|
if(document.getElementById('title-text').scrollLeft > (maxScrollLeft - 1)){
|
|
scrollRight = false;
|
|
}
|
|
if(document.getElementById('title-text').scrollLeft === 0){
|
|
scrollRight = true;
|
|
}
|
|
|
|
// Do the scroll
|
|
if(scrollRight === true){
|
|
document.getElementById('title-text').scrollLeft = document.getElementById('title-text').scrollLeft + 2;
|
|
}else{
|
|
document.getElementById('title-text').scrollLeft = document.getElementById('title-text').scrollLeft - 1;
|
|
}
|
|
}, interval);
|
|
}
|
|
startTime(40);
|
|
|
|
|
|
|
|
// Change spacebar behviour to Play/PauseListen to every key press user makes
|
|
// Useful for adding media functionality to certain keys
|
|
window.addEventListener("keydown", function(event){
|
|
// Use default behavior if user is in a form
|
|
var element = event.target.tagName.toLowerCase();
|
|
if(element == 'input' || element == 'textarea'){
|
|
return;
|
|
}
|
|
|
|
// Check the key
|
|
switch (event.keyCode) {
|
|
case 32: //SpaceBar
|
|
event.preventDefault();
|
|
MSTREAM.playPause();
|
|
break;
|
|
}
|
|
return false;
|
|
}, false);
|
|
};
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<div class="logo-box">
|
|
<img class="mstream-image" src="/public/img/mstream-logo.svg">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Playlist Header -->
|
|
<div class="playlist-header">
|
|
<div class="playlist-header-text">Now Playing</div>
|
|
<div class="button-group">
|
|
<div class="repeat"></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Playlist -->
|
|
<div class="playlist-container">
|
|
<draggable :list="playlist" @end="checkMove" id="playlist">
|
|
<div v-for="(song, index) in playlist" is="playlist-item" :key="index" :index="index" :text="song.filepath" >
|
|
</div>
|
|
</draggable>
|
|
</div>
|
|
|
|
<!-- Controls -->
|
|
<div class="mstream-player">
|
|
<div id="previous-button" class="previous-button">
|
|
<div class="previous-border">
|
|
<img class="previous-image" src="/public/img/previous-white.svg">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="play-pause-button" class="play-pause-button">
|
|
<div id="play-pause-border" class="play-pause-border">
|
|
<img id="play-pause-image" class="play-pause-image" :src="imgsrc" >
|
|
</div>
|
|
</div>
|
|
|
|
<div id="next-button" class="next-button">
|
|
<div class="next-border">
|
|
<img class="mext-image" src="/public/img/next-white.svg">
|
|
</div>
|
|
</div>
|
|
|
|
<div v-on:click="goToPosition($event)" id="progress-bar" class="progress-bar">
|
|
<div class="titlebar" >
|
|
<div id="title-text" class="title-text">{{currentSongText}}</div>
|
|
<div class="duration-text">{{showTime}}</div>
|
|
</div>
|
|
<div class="pbar" :style="widthcss"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|