put back plyr.js and remove the filename extension from the watch route

src/discordbot/discordbot.py

@@ -147,7 +147,8 @@ async def query_database():
                 # Creating an embed
                 video_url = f'https://{scheduler_hostname}/video/{video_filename}'
                 thumb_url = f'https://{scheduler_hostname}/thumb/{thumb_filename}'
-                watch_url = f'https://{scheduler_hostname}/watch/{video_filename}'
+                video_filename_no_extension = video_filename.split('.')[0]
+                watch_url = f'https://{scheduler_hostname}/watch/{video_filename_no_extension}'
                 img_url = f'https://{scheduler_hostname}/img'
                 embed = discord.Embed(title=f'{rec_stream_name}',
                                       url=f'{watch_url}',

src/scheduler/scheduler.py

@@ -331,8 +331,9 @@ def img_route(file_name):
         abort(404)
     return send_file(reqfile, mimetype='image/png')
 
-@app.route('/watch/<file_name>')
-def watch_route(file_name):
+@app.route('/watch/<file_name_no_extension>')
+def watch_route(file_name_no_extension):
+    file_name = file_name_no_extension + '.mp4'
     reqfile = f'{rec_path}/vod/{file_name}'
     if not os.path.exists(reqfile):
         abort(404)

src/scheduler/templates/watch.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/plyr/dist/plyr.min.css">
     <style>
         body {
             margin: 0;
@@ -28,6 +29,12 @@
         <source src="{{ video_url }}" type="video/mp4">
     </video>
 </div>
+<script src="https://cdn.jsdelivr.net/npm/plyr/dist/plyr.min.js" crossorigin="anonymous"></script>
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const player = new Plyr('#player');
+    });
+</script>
 
 </body>
 </html>