Simplify CORS and enhance video box for mobile devices

thevickypedia · Dec 7, 2023 · c2cc118 · c2cc118
1 parent 4043b98
commit c2cc118
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/pystream/main.py b/pystream/main.py
@@ -21,23 +21,19 @@ def task() -> None:
 
 def startup_tasks() -> None:
     """Tasks that need to run during the API startup."""
-    logger.info('Setting CORS policy.')
     origins = ["http://localhost.com", "https://localhost.com"]
     if config.env.website:
+        logger.info('Setting CORS policy.')
         origins.extend([
             f"http://{config.env.website.host}",
             f"https://{config.env.website.host}",
             f"http://{config.env.website.host}/*",
             f"https://{config.env.website.host}/*"
         ])
-    app.add_middleware(
-        CORSMiddleware,
-        allow_origins=origins,
-        allow_origin_regex='https://.*\.ngrok\.io/*',  # noqa: W605
-        allow_credentials=True,
-        allow_methods=["*"],
-        allow_headers=["*"],
-    )
+    kwargs = dict(allow_origins=origins)
+    if config.env.ngrok_token:
+        kwargs['allow_origin_regex'] = 'https://.*\.ngrok\.io/*'  # noqa: W605
+    app.add_middleware(CORSMiddleware, **kwargs)
     task()
 
 

diff --git a/pystream/templates/index.html b/pystream/templates/index.html
@@ -74,15 +74,34 @@
             text-align: center;
         }
     </style>
+    <!-- Size of video container and the player -->
+    <style>
+        #video-container {
+            position: relative;
+            width: 70%;  /* fixme: 50 works for 24" and 27" screens, 70 works for mobile phones (choose a side) */
+            height: 100%;
+            margin-left: auto;
+            margin-right: auto;
+            display: block
+        }
+        #video-player {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            margin-left: auto;
+            margin-right: auto;
+            display: block
+        }
+    </style>
 </head>
 <body>
 <button class="home" onclick="goHome()"><i class="fa fa-home"></i> Home</button>
 <button class="back" onclick="goBack()"><i class="fa fa-backward"></i> Back</button>
 <button class="logout" onclick="logOut()"><i class="fa fa-sign-out"></i> Logout</button>
 <br><br>
 <h1>{{title}}</h1>
+<div id="video-container">
 <video id="video-player"
-       width="960" height="480"
        class="video-js"
        preload="auto"
        controls muted="muted"
@@ -96,6 +115,7 @@ <h1>{{title}}</h1>
         <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
     </p>
 </video>
+</div>
 <script>
     let origin = window.location.origin; // Get the current origin using JavaScript
     let path = "{{ path }}"; // Get the path variable from Jinja template