countless updates

README.md

@@ -1,5 +1,34 @@
 # Web GUI for OMX Player on a Raspberry Pi
-This web GUI give you easy control of the OMX player, directly via your browser. Start your video and audio files directly via your smartphone or desktop browser. This GUI is the successor to the first, simpler version of omxwebgui.
+This web GUI give you easy control of your OMX player, directly via your browser. Start your video and audio files directly with your smartphone, tablet or desktop browser. This GUI is the successor to the first, simpler version of omxwebgui at https://github.com/brainfoolong/omxwebgui/.
 
-# Not yet finished
-The player does not yet work, interface is not finished. Please wait just a few weeks. For now you can play with https://github.com/brainfoolong/omxwebgui
+## Features
+* Responsive design - Great for desktop, smartphone or tablets
+* Play/Stop videos through the browser
+* All hotkeys from omxplayer mapped to the webpage
+* Multilanguage
+* Permanent playlist - Just add folders, files and streams
+* Search for filenames with wildcards
+* Mark of already viewed videos
+
+## How to contribute
+Feel free to send pull requests. Create an issue for a new feature BEFORE you do some coding. We should talk about that before. Translations are pretty straight forward, you can just add them without an issue. 
+
+## Requirements
+It is strongly recommended to use it just with the php-cli. Do not use it in combination with a webserver, it will not work. Just use it as described bellow. Only PHP is required. It is also PHP7 compatible.
+`sudo apt-get install php5-cli`
+
+## Installation
+Download/Clone/Unpack the whole script to a folder you like. To create a simple php webserver listening on port 4321, you can change the port to whatever you want. Start this with the same user that you need to play the videos. Please do not use apache or other server#s to run the php script, it will probably not work.
+
+`php -S 0.0.0.0:4321 -t YOURPATHTOOMXWEBGUIFOLDER > /dev/null 2>&1 &`
+
+Open the webpage with http://IPTOYOURPI:4321
+
+## Autostart
+To enable autostart on reboot just add the following line to your crontab. Do this with the same user that you need to play the videos. No `sudo` required.
+Add the following line to crontab with `sudo crontab -e` to start the simple php webserver on reboot
+
+`@reboot php -S 0.0.0.0:4321 -t YOURPATHTOOMXWEBGUIFOLDER > /dev/null 2>&1 &`
+
+## Troubleshooting
+* If you have troubles with write permissions just give the `data` and `tmp` folder the 777 permission.

scripts/global.js

@@ -59,8 +59,7 @@ function t(key, parameters) {
     var value = key;
     if (typeof owg.translations[owg.language] !== "undefined" && typeof owg.translations[owg.language][key] !== "undefined") {
         value = owg.translations[owg.language][key];
-    }
-    if (typeof owg.translations["en"][key] !== "undefined") {
+    } else if (typeof owg.translations["en"][key] !== "undefined") {
         value = owg.translations["en"][key];
     }
     if (parameters) {

scripts/view/index.js

@@ -46,12 +46,20 @@ $(function () {
             "shortcut": "start",
             "path": $(this).attr("data-path")
         });
+    }).on("click", ".filelist .file img", function (ev) {
+        ev.stopPropagation();
+        var file = $(this).closest(".file");
+        file.toggleClass("seen-false seen-true");
+        $.post(window.location.href, {
+            "action": "seen",
+            "path": file.attr("data-path")
+        });
     });
 
 
     var fl = $(".filelist");
     var files = fl.children(".file");
-    var visImg = owg.rootUrl + '/images/icons/ic_visibility_white_24dp_1x.png';
+    var visImg = owg.rootUrl + '/images/icons/ic_visibility_white_24dp_2x.png';
     spinner(".filelist");
 
     // get filelist
@@ -119,7 +127,6 @@ $(function () {
                     }
                     data.el.html(html);
                 }
-
             });
         }
     });

src/Core.php

