Python 3.4, Lazy mode, Bootstrap 4

README.md

@@ -1,5 +1,5 @@
 # Home Media Server
-(Python2)
+( >= Python 3.4.2)
 
 A media home server to stream video from your laptop to any device on the same Wi-Fi
 (can be broadcasted to the Internet as well)!
@@ -21,6 +21,9 @@ In the meantime, pull requests are welcome!
 
 Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
 
+## Credits
+Music: <a href="https://www.bensound.com">Bensound</a>
+
 ## Maintainers
 
 <table>

media_server.py

@@ -1,23 +1,68 @@
 import os, sys
+# from importlib import reload
 from flask import Flask, request, render_template
+from flask_socketio import SocketIO, emit, send
 
-reload(sys)
-sys.setdefaultencoding('utf8')
+debug = True
 video_dir = 'static/video/'
-
 app = Flask(__name__)
+socketio = SocketIO(app)
 
 @app.route('/')
 @app.route('/home')
 def index():
     video_files = [f for f in os.listdir(video_dir)]
-    video_files_number = len(video_files)
-    return render_template("index.html", title='Home', video_files_number=video_files_number, video_files=video_files)
+    # video_files_number = len(video_files)
+    return render_template("index.html", title='Home', video_files=video_files, video_dir=video_dir)
+
 @app.route('/<filename>')
 def video(filename):
-    return render_template('play.html', title=filename, video_file=filename)
+    return render_template('play.html', title=filename[:-4], video_file=filename, video_dir=video_dir)
+
+@app.route('/lazy')
+def lazy():
+    video_files = [f for f in os.listdir(video_dir)]
+    return render_template('lazy.html', video_files=video_files)
+
 @app.route('/test')
 def test():
     return render_template('test.html')
+
+# When remote/lazy mode connects to server
+@socketio.on('connect')
+def connect():
+    print("Client connected")
+
+# When remote sends a command, handle them here.
+@socketio.on('remote')
+def remote(data):
+    cmd = data['cmd']
+
+    # show in browser console that command was received
+    emit('cmdlog', {'data': cmd}, broadcast=True)
+
+    if cmd == "fullscreen":
+        # show in terminal that command was received
+        print("you clicked fullscreen")
+        # finally send actual command to browser
+        emit(cmd, broadcast=True)
+    elif cmd == "browser_back":
+        emit(cmd, broadcast=True)
+    elif cmd == "browser_forward":
+        emit(cmd, broadcast=True)
+    elif cmd == "play_movie":
+        # data["movie"]="test"
+        # movie={"filename":"atest"}
+        # print(data['movie'])
+        movie = data['movie']
+        emit(cmd, movie, broadcast=True)
+    elif cmd == "night_mode":
+        emit(cmd, broadcast=True)
+    else:
+        print("I don't know this command!")
+
 if __name__ == '__main__':
-    app.run(host='0.0.0.0', debug=True)
+    if debug:
+        socketio.run(app, debug=True)
+    else:
+        socketio.run(app, host="0.0.0.0", port=5000)

requirements.txt

@@ -1 +1,23 @@
-flask
+argh==0.26.2
+astroid==1.6.2
+click==6.7
+eventlet==0.22.1
+Flask==0.12.2
+Flask-SocketIO==2.9.6
+greenlet==0.4.13
+isort==4.3.4
+itsdangerous==0.24
+Jinja2==2.10
+lazy-object-proxy==1.3.1
+MarkupSafe==1.0
+mccabe==0.6.1
+pathtools==0.1.2
+pylint==1.8.3
+python-engineio==2.0.4
+python-socketio==1.9.0
+PyYAML==3.12
+reload==0.9
+six==1.11.0
+watchdog==0.8.3
+Werkzeug==0.14.1
+wrapt==1.10.11

static/css/style.css

@@ -4,29 +4,29 @@ html {
 
 body {
   background: rgb(67,83,134); /* Old browsers */
-  background: -moz-radial-gradient(center, ellipse cover, rgba(67,83,134,1) 0%, rgba(41,51,86,1) 100%); /* FF3.6-15 */
-  background: -webkit-radial-gradient(center, ellipse cover, rgba(67,83,134,1) 0%,rgba(41,51,86,1) 100%); /* Chrome10-25,Safari5.1-6 */
-  background: radial-gradient(ellipse at center, rgba(67,83,134,1) 0%,rgba(41,51,86,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#435386', endColorstr='#293356',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
 
   color: #9fb1ed;
   font-family: 'PT Sans', sans-serif;
   height: 100%;
   margin: 2em;
 }
 /* this part is for color */
-p {
+p, .topmenu {
   background-color: #5b6c98;
   box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.2);
   padding: 0.75em;
   border-radius: 5px;
+  border: 1px solid #8c9dd673;
 }
 
 a {
   color: white;
   text-decoration: none;
   word-wrap: break-word;
 }
+a:hover{
+  color:#c1c9db;
+}
 
 h3 {
   font-family: "Kreon", serif;
@@ -36,17 +36,42 @@ h3 {
 video {
   display: block;
   margin: 0 auto;
-  width: 90%;
-  max-width: 800px
+  width: 100%;
+  max-width: 800px;
+  margin-bottom: 10px;
+}
+
+body > div.col-lg-12 > video{
+  max-width: 100%;
 }
 .animated {
   animation-duration: 1s !important;
 }
 .nightmode {
-  background: rgb(67,83,134); /* Old browsers */
-  background: radial-gradient(ellipse at center, #000000 0%, #212945 100%);
-  background: -moz-radial-gradient(center, ellipse cover, #000000 0%, #212945 100%); /* FF3.6-15 */
-  background: -webkit-radial-gradient(center, ellipse cover, #000000 0%, #212945 100%); /* Chrome10-25,Safari5.1-6 */
-  background: radial-gradient(ellipse at center, #000000 0%, #212945 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#212945',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+  background: #151a29;
+}
+.lbutton{
+  text-align: center;
+}
+.remote{
+  background-color: #263051;
+  border: 1px solid #6983d4;
+  padding: 10px;
+  border-radius: 10px;
+  margin-bottom: 10px;
+}
+.remote .btn{
+  margin-bottom: 10px;
+}
+.remote_title{
+  font: 400 1.4em 'Merienda One', Helvetica, sans-serif;
+  text-align: center;
+  margin-bottom: 10px;
+}
+.container{
+  padding-left: 0px;
+  padding-right: 0px;
 }
+.topmenu{
+  margin-bottom: 10px;
+}

static/js/lazy.js

@@ -0,0 +1,80 @@
+  // ################################
+  // SOCKETIO BROWSER COMMANDS (SEND)
+  // ################################
+
+  $( "#btnBrowserBack" ).click(function() {
+    socket.emit('remote', {
+        cmd: "browser_back"
+    })
+  });
+
+  $( "#btnBrowserForward" ).click(function() {
+    socket.emit('remote', {
+        cmd: "browser_forward"
+    })
+  });
+
+  $( ".btnPlayMovie" ).click(function(e) {
+    e.preventDefault();
+    filename = $(this).text();
+    console.log(filename);
+    socket.emit('remote', {
+        cmd: "play_movie",
+        movie: filename
+    })
+  });
+
+  $( "#btnNightmode" ).click(function() {
+    socket.emit('remote', {
+        cmd: "night_mode"
+    })
+  });
+
+  var socket = io.connect();
+
+  // on_connect (when browser connects to server)
+  socket.on('connect', function(data){
+    console.log("Remote connected to server!")
+  })
+
+  // Logs commands in console to show that they were received
+  socket.on('cmdlog', function(data){
+    console.log("Server received: " + data.data);
+  })
+
+  // ################################
+  // SOCKETIO BROWSER COMMANDS (RECEIVE)
+  // ################################
+
+  socket.on('browser_back', function(){
+    console.log("execute browser_back");
+    // If we don't check for the video_id/player
+    // the remote page also navigates because it inherits base.html
+    if ($("#video_id").length) {
+      window.history.back();
+    }
+  })
+  socket.on('browser_forward', function(){
+    console.log("execute browser_forward");
+    if ($("#video_id").length) {
+      window.history.forward();
+    }
+  })
+  socket.on('play_movie', function(movie){
+    console.log("execute play_movie");
+    console.log("Play movie file: " + movie);
+    var remoteUrl = window.location.href + "lazy";
+    // Make sure we're on page with video_id before we
+    // redirect, this makes sure that the lazy/remote page
+    // isn't redirected also.
+    if ($("#video_id").length){
+      window.location.replace("/" + movie);
+    }else if($(".isindex").length){
+      // quick check to see if we're on index page
+      window.location.replace("/" + movie);
+    }
+  })
+  socket.on('night_mode', function(data){
+    console.log("execute night_mode");
+    $("body").toggleClass("nightmode");
+  })

templates/base.html

@@ -1,9 +1,7 @@
-<!DOCTYPE html>
-<html lang="en">
-
-  <head>
-    <meta charset="utf-8">
-    <title>Media Player - {{ title }}</title>
+  <!doctype html>
+  <html lang="en">
+    <head>
+    <!-- favicons -->
     <link rel="apple-touch-icon" sizes="57x57" href="static/img/favicon/apple-icon-57x57.png">
     <link rel="apple-touch-icon" sizes="60x60" href="static/img/favicon/apple-icon-60x60.png">
     <link rel="apple-touch-icon" sizes="72x72" href="static/img/favicon/apple-icon-72x72.png">
@@ -23,26 +21,48 @@
     <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="msapplication-TileImage" content="static/img/favicon/ms-icon-144x144.png">
     <meta name="theme-color" content="#ffffff">
-    <link type="text/css" rel="stylesheet" href="static/css/animate.css">
-    <link type="text/css" rel="stylesheet" href="static/css/style.css">
-    <link href="https://fonts.googleapis.com/css?family=Kreon|PT+Sans:400,700" rel="stylesheet">
-    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
-    <script
-  src="https://code.jquery.com/jquery-3.2.1.min.js"
-    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
-      crossorigin="anonymous"></script>
-  </head>
+      <!-- Required meta tags -->
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+      <!-- Bootstrap CSS -->
+      <link rel="stylesheet" href="static/css/bootstrap.min.css">
+      <link type="text/css" rel="stylesheet" href="static/css/animate.css">
+      <link type="text/css" rel="stylesheet" href="static/css/style.css">
+      <link href="https://fonts.googleapis.com/css?family=Kreon|PT+Sans:400,700" rel="stylesheet">
+      <link href='http://fonts.googleapis.com/css?family=Merienda+One' rel='stylesheet' type='text/css'>
+      <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+
+      <title>Media Player - {{ title }}</title>
+
+    </head>
+    <body class="fadeIn animated">
+      <div class="container">
+        <div class="topmenu">
+          <a class="btn btn-primary" href="/">Home</a>
+          <a class="nightmode_button btn btn-primary"><i class="fa fa-moon-o" aria-hidden="true"></i> Night Mode</a>
+          <a href="/lazy" class="btn btn-primary">Lazy Mode</a>
+        </div>
+      </div>
 
-  <body class="fadeIn animated">
-    {% block play%}{% endblock %}
-  </body>
+      {% block play %}{% endblock %}
+      {% block lazy %}{% endblock %}
+
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
+      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+      <script src="../static/js/lazy.js"></script>
+    </body>
+  </html>
 
 <script>
+  // Basic night_mode button
 	$( document ).ready(function() {
 	  $( ".nightmode_button" ).click(function() {
 	    $("body").toggleClass( "nightmode" );
 	  });
-	});
+  });
 </script>
 
 </html>

templates/index.html

@@ -1,6 +1,15 @@
 {% extends 'base.html' %}
 {% block play %}
-{% for i in range(video_files_number) %}
-  <p><a href="/{{ video_files[i] }}"> {{ i+1 }}) {{ video_files[i] }} </a></p>
-{% endfor %}
+<div class="container">
+  <div class="row">
+    <div class="col-lg-12">
+        {% for video in video_files %}
+          <p><a href="/{{ video }}"> {{ video }} </a></p>
+        {% endfor %}
+          <!-- remote/lazy mode relies on this -->
+          <div class="isindex"></div>
+          <!-- remote/lazy mode relies on this -->
+    </div>
+  </div>
+</div>
 {% endblock %}