projects / ympd.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 264ce34)
use cookies to store streamurl and added minimal player
authorSuperBFG7 <daniel@despite.ch>
Wed, 21 Oct 2015 17:24:38 +0000 (19:24 +0200)
committerSuperBFG7 <daniel@despite.ch>
Wed, 21 Oct 2015 17:24:38 +0000 (19:24 +0200)
CMakeLists.txt patch | blob | history
htdocs/index.html patch | blob | history
htdocs/js/mpd.js patch | blob | history
htdocs/player.html [new file with mode: 0644] patch | blob

diff --git a/CMakeLists.txt b/CMakeLists.txt
index 7bd4b70..21b085d 100644 (file)
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -36,6 +36,7 @@ file(GLOB RESOURCES
     htdocs/css/*.min.css
     htdocs/fonts/*
     htdocs/index.html
+    htdocs/player.html
 )
 
 set(SOURCES
diff --git a/htdocs/index.html b/htdocs/index.html
index f954071..26981fb 100644 (file)
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -61,13 +61,17 @@
               <div id="volumeslider"></div>
             </div>
           </div>
+        </div>
           
+        <div class="btn-toolbar navbar-btn navbar-right" role="toolbar">
           <audio id="player" preload="none"></audio>
-          <input type="hidden" id="localstream" value="" />
           <div class="btn-group" role="group">
             <button type="button" class="btn btn-default" onclick="clickLocalPlay()">
               <span id="localplay-icon" class="glyphicon glyphicon-play"></span>
             </button>
+            <button type="button" class="btn btn-default" onclick="window.open('/player.html');">
+              <span id="localplay-icon" class="glyphicon glyphicon-new-window"></span>
+            </button>
           </div>
         </div>
 
diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js
index e85192c..f172e4c 100644 (file)
--- a/htdocs/js/mpd.js
+++ b/htdocs/js/mpd.js
@@ -580,17 +580,19 @@ function clickLocalPlay() {
     $("#localplay-icon").removeClass("glyphicon-play").removeClass("glyphicon-pause");
 
     if ( player.paused ) {
-        if ( $("#localstream").val() == "" ) {
-            $("#localstream").change(function(){ clickLocalPlay(); $(this).unbind("change"); });
+        var mpdstream = $.cookie("mpdstream");
+
+        if ( mpdstream ) {
+            player.src = mpdstream;
+            console.log("playing mpd stream: " + player.src);
+            player.load();
+            player.play();
+            $("#localplay-icon").addClass("glyphicon-pause");
+        } else {
+            $("#mpdstream").change(function(){ clickLocalPlay(); $(this).unbind("change"); });
             $("#localplay-icon").addClass("glyphicon-play");
             getHost();
-            return;
         }
-        player.src = $("#localstream").val();
-        console.log("playing mpd stream: " + player.src);
-        player.load();
-        player.play();
-        $("#localplay-icon").addClass("glyphicon-pause");
     } else {
         player.pause();
         player.src='';
@@ -600,18 +602,21 @@ function clickLocalPlay() {
 }
 
 function setLocalStream(mpdhost) {
-    if ( $("#localstream").val() != "" )
-        return;
+    var mpdstream = $.cookie("mpdstream");
+
+    if ( !mpdstream ) {
+        mpdstream = "http://";
+        if ( mpdhost == "127.0.0.1" )
+            mpdstream += window.location.hostname;
+        else
+            mpdstream += mpdhost;
+        mpdstream += ":8000/";
+
+        $.cookie("mpdstream", mpdstream, { expires: 424242 });
+    }
 
-    var mpdstream = "http://";
-    if ( mpdhost == "127.0.0.1" )
-        mpdstream += window.location.hostname;
-    else
-        mpdstream += mpdhost;
-    mpdstream += ":8000/";
     $("#mpdstream").val(mpdstream);
-    $("#localstream").val(mpdstream);
-    $("#localstream").change();
+    $("#mpdstream").change();
 }
 
 function basename(path) {
@@ -741,7 +746,7 @@ function confirmSettings() {
             socket.send('MPD_API_SET_MPDPASS,'+$('#mpd_pw').val());
     }
     socket.send('MPD_API_SET_MPDHOST,'+$('#mpdport').val()+','+$('#mpdhost').val());
-    $("#localstream").val($("#mpdstream").val());
+    $.cookie("mpdstream", $("#mpdstream").val(), { expires: 424242 });
     $('#settings').modal('hide');
 }
 
diff --git a/htdocs/player.html b/htdocs/player.html
new file mode 100644 (file)
index 0000000..83b4621
--- /dev/null
+++ b/htdocs/player.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+<!--  <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
+  <meta name="viewport" content="width=320">
+  <meta name="description" content="ympd - fast and lightweight MPD webclient">
+  <meta name="author" content="andy@ndyk.de">
+
+  <title>ympd player</title>
+
+  <!-- Bootstrap core CSS -->
+  <link href="css/bootstrap.min.css" rel="stylesheet">
+  <link href="css/bootstrap-theme.min.css" rel="stylesheet">
+
+  <!-- Custom styles for this template -->
+  <link href="css/mpd.min.css" rel="stylesheet">
+  <link href="assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
+<script type="text/javascript">
+function clickLocalPlay() {
+    var player = document.getElementById('player');
+    $("#localplay-icon").removeClass("glyphicon-play").removeClass("glyphicon-pause");
+
+
+    if ( player.paused ) {
+        var mpdstream = $.cookie("mpdstream");
+        player.src = mpdstream;
+        console.log("playing mpd stream: " + player.src);
+        player.load();
+        player.play();
+        $("#localplay-icon").addClass("glyphicon-pause");
+    } else {
+        player.pause();
+        player.src='';
+        player.removeAttribute("src");
+        $("#localplay-icon").addClass("glyphicon-play");
+    }
+}
+
+</script>
+</head>
+<body>
+  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+    <div class="container">
+        <a class="navbar-brand" href="/" target="_blank"><span class="glyphicon glyphicon-play-circle"></span> ympd</a>
+    </div>
+  </div>
+
+  <div class="container starter-template">
+    <div class="row">
+      <div class="col-md-10 col-xs-12">
+            <audio id="player" preload="none"></audio>
+            <button type="button" class="btn btn-default btn-lg center-block" onclick="clickLocalPlay()">
+              <span id="localplay-icon" class="glyphicon glyphicon-play"></span>
+            </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Bootstrap core JavaScript
+  ================================================== -->
+  <!-- Placed at the end of the document so the pages load faster -->
+  <script src="js/jquery-1.10.2.min.js"></script>
+  <script src="js/jquery.cookie.js"></script>
+  <script src="js/bootstrap.min.js"></script>
+</body>
+</html>
MPD Web GUI - written in C, utilizing Websockets and Bootstrap/JS