@@ -43,7 +43,7 @@ function t($key, $parameters = null)
             $value = Translation::$values[$lang][$key];
         } else {
             if (isset(Translation::$values["en"][$key])) {
-                $value = Translation::$values[$lang][$key];
+                $value = Translation::$values["en"][$key];
             } else {
                 $value = $key;
             }

src/Translation.php

@@ -38,11 +38,95 @@ class Translation
             "no" => "No",
             "enabled" => "Enabled",
             "disabled" => "Disabled",
+            "save" => "Save",
+            "saved" => "Saved",
+            "delete" => "Delete",
             "stopped" => "Player stopped",
-            "playing" => "Playing"
+            "playing" => "Playing",
+            "playlist" => "Playlist",
+            "keymap.btn" => "Keymap/Controls",
+            "keymap.desc" => "Most Omxplayer keyboard bindings are available directly on this webpage. 
+            You can press the corresponding key on your keyboard or you can click the button. 
+            Make sure your focus is out of the search input field.",
+            "search.placeholder" => "Search for folder and files...",
+            "settings" => "Settings",
+            "settings.seen.reseted" => "Seen flags reseted",
+            "settings.folders.add" => "Add another folder",
+            "settings.folders.title" => "Media folders and files",
+            "settings.folders.desc" => "Point to folders with your media files or directly to a single media file. 
+            You can also add URL's to direct-streams or online files (rtmp://, rtstp://, http://).",
+            "recursive" => "Recursive",
+            "settings.folders.path" => "Absolute Path",
+            "settings.fileformats.title" => "File extensions",
+            "settings.fileformats.desc" => "You can modify the file formats that will be available for the playlist.",
+            "settings.speedfix.title" => "Double speed and no audio fix",
+            "settings.speedfix.desc" => "Activate this if you have troubles with videos starting 
+            at double speed and without audio",
+            "settings.audioout.title" => "Audio out device",
+            "settings.initvol.title" => "Initial volume",
+            "settings.initvol.desc" => "Choose the volume for the player to start with",
+            "settings.language.title" => "Language",
+            "settings.language.desc" => "Select the language for the web interface",
+            "settings.resetflags.title" => "Reset seen flags",
+            "settings.resetflags.desc" => "Delete all seen flags from all videos with just one click",
+
         ],
         "de" => [
-
+            "shortcut-q" => "Stoppe\nPlayer",
+            "shortcut-p" => "Pausieren\nFortfahren",
+            "shortcut--" => "Lautstärke runter",
+            "shortcut-+" => "Lautstärke rauf",
+            "shortcut-left" => "Langsam zurück",
+            "shortcut-right" => "Langsam vorwärts",
+            "shortcut-down" => "Schnell zurück",
+            "shortcut-up" => "Schnell vorwärts",
+            "shortcut-z" => "Zeige Info",
+            "shortcut-1" => "Video Langsamer",
+            "shortcut-2" => "Video Schneller",
+            "shortcut-j" => "Vorheriger Audio Stream",
+            "shortcut-k" => "Nächster Audio Stream",
+            "shortcut-i" => "Letztes Kapitel",
+            "shortcut-o" => "Nächstes Kapitel",
+            "shortcut-n" => "Vorheriger Untertitel Stream",
+            "shortcut-m" => "Nächster Untertitel Stream",
+            "shortcut-s" => "Untertitel an/aus",
+            "shortcut-d" => "Weniger Untertitel Verzögerung",
+            "shortcut-f" => "Mehr Untertitel Verzögerung",
+            "yes" => "Ja",
+            "no" => "Nein",
+            "enabled" => "Aktiviert",
+            "disabled" => "Deaktiviert",
+            "save" => "Speichern",
+            "saved" => "Gespeichert",
+            "delete" => "Löschen",
+            "stopped" => "Wiedergabe gestoppt",
+            "playing" => "Spielt",
+            "playlist" => "Wiedergabeliste",
+            "keymap.btn" => "Keymap/Steuerung",
+            "keymap.desc" => "Die meisten Omxplayer Tastatur Hotkeys werden direkt in diesem Webinterface unterstützt. 
+            Drücke den entsprechende Taste am Keyboard oder klicke auf den entsprechenden Button-
+            Stelle aber sicher das du nicht mit dem Cursor im Suchfeld stehst.",
+            "search.placeholder" => "Suche nach Ordner und Dateien...",
+            "settings" => "Einstellungen",
+            "settings.seen.reseted" => "Gesehen Flags gelöscht",
+            "settings.folders.add" => "Weiteren Ordner hinzufügen",
+            "settings.folders.title" => "Medienordner und Dateien",
+            "settings.folders.desc" => "Zeige auf einen Ordner oder direkt auf eine Mediendatei. 
+            Du kannst auch einfach Links zu Streams oder Online Dateien hinzufügen (rtmp://, rtstp://, http://).",
+            "recursive" => "Rekursiv",
+            "settings.folders.path" => "Absoluter Pfad",
+            "settings.fileformats.title" => "Dateiendungen",
+            "settings.fileformats.desc" => "Du kannst die Dateiendungen definieren 
+            die für die Anzeige der Wiedergabeliste benutzt werden.",
+            "settings.speedfix.title" => "Fix für doppelte Geschwindigkeit und kein Audio",
+            "settings.speedfix.desc" => "Aktiviere diese Einstellung wenn du damit Probleme hast",
+            "settings.audioout.title" => "Audio Out Gerät",
+            "settings.initvol.title" => "Startlautstärke",
+            "settings.initvol.desc" => "Wähle wie laut der Player starten soll",
+            "settings.language.title" => "Sprache",
+            "settings.language.desc" => "Wähle eine Sprache für das Webinterface",
+            "settings.resetflags.title" => "Lösche alle gesehen Flags",
+            "settings.resetflags.desc" => "Lösche alle gesehen Flags mit einem Klick",
         ]
     ];
 }

src/View.php

@@ -56,7 +56,7 @@ public function load()
             <title>Omx Web Gui by BrainFooLong</title>
             <script type="text/javascript">
                 owg.translations = <?=json_encode(Translation::$values)?>;
-                owg.language = '<?=Data::getKey("setting", "language")?>';
+                owg.language = '<?=Data::getKey("settings", "language")?>';
                 if (owg.language == '') owg.language = "en";
                 owg.rootUrl = '<?=View::$rootUrl?>';
                 owg.folders = <?=json_encode(Data::get("folders"))?>;
@@ -78,16 +78,16 @@ public function load()
                         <div><img src="<?= View::$rootUrl ?>/images/logo.png"></div>
                     </li>
                     <li>
-                        <a href="<?= View::link("index") ?>">Playlist</a>
+                        <a href="<?= View::link("index") ?>"><?= t("playlist") ?></a>
                     </li>
                     <li>
-                        <a href="<?= View::link("settings") ?>">Settings</a>
+                        <a href="<?= View::link("settings") ?>"><?= t("settings") ?></a>
                     </li>
                     <li>
-                        <a href="https://github.com/brainfoolong/omxwebgui" target="_blank">Github</a>
+                        <a href="https://github.com/brainfoolong/omxwebgui-v2" target="_blank">Github</a>
                     </li>
                     <li>
-                        <a href="https://github.com/brainfoolong/omxwebgui/issues" target="_blank">Issues</a>
+                        <a href="https://github.com/brainfoolong/omxwebgui-v2/issues" target="_blank">Issues</a>
                     </li>
                 </ul>
             </nav>
@@ -97,7 +97,7 @@ public function load()
                         <div class="col-lg-8 col-lg-offset-2">
                             <div class="spinner-container"></div>
                             <div class="page-content">
-                                <a class="top-logo" href="https://github.com/brainfoolong/omxwebgui" target="_blank">
+                                <a class="top-logo" href="https://github.com/brainfoolong/omxwebgui-v2" target="_blank">
                                     <strong>OMXWEBGUI</strong>
                                     <small>by BrainFooLong</small>
                                 </a>

src/View/Index.php

@@ -24,6 +24,13 @@ class Index extends View
     public function load()
     {
 
+        if (post("action") == "seen") {
+            $path = md5(post("path"));
+            $flag = Data::getKey("filesseen", $path);
+            Data::setKey("filesseen", $path, !$flag);
+            return;
+        }
+
         // get player status, is running or not
         if (post("action") == "status") {
             $data = array("status" => "stopped");
@@ -98,7 +105,7 @@ public function load()
                     "path" => $file,
                     "dir" => dirname($file),
                     "filename" => basename($file),
-                    "seen" => isset($filesseen[md5($file)])
+                    "seen" => isset($filesseen[md5($file)]) && $filesseen[md5($file)]
                 ];
             }
             echo json_encode($json);
@@ -114,16 +121,14 @@ public function getContent()
     {
         ?>
         <div class="spacer">
-            <h1 class="pull-left">Playlist</h1>
+            <h1 class="pull-left"><?= t("playlist") ?></h1>
             <div class="btn btn-info pull-right" style="margin-top: 20px" onclick="$('.keymap').toggleClass('hidden')">
-                Keymapping and Controls
+                <?= t("keymap.btn") ?>
             </div>
             <div class="clearfix"></div>
         </div>
         <div class="keymap hidden">
-            <p>Most Omxplayer keyboard bindings are available directly on this webpage. You can press the corresponding
-                key on your keyboard or you can click the button. Make sure your focus is out of the search input
-                field.</p>
+            <p><?= t("keymap.desc") ?></p>
             <div class="buttons row">
                 <?php
                 foreach (Omx::$hotkeys as $key => $value) {
@@ -154,7 +159,7 @@ public function getContent()
         <div class="input-group spacer">
             <div class="input-group-addon"><img src="<?= View::$rootUrl ?>/images/icons/ic_search_white_24dp_1x.png"
                                                 width="15"></div>
-            <input type="text" class="form-control input-lg search" placeholder="Search for folder and files...">
+            <input type="text" class="form-control input-lg search" placeholder="<?= t("search.placeholder") ?>">
         </div>
         <div class="filelist"></div>
         <?php
@@ -189,7 +194,8 @@ private function getFilesRecursive($path, $recursive)
                     $files[] = $filePath;
                 }
             }
+            return $files;
         }
-        return $files;
+        return [];
     }
 }