diff --git a/public/css/master.css b/public/css/master.css index e4e11bf..4f8a76b 100755 --- a/public/css/master.css +++ b/public/css/master.css @@ -109,7 +109,7 @@ div#jp_container_N { box-shadow: 0 0 10px #D6D6D6; padding: 10px; } -.filez, .dirz, .back, .artistz, .albumz, .playlist_row_container, #playlist_container ul li { +.filez, .dirz, .back, .artistz, .albumz, .playlist_row_container, .playlist-item, #playlist_container ul li { cursor: pointer; width: 100%; background: white; @@ -119,7 +119,7 @@ div#jp_container_N { font-weight: 300; border-bottom: solid 1px #b4b4b4; padding: 13px 10px; } - .filez:hover, .dirz:hover, .back:hover, .artistz:hover, .albumz:hover, .playlistz:hover, #playlist_container ul li:hover { + .filez:hover, .dirz:hover, .back:hover, .artistz:hover, .albumz:hover, .playlistz:hover, .playlist-item:hover #playlist_container ul li:hover { background-color: #F5F5F5; } .dirz { @@ -160,11 +160,11 @@ div#jp_container_N { padding: 0 !important; } -#playlist_container ul { +#playlist_container ul, .playlist-item { margin: 0; } -#playlist_container ul li { +#playlist_container ul li, .playlist-item { list-style-type: none; overflow: hidden; } @@ -221,7 +221,7 @@ ul.jp-controls li { .playlistColumn { margin-left: 1%; width: 100%; } - .playlistColumn li { + .playlistColumn li, .playlist-item { padding: 0 !important; } @media (max-width: 642px) { .playlistColumn { diff --git a/public/js/mstream.vue-player-controls.js b/public/js/mstream.vue-player-controls.js new file mode 100644 index 0000000..1aa1cdf --- /dev/null +++ b/public/js/mstream.vue-player-controls.js @@ -0,0 +1,177 @@ +window.onload = function() { + + // Template for playlist items + Vue.component('playlist-item', { + template: '\ +
\ + {{ text }} X
\ + \ + ', + + 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 - 2; + } + }, interval); + } + startTime(50); + + + + // 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); +}; diff --git a/public/js/shared.js b/public/js/shared.js deleted file mode 100644 index 1242014..0000000 --- a/public/js/shared.js +++ /dev/null @@ -1,5 +0,0 @@ -// Get JSON token from URL - -// Get songs from API - -// Add songs to mstream.js diff --git a/public/mstream.html b/public/mstream.html index d21df99..a675d36 100755 --- a/public/mstream.html +++ b/public/mstream.html @@ -32,25 +32,25 @@ - - - - - - + + + + + + - + - - - - - - + + + + + + @@ -62,198 +62,7 @@ - - - - - + @@ -372,11 +181,6 @@
- -
@@ -417,12 +221,10 @@
- + +
+
+
@@ -468,7 +270,7 @@
- + diff --git a/public/shared.html b/public/shared.html index 66e299c..abf72d9 100644 --- a/public/shared.html +++ b/public/shared.html @@ -25,195 +25,22 @@ - + + + + + + + +