Merge pull request #9 from jrtechs/aboutPage

About page (closes #5)

README.MD

@@ -13,34 +13,41 @@ This web system enables users to log into the system and view videos using the b
 - Easy to install
 - Easily expandable and hackable to fit your needs
 
+# Installation
 
+## NPM Dependencies
 
-npm dependencies
 ```bash
-npm install express --save
-npm install fs --save
-npm install express-session --save
-npm install whiskers --save
+npm install
 ```
 
-Dependencies
+## System Dependencies
 
 ```bash
 $apt-get install ffmpeg
 ```
 
+## Running
 
-Codacs which don't work
-H.265 
-MPEG-2 Video  AC-3 (ATSC A/52)
+To deploy this you will want to run this behind a reverse NGINX proxy to
+allow you to encrypt all of the network traffic.
+There are plenty of tutorials on how to do this online with let's encrypt.
 
-Video but no audio
-H.264 audio:AC-3 (ATSC A/52)
-H.264 (Main Profile)  AC-3 (ATSC A/52)
+To run this program either run `run.sh` or execute `node server.js`. This
+by default will run on port 5000 -- you are able to change this in `conf.json`.
+To make this easier for you in the long run, I usually run my node applications
+as [systemd](https://freedesktop.org/wiki/Software/systemd/) services. 
 
-Audio but no video:
-H.265 (Main 10 Profile)  MPEG-4 AAC
+The default config provided in this project has the default username of admin and password
+of admin. 
+You will want create a new admin user and remove the default one once you 
+get this running. 
 
+# Contributing
 
-just work:
-H.264 (High Profile),   MPEG-4 AAC
+This was largely just a weekend hack for me.
+This currently fits most of my needs and is *functional*.
+If you find any bugs, feel free to open a issue and I will get around to looking at it. 
+I am always looking for people to contribute to my projects.
+If you have an idea for an enhancement for this project feel free to hack away and issue a PR.
+Contact me using the form on my [blog](jrtechs.net) or by opening a github issue if you have any questions regarding the code or how to use this project.

conf.json

@@ -4,11 +4,14 @@
     "users": [
         {
             "username": "admin",
-            "password": "7756626c84c37f25e29f48c10729e6d2947850f4030cb5811b297115bc0bcfe5",
+            "password": "f7c45eebc3710734d512d44e0fcbc9c075ee984eb0c1a2a4d89cd8dd38f608f7",
             "id": 1,
-            "salt": "62f28310e1f0f2bdabeb6de07bb3943a980f4a9c6332c53c0a2a8eb684adcd4d",
+            "salt": "9162ff07513960398251d4a797e863b60d64048a6c550343cd56210dcea932ec",
             "admin": true,
-            "api": "8ecf65673b6cb6673555f1213f08a3abf9264294b6d3d98a27f2745f0aaf1cbe"
+            "api": "e8d4fd1267e14660bde678be259b86af413be4aca234bafa773a7c9fd535e9e2"
         }
-    ]
+    ],
+    "serverURL": "http://localhost:5000",
+    "privateDir": "/home/jeff/private/videos",
+    "publicDir": "/home/jeff/public/videos"
 }

html/footer.html

@@ -1,11 +1,56 @@
 <br><br>
 <!-- Footer -->
-<footer class="text-center">
-    <div class="footer-below">
+<!-- Footer -->
+<footer class="text-center bg-secondary">
+    <br><br>
+    <div class="footer-above">
+        <div class="container">
+            <div class="row">
+                <div class="footer-col col-md-4">
+                    <h3>Location</h3>
+                    <p>Rochester Institute of Technology
+                        <br>1 Lomb Memorial Dr, Rochester, NY 14623</p>
+                </div>
+                <div class="footer-col col-md-4">
+                    <h3>Around the Web</h3>
+                    <ul class="list-inline p-4">
+                        <li class="list-inline-item">
+                            <a class="badge badge-secondary" href="https://www.youtube.com/c/JrtechsNet">
+                                <svg id="i-video" viewBox="0 0 32 32" width="50" height="50" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                                    <path d="M22 13 L30 8 30 24 22 19 Z M2 8 L2 24 22 24 22 8 Z" />
+                                </svg>
+                            </a>
+                        </li>
+                        <li class="list-inline-item">
+                            <a class="badge badge-secondary" href="https://github.com/jrtechs">
+                                <svg id="i-github" viewBox="0 0 64 64" width="50" height="50">
+                                    <path stroke-width="0" fill="currentColor" d="M32 0 C14 0 0 14 0 32 0 53 19 62 22 62 24 62 24 61 24 60 L24 55 C17 57 14 53 13 50 13 50 13 49 11 47 10 46 6 44 10 44 13 44 15 48 15 48 18 52 22 51 24 50 24 48 26 46 26 46 18 45 12 42 12 31 12 27 13 24 15 22 15 22 13 18 15 13 15 13 20 13 24 17 27 15 37 15 40 17 44 13 49 13 49 13 51 20 49 22 49 22 51 24 52 27 52 31 52 42 45 45 38 46 39 47 40 49 40 52 L40 60 C40 61 40 62 42 62 45 62 64 53 64 32 64 14 50 0 32 0 Z" />
+                                </svg>
+                            </a>
+                        </li>
+                        <li class="list-inline-item">
+                            <a class="badge badge-secondary" href="https://jrtechs.me">
+                                <svg id="i-portfolio" viewBox="0 0 32 32" width="50" height="50" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                                    <path d="M29 17 L29 28 3 28 3 17 M2 8 L30 8 30 16 C30 16 24 20 16 20 8 20 2 16 2 16 L2 8 Z M16 22 L16 18 M20 8 C20 8 20 4 16 4 12 4 12 8 12 8" />
+                                </svg>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="footer-col col-md-4">
+                    <h3>About This Website</h3>
+                    <p>Check out the source code for this website on my github.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="footer-below bg-dark">
+        <br>
         <div class="container">
             <div class="row">
                 <div class="col-lg-12">
-                    <p class="m-0 text-center text-white"><p>&copy; 2019 Jrtechs<p></p>
+                    <p class="m-0 text-center text-white"><a href="https://www.mozilla.org/en-US/MPL/" target="_blank">MPL 2.0</a> <a href="jrtechs.net">Jrtechs</a></p>
+                    <br>
                 </div>
             </div>
         </div>

html/header.html

@@ -27,7 +27,7 @@
 
 <body>
 
-<div class="navbar navbar-expand-lg navbar-light fixed-top bg-light" id="mainNav">
+<div class="navbar navbar-expand-lg navbar-dark fixed-top bg-secondary" id="mainNav">
     <div class="container">
         <a class="navbar-brand" href="/">Home</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"

html/home.html

@@ -1,24 +1,74 @@
 <div class="row">
-    <div class="col-4">
+    <div class="col-12 col-md-8">
+        <div class="card">
+            <div class="card-header">
+                <h3>About</h3>
+            </div>
+            <div class="card-body">
+                <p>
+                    This is a personal video hosting website.
+                    Like Plex, this allows people to host videos on their server and easily access them using a web GUI.
+                    Rather than mounting network drives, this gives you the ability to take advantage of
+                    video buffering and have greater device compatibility.
+                </p>
+                <p>
+                    The ability to create user accounts and specify public video directories makes it easy
+                    to share videos with friends and family.
+                    The minimal node app makes this ideal for people with low spec hardware
+                    like old computers and cloud droplets.
+                </p>
+            </div>
+        </div>
+    </div>
+    <div class="col-12 col-md-4">
         {if loggedIn}
-            <div class="card">
-
-                <div class="card-header">
-                    <h3>Profile</h3>
-                </div>
-                <div class="card-body">
-                    <p>Welcome {username}.</p>
+        <div class="card">
+            <div class="card-header">
+                <h3>Profile</h3>
+            </div>
+            <div class="card-body">
+                <p>Welcome {username}.</p>
+                <br>
+                <form action="/user/logout" method ="post" class="p-2">
+                    <div class="text-center">
+                        <button class="btn btn-lg btn-secondary">LogOut</button>
+                    </div>
                     <br>
-                    <form action="/user/logout" method ="post" class="p-2">
-                        <div class="text-center">
-                            <button class="btn btn-lg btn-secondary">LogOut</button>
-                        </div>
-                        <br>
-                    </form>
-                </div>
+                </form>
             </div>
+        </div>
         {else}
-            {>login}
+        {>login}
         {/if}
     </div>
+    <div class="col-12 col-md-8">
+        <div class="card">
+            <div class="card-header">
+                <h3>Usage</h3>
+            </div>
+            <div class="card-body">
+                <p>
+                    Installation instructions can be found on this project's <a href="https://github.com/jrtechs/HomeBrewPlex">github repository</a>.
+                </p>
+
+                <p>
+                    The <a href="/videos">videos page</a> gives you a place to watch all of your videos using the generic HTML5 video player.
+                    If your web browser does not support the codec which the video is encoded in, you can copy the direct link to the network
+                    stream and open it in a video player like <a href="https://www.videolan.org/index.html">VLC</a>.
+                </p>
+
+                <p>
+                    The <a href="/users">users page</a> gives you the ability to create new users and re-generate their API keys.
+                    Only users which are admin can create and edit users, however, regular users can still re-generate their API
+                    keys and change their username and password.
+                </p>
+
+                <p>
+                    The <a href="/system">system page</a> allows you to specify the directories where both the public and private
+                    videos are located.
+                </p>
+            </div>
+        </div>
+    </div>
+
 </div>

html/videos.html

@@ -1,4 +1,4 @@
-<script src="../server.js"></script><h1 class="text-center">Videos</h1>
+<h1 class="text-center">Videos</h1>
 
 <div class="row">
     <center><h1>Videos</h1></center>

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "HomeBrewPlex",
-  "version": "0.1.0",
+  "name": "Home Brew Plex",
+  "version": "1.0.0",
   "description": "Light weight alternative for Plex",
   "main": "server.js",
   "scripts": {
@@ -18,8 +18,11 @@
   },
   "homepage": "https://github.com/jrtechs/HomeBrewPlex#readme",
   "dependencies": {
+    "crypto": "^1.0.1",
     "download-file": "^0.1.5",
+    "express": "^4.16.4",
     "express-session": "^1.15.6",
+    "filepreview": "^1.0.16",
     "fs": "0.0.2",
     "path": "^0.12.7",
     "url": "^0.11.0",

routes/video.js

@@ -18,8 +18,9 @@ routes.get('/', (request, result) =>
         userUtils.isValidAPI(request.query.api) ||
         videoManager.isPublicVideo(videoID))
     {
-        const rootDir = configManager.getRootDirectory();
-
+        const rootDir= (videoManager.isPublicVideo(videoID)) ?
+            configManager.getPublicDirectory() :
+            configManager.getRootDirectory();
 
         const path = rootDir + videoID;
         const stat = fs.statSync(path);

run.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+# run - this script enters a infinite loop to ensure that the website does not go down if it
+# hits any unexpected error that crashes Nodejs
+#
+# 2/13/18 Jeffery Russell
+
+while true
+do node server.js
+done