mirrors/mStream
3
0
Fork 0
mirror of https://github.com/IrosTheBeggar/mStream.git synced 2025-10-27 07:31:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Lots of frontend work

Browse Source
This commit is contained in:
IrosTheBeggar 2017-02-08 14:28:27 -05:00
parent 70807ce3e1
commit bbf3eb8da8
13 changed files with 332 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
public/css/master.css
View File

@ -250,16 +250,7 @@ ul.jp-controls li {
.noPaddingLeft {
padding-left: 0 !important; }
.jplay {
position: fixed;
bottom: 0;
width: 100%; }
.jp-audio {
width: 100% !important;
position: fixed;
bottom: 0;
left: 0; }
h3 {
padding: 10px 10px 0;
@ -300,18 +291,7 @@ h3 {
margin: 0;
max-width: none; }
.scraper {
padding: 5px;
background: #F5F5F5;
border: solid 1px #EEE;
overflow: hidden;
border-radius: 3px; }
.scraper label {
color: #6666ff;
float: right;
margin: 0; }
.scraper input {
margin: 0 5px 0 0; }
.closeit {
float: right;
@ -337,21 +317,8 @@ h3 {
margin-left: -20px;
margin-top: 8px; } }
.jp-current-time {
position: relative;
left: 110px;
top: 10px; }
.jp-duration {
position: relative;
right: 110px;
top: 10px; }
.play1 {
display: block;
padding: 10px;
width: calc(100% - 29px);
float: left; }
@media (min-width: 644px) {
.content {
@ -449,3 +416,10 @@ h3 {
display: block;
margin: auto;
}
.mstream-player{
position:fixed;
bottom:0;
}

92
public/css/mstream-player.css
View File

@ -3,8 +3,6 @@
.mstream-player{
position:absolute;
bottom:0;
width:100%;
height: 50px;
overflow: hidden;
@ -18,10 +16,11 @@
background-color: #333333;
float:left;
overflow:hidden;
box-shadow: 5px 0 8px -2px rgba(31, 73, 125, 0.8), -5px 0 8px -2px rgba(31, 73, 125, 0.8);
/*box-shadow: 5px 0 8px -2px rgba(31, 73, 125, 0.8), -5px 0 8px -2px rgba(31, 73, 125, 0.8);*/
cursor:pointer;
}
.play-pause-button{
position: relative;
height: 100%;
width:50px;
background-color: rgb(102, 132, 178);
@ -29,20 +28,7 @@
overflow:hidden;
cursor:pointer;
}
.next-border{
height: 100%;
padding: 8px;
}
.previous-border{
height: 100%;
padding: 8px;
}
.play-pause-border{
border-left: 5px solid rgb(102, 132, 178);
border-top: 5px solid rgb(102, 132, 178);
height: 100%;
padding: 3px;
}
.next-button{
height: 100%;
width:50px;
@ -50,18 +36,37 @@
float:left;
position: relative;
overflow:hidden;
box-shadow: 5px 0 8px -2px rgba(31, 73, 125, 0.8), -5px 0 8px -2px rgba(31, 73, 125, 0.8);
box-shadow: 5px 0 8px -2px rgba(31, 73, 125, 0.8)/*, -5px 0 8px -2px rgba(31, 73, 125, 0.8)*/;
cursor:pointer;
z-index:9;
}
.center{
top:50%;
left:50%;
position: absolute;
transform: translate(-50%, -50%);
}
.progress-bar{
height: 100%;
width: calc(100% - 152px);
width: calc(100% - 230px);
background-color: rgba(51,51,51,.15);
float:left;
overflow-x: hidden;
border-right: 2px solid rgba(51,51,51,.15);
cursor: crosshair;
}
.right-group{
height: 100%;
position:relative;
width:78px;
background-color: #333333;
float:left;
overflow:hidden;
box-shadow: 5px 0 8px -2px rgba(31, 73, 125, 0.8), -5px 0 8px -2px rgba(31, 73, 125, 0.8);
cursor:pointer;
}
.removeSong{
@ -96,13 +101,10 @@
.titlebar{
height: 50%;
width:calc(100% - 190px);
background-color: rgba(255, 255, 255,0.7);
width:calc(100% - 225px);
background-color: rgba(255, 255, 255,0.75);
position: absolute;
margin-top: 10px;
border-radius: 5px;
box-shadow: 3px 3px 3px #888888;
margin-left: 20px;
overflow-y: hidden;
white-space: nowrap; /* This is the secret to make text scroll left-to-right*/
@ -118,15 +120,15 @@
.title-text{
width: calc(100% - 100px);
width: 100%;
float:left;
font-family: '8BITWONDERNominal';
font-weight: normal;
font-style: normal;
margin-top: 3px;
margin-left: 2px;
padding-bottom: 17px; /* This pushes the scr */
overflow-x: scroll;
@ -135,7 +137,8 @@
.duration-text{
float: right;
width: 90px;
width: 75px;
color: white;
font-family: '8BITWONDERNominal';
font-weight: normal;
font-style: normal;
@ -143,3 +146,38 @@
text-align: right;
margin-right: 5px;
}
.aux-button-group{
position:absolute;
bottom:0;
margin-left:10px;
}
.shuffle-button{
margin-left: 3px;
}
svg {
display:inline-block;
vertical-align: middle;
height:auto;
max-width: 100%;
}
.repeat-button{
transition: .15s;
}
.repeat-button{ fill: rgb(255, 255, 255);}
.repeat-button:hover { fill: rgb(102, 132, 178); }
.shuffle-button{
fill:black;
}
.aux-button-active{
fill:rgb(102, 132, 178);
}

40
public/css/remote.css
View File

@ -50,7 +50,7 @@ body{
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}
#browser{
.browser{
list-style: none;
padding: 0;
overflow-y: scroll;
@ -58,7 +58,7 @@ body{
}
.browser-tools{
height:0px;
height:40px;
}
.browser-item{
@ -79,3 +79,39 @@ body{
.browser-item:hover{
background-color: #F5F5F5;
}
.login-icon{
max-height: 150px;
padding-top: 60px;
}
.login-form{
padding-top: 20px;
}
button{
background-color: #2ba6cb;
border-color: #2795b6;
padding-left: 2rem;
padding-right: 2rem;
padding-top: 1rem;
padding-bottom: 1rem;
color:white;
border: none;
}
#login-submit{
color: white;
margin-top: 1rem;
}
input{
width: 100%;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
}
label{
padding-bottom: 5px;
display: block;
}

5
public/css/shared.css
View File

@ -74,3 +74,8 @@ body{
.playlist-item:hover{
background-color: #F5F5F5;
}
.mstream-player{
position:absolute;
bottom:0;
}

BIN
public/img/loading.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

3
public/img/repeat-white.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="25" height="25">
<path d="M 17 2 L 17 5 L 6 5 C 4.3 5 3 6.3 3 8 L 3 14.8125 L 5 13.1875 L 5 8 C 5 7.4 5.4 7 6 7 L 17 7 L 17 10 L 22 6 L 17 2 z M 21 9.1875 L 19 10.8125 L 19 16 C 19 16.6 18.6 17 18 17 L 7 17 L 7 14 L 2 18 L 7 22 L 7 19 L 18 19 C 19.7 19 21 17.7 21 16 L 21 9.1875 z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 408 B

3
public/img/shuffle-white.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="25" height="25" style="fill: rgb(255, 255, 255);">
<path d="M 17 2 L 17 5 L 14.1875 5 C 13.0875 5 12 5.5875 11.5 6.6875 L 6.59375 16.5 C 6.49375 16.8 6.1125 17 5.8125 17 L 2 17 L 2 19 L 5.8125 19 C 6.9125 19 8 18.4125 8.5 17.3125 L 13.40625 7.5 C 13.50625 7.2 13.8875 7 14.1875 7 L 17 7 L 17 10 L 22 6 L 17 2 z M 2 5 L 2 7 L 5.8125 7 C 6.1125 7 6.4875 7.19375 6.6875 7.59375 L 8.40625 10.90625 L 9.5 8.6875 L 8.5 6.6875 C 7.9 5.5875 6.9125 5 5.8125 5 L 2 5 z M 11.59375 13.09375 L 10.5 15.3125 L 11.5 17.3125 C 12 18.3125 12.9875 19 14.1875 19 L 17 19 L 17 22 L 22 18 L 17 14 L 17 17 L 14.1875 17 C 13.8875 17 13.5125 16.80625 13.3125 16.40625 L 11.59375 13.09375 z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 792 B

79
public/js/mstream.js
View File

@ -12,17 +12,16 @@ $(document).ready(function(){
};
// The jukebox panel
$('#jukebox_mode').on('click', function(){
// Hide the directory bar
$('.directoryTitle').hide();
// Change the panel name
$('.panel_one_name').html('Jukebox Mode');
// clear the list
$('#filelist').empty();
$('#filelist').removeClass('scrollBoxHeight1');
$('#filelist').removeClass('scrollBoxHeight2');
$('#filelist').addClass('scrollBoxHeight2');
function setupJukeboxPanel(){
// Hide the directory bar
$('.directoryTitle').hide();
// Change the panel name
$('.panel_one_name').html('Jukebox Mode');
// clear the list
$('#filelist').empty();
$('#filelist').removeClass('scrollBoxHeight1');
$('#filelist').removeClass('scrollBoxHeight2');
$('#filelist').addClass('scrollBoxHeight2');
// TODO: Check if connection has been established
// setup correct html
@ -33,30 +32,31 @@ $(document).ready(function(){
}else{
newHtml = '\
<p class="jukebox-panel">\
Jukebox Mode will allow you to control this page of mStream remotely <br><br>\
Click the button to enable Jukebox Mode <br>\
<br><br>\
<h3>Jukebox Mode allows you to control this page remotely<h3> <br><br>\
<div class="jukebox_connect button"> CONNECT IT!</div>\
</p>';
</p>\
<img src="public/img/loading.gif" class="hide jukebox-loading">';
}
// Add the content
$('#filelist').html(newHtml);
}
// The jukebox panel
$('#jukebox_mode').on('click', function(){
setupJukeboxPanel();
});
// Build the database
// Setup Jukebox
$('body').on('click', '.jukebox_connect', function(){
$(this).prop("disabled", true);
$(this).hide();
$('.jukebox-loading').toggleClass('hide');
createWebsocket();
// Wait a while and display the status
setTimeout(function(){
// TODO: Check that status has changed
createJukeboxPanel();
},800);
});
@ -70,16 +70,17 @@ $(document).ready(function(){
}
if(jukebox.adminCode){
returnHtml += '<div>Code: ' + jukebox.adminCode + '</div>';
returnHtml += '<h1>Code: ' + jukebox.adminCode + '</h1>';
}
if(jukebox.guestCode){
returnHtml += '<div>Guest Code: ' + jukebox.guestCode + '</div>\
<div>Hide Admin Code / Lock</div>';
}else{
returnHtml += '<div class="jukebox_create_guest button"> Create Guest Account</div>';
returnHtml += '<h2>Guest Code: ' + jukebox.guestCode + '</h2>';
}
var l = window.location;
var adrs = l.protocol + '//' + l.host + '/remote';
returnHtml += '<br><h4>Remote Jukebox Controls: <a target="_blank" href="' + adrs + '"> ' + adrs + '</a><h4>';
returnHtml += '</p>';
return returnHtml;
}
@ -105,12 +106,22 @@ $(document).ready(function(){
// TODO: Get proper url
// open connection
jukebox.connection = new WebSocket('ws://localhost:3031/jukebox/open-connection?token=' + accessKey);
var l = window.location;
var wsLink = ((l.protocol === "https:") ? "wss://" : "ws://") + l.host + l.pathname;
console.log(wsLink);
jukebox.connection = new WebSocket(wsLink + 'jukebox/open-connection?token=' + accessKey);
jukebox.connection.onopen = function () {
console.log('CONNECTION OPENNED');
// Wait a while and display the status
// TODO: There's gotta be a better way to do this using vue
setTimeout(function(){
// TODO: Check that status has changed
setupJukeboxPanel();
},1800);
};
jukebox.connection.onerror = function (error) {
@ -146,6 +157,16 @@ $(document).ready(function(){
if( json.command && json.command && json.command === 'next'){
console.log('NEXTTTTTTTTTTTTTTTTTTTTTT')
MSTREAM.nextSong();
return;
}
if( json.command && json.command && json.command === 'playPause'){
console.log('PLAY PAUSE')
MSTREAM.playPause();
}
if( json.command && json.command && json.command === 'previous'){
console.log('PREVIOUSSSSSSSSSS')
MSTREAM.previousSong();
return;
}
};
}

67
public/js/mstream.player.js
View File

@ -10,26 +10,6 @@ var MSTREAM = (function () {
mstreamModule.playlist = [];
// Loop
var shouldLoop = false;
mstreamModule.setLoop = function(newValue){
if(typeof(newValue) != "boolean"){
return false;
}
shouldLoop = newValue;
return true;
}
// Random Song
var randomSong = false;
randomSongCache = []; // Cache the last 5 songs played to avoid repeats
mstreamModule.setRandom = function(newValue){
if(typeof(newValue) != "boolean"){
return false;
}
randomSong = newValue;
return true;
}
// var song = {
// "filepath":"path/to/song",
@ -177,8 +157,10 @@ var MSTREAM = (function () {
// Check if the next song exists
if(!mstreamModule.playlist[mstreamModule.positionCache.val + 1]){
console.log(mstreamModule.playerStats.shouldLoop);
// If loop is set and no other song, go back to first song
if(shouldLoop === true && mstreamModule.playlist.length > 0){
if(mstreamModule.playerStats.shouldLoop === true && mstreamModule.playlist.length > 0){
mstreamModule.positionCache.val = 0;
return goToSong(mstreamModule.positionCache.val);
@ -248,17 +230,13 @@ var MSTREAM = (function () {
// Song is cached
if(otherPlayerObject.songObject === mstreamModule.playlist[position]){
console.log('USING CACHED SONG');
// console.log('USING CACHED SONG');
flipFlop();
// Play
mstreamModule.playPause();
}else{
console.log('DID NOT USE CACHE');
console.log(otherPlayerObject.songObject);
console.log(mstreamModule.playlist[position]);
// console.log('DID NOT USE CACHE');
setMedia(mstreamModule.playlist[position], localPlayerObject, true);
}
@ -405,7 +383,9 @@ var MSTREAM = (function () {
mstreamModule.playerStats = {
duration:0,
currentTime:0,
playing: false
playing: false,
repeat: false,
shuffle:false
}
var playerA = {
@ -578,6 +558,37 @@ mstreamModule.seekByPercentage = function(percentage){
}
// Loop
mstreamModule.playerStats.shouldLoop = false;
mstreamModule.setRepeat = function(newValue){
if(typeof(newValue) != "boolean"){
return false;
}
mstreamModule.playerStats.shouldLoop = newValue;
return newValue;
}
mstreamModule.toggleRepeat = function(){
mstreamModule.playerStats.shouldLoop = !mstreamModule.playerStats.shouldLoop;
return mstreamModule.playerStats.shouldLoop;
}
// Random Song
// TODO: Shuffle currently doesn't do anything
mstreamModule.playerStats.shuffle = false;
shuffleCache = []; // Cache the last 5 songs played to avoid repeats
mstreamModule.setShuffle = function(newValue){
if(typeof(newValue) != "boolean"){
return false;
}
mstreamModule.playerStats.shuffle = newValue;
return true;
}
mstreamModule.toggleShuffle = function(newValue){
mstreamModule.playerStats.shuffle = !mstreamModule.playerStats.shuffle;
return mstreamModule.playerStats.shuffle;
}
// Return an object that is assigned to Module
return mstreamModule;
}());

31
public/js/mstream.vue-player-controls.js
View File

@ -44,22 +44,9 @@ var VUEPLAYER = function() {
}
});
// 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',
el: '#mstream-player',
data: {
playerStats: MSTREAM.playerStats,
playlist: MSTREAM.playlist,
@ -67,14 +54,15 @@ var VUEPLAYER = function() {
},
computed: {
imgsrc: function () {
return "/public/img/"+(this.playerStats.playing ? 'pause' : 'play')+"-white.svg";
},
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+"%)";
},
@ -111,11 +99,19 @@ var VUEPLAYER = function() {
},
methods: {
goToPosition: function(event){
console.log(event.target);
console.log(this.$el);
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);
},
toggleRepeat: function(){
MSTREAM.toggleRepeat();
},
toggleShuffle: function(){
MSTREAM.toggleShuffle();
}
}
});
@ -132,7 +128,6 @@ var VUEPLAYER = function() {
MSTREAM.previousSong();
});
// This makes the title text scroll back and forth
var scrollTimer;
var scrollRight = true; //Track Scroll Direction

61
public/mstream.html
View File

@ -256,40 +256,45 @@
</div>
<!-- /row -->
<!-- Media Player -->
<div class="jplay col">
<div class="row">
<div id="jp_container_1" class="jp-audio">
<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>
<!-- Media Player
This section is tied into the MSTREAMPLAYER mmodule with Vue
see file: mstream.vue-player-controls.js -->
<div id="mstream-player" class="mstream-player">
<div id="previous-button" class="previous-button">
<img class="previous-image center" src="/public/img/previous-white.svg">
</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="play-pause-button" class="play-pause-button">
<img id="play-pause-image" class="play-pause-image center" :src="imgsrc">
</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 id="next-button" class="next-button">
<img class="mext-image center" src="/public/img/next-white.svg">
</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>
<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>
<div class="pbar" :style="widthcss"></div>
</div>
<div class="right-group">
<div class="duration-text">{{showTime}}</div>
<div class="aux-button-group">
<!-- For precise control we have to have the svg code embedded in the html -->
<svg v-on:click="toggleRepeat" v-bind:class="{ 'aux-button-active': playerStats.shouldLoop }" class="repeat-button" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="25" height="25">
<path d="M 17 2 L 17 5 L 6 5 C 4.3 5 3 6.3 3 8 L 3 14.8125 L 5 13.1875 L 5 8 C 5 7.4 5.4 7 6 7 L 17 7 L 17 10 L 22 6 L 17 2 z M 21 9.1875 L 19 10.8125 L 19 16 C 19 16.6 18.6 17 18 17 L 7 17 L 7 14 L 2 18 L 7 22 L 7 19 L 18 19 C 19.7 19 21 17.7 21 16 L 21 9.1875 z"/>
</svg>
<!-- <img v-on:click="toggleRepeat" v-bind:class="{ 'aux-button-active': playerStats.shouldLoop }" class="repeat-button" src="/public/img/repeat-white.svg"> -->
<!-- <img class="shuffle-button" src="/public/img/shuffle-white.svg"> -->
<svg class="shuffle-button" v-on:click="toggleShuffle" v-bind:class="{ 'aux-button-active': playerStats.shuffle }" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="25" height="25" >
<path d="M 17 2 L 17 5 L 14.1875 5 C 13.0875 5 12 5.5875 11.5 6.6875 L 6.59375 16.5 C 6.49375 16.8 6.1125 17 5.8125 17 L 2 17 L 2 19 L 5.8125 19 C 6.9125 19 8 18.4125 8.5 17.3125 L 13.40625 7.5 C 13.50625 7.2 13.8875 7 14.1875 7 L 17 7 L 17 10 L 22 6 L 17 2 z M 2 5 L 2 7 L 5.8125 7 C 6.1125 7 6.4875 7.19375 6.6875 7.59375 L 8.40625 10.90625 L 9.5 8.6875 L 8.5 6.6875 C 7.9 5.5875 6.9125 5 5.8125 5 L 2 5 z M 11.59375 13.09375 L 10.5 15.3125 L 11.5 17.3125 C 12 18.3125 12.9875 19 14.1875 19 L 17 19 L 17 22 L 22 18 L 17 14 L 17 17 L 14.1875 17 C 13.8875 17 13.5125 16.80625 13.3125 16.40625 L 11.59375 13.09375 z"/>
</svg>
</div>
</div>
</div>

80
public/remote.html
View File

@ -1,4 +1,21 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta content="yes" name="mobile-web-app-capable">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<link rel="apple-touch-icon" href="/public/img/apple-icon/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="76x76" href="/public/img/apple-icon/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="120x120" href="/public/img/apple-icon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/public/img/apple-icon/apple-touch-icon-152x152.png">
<link rel="shortcut icon" sizes="120x120" href="/public/img/apple-icon/apple-touch-icon-120x120.png">
<link rel="shortcut icon" type="image/png" href="/public/favicon.png" />
<title>mStream Media Player - All your media. Everywhere you go.</title>
<!-- mStream CSS -->
<link rel="stylesheet" href="/public/css/remote.css">
<!-- Pure CSS -->
@ -30,7 +47,7 @@
.previous-button{
position:relative;
height: 100%;
width:50px;
width:34%;
background-color: #333333;
float:left;
overflow:hidden;
@ -39,7 +56,7 @@
}
.play-pause-button{
height: 100%;
width:50px;
width:33%;
background-color: rgb(102, 132, 178);
float:left;
overflow:hidden;
@ -61,7 +78,7 @@
}
.next-button{
height: 100%;
width:50px;
width:33%;
background-color: #333333;
float:left;
position: relative;
@ -71,6 +88,12 @@
}
.center{
top:50%;
left:50%;
position: absolute;
transform: translate(-50%, -50%);
}
@ -113,6 +136,14 @@
token: false
};
// Auto Focus
Vue.directive('focus', {
// When the bound element is inserted into the DOM...
inserted: function (el) {
// Focus the element
el.focus()
}
})
window.onload = function(){
$.ajaxPrefilter(function( options ) {
@ -121,6 +152,9 @@
}
});
// TODO: Handle guest controls
@ -169,8 +203,12 @@
$('#next-button').on('click', function(){
sendCommandToServer('next');
});
$('#play-pause-button').on('click', function(){
sendCommandToServer('playPause');
});
$('#previous-button').on('click', function(){
sendCommandToServer('previous');
});
@ -179,15 +217,8 @@
data: {
remote: remoteProperties,
},
computed: {
titleText: function(){
// FIXME: Temp workaround
return 'TITLE GOES HERE';
}
},
methods: {
submitCode: function(e){
console.log('FORM SUBMIT');
// Get Code
var loginCode = $('#login-code').val();
@ -201,7 +232,6 @@
request.done(function( msg ) {
// var parsedMessage = $.parseJSON(msg);
console.log(msg.status);
if(msg.status === true){
remoteProperties.error = false;
remoteProperties.code = loginCode;
@ -291,7 +321,7 @@
titleText: function(){
// FIXME: Temp workaround
return 'TITLE GOES HERE';
return 'File Explorer';
}
}
});
@ -317,12 +347,12 @@
<div class="pure-u-1-3">
<img src="/public/img/mstream-icon.svg">
<img class="login-icon" src="/public/img/mstream-icon.svg">
<form id="login-form" v-on:submit.prevent="submitCode($event)">
<form id="login-form" class="login-form" v-on:submit.prevent="submitCode($event)">
<div>
<label>Code: </label>
<input required type="text" class="form-control" id="login-code">
<label>Code</label>
<input v-focus required type="text" class="form-control" id="login-code">
</div>
<button id="login-submit" type="submit" class="btn">Login</button
@ -365,7 +395,7 @@
</div>
<!-- List Area -->
<div id="browser">
<div id="browser" class="browser">
<div v-for="(item, index) in dataList" :item="item" :type="item.type" is="browser-item" :key="index">
</div>
</div>
@ -374,21 +404,15 @@
<!-- Controls -->
<div class="remote-controls">
<div id="previous-button" class="previous-button">
<div class="previous-border">
<img class="previous-image" src="/public/img/previous-white.svg">
</div>
<img class="previous-image center" src="/public/img/previous-white.svg">
</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="/public/img/play-white.svg" >
</div>
<img id="play-pause-image" class="play-pause-image center" src="/public/img/play-white.svg" >
</div>
<div id="next-button" class="next-button">
<div class="next-border">
<img class="mext-image" src="/public/img/next-white.svg">
</div>
<img class="mext-image center" src="/public/img/next-white.svg">
</div>
</div>

43
public/shared.html
View File

@ -2,7 +2,7 @@
<!-- mStream CSS -->
<link rel="stylesheet" href="/public/css/shared.css">
<link rel="stylesheet" href="/public/css/mstream-player.css">
<!-- Pure CSS -->
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.1/build/pure-min.css" integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY" crossorigin="anonymous">
@ -24,7 +24,7 @@
<script src="/public/js/lib/flac.js"></script>
<script src="/public/js/lib/howler.core.min.js"></script>
<script src="/public/js/mstream.player.js"></script>
<script src="/public/js/mstream.api.js"></script>
<!-- <script src="/public/js/mstream.api.js"></script> -->
<script src="/public/js/mstream.vue-player-controls.js"></script>
@ -40,12 +40,13 @@
//
}
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('/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', false, '/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', false, '/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', false, '/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', false, '/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', false, '/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', false, '/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');
</script>
@ -80,32 +81,34 @@
</div>
<!-- Controls -->
<div class="mstream-player">
<div id="mstream-player" 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>
<img class="previous-image center" src="/public/img/previous-white.svg">
</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>
<img id="play-pause-image" class="play-pause-image center" :src="imgsrc">
</div>
<div id="next-button" class="next-button">
<div class="next-border">
<img class="mext-image" src="/public/img/next-white.svg">
</div>
<img class="mext-image center" src="/public/img/next-white.svg">
</div>
<div v-on:click="goToPosition($event)" id="progress-bar" class="progress-bar">
<div class="titlebar" >
<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 class="right-group">
<div class="duration-text">{{showTime}}</div>
<!-- <div class="aux-button-group">
<span class=""><img class="aux-button" src="/public/img/loop-white.svg"></span>
<span><img class="aux-button" src="/public/img/random-white.svg"></span>
</div> -->
</div>
</div>
</body>