Change cinema mode state to use query search params

README.md

@@ -196,6 +196,11 @@ will be automatically updated every night. If you are running on a VPS/Cloud ser
 export URL=my-server.com
 docker-compose up -d
 ```
+## URL Parameters
+
+The frontend can be configured by passing these URL Parameters.
+
+- `cinemaMode=true` - Forces the player into cinema mode by adding to end of URL like https://b.siobud.com/myStream?cinemaMode=true
 
 ## Environment Variables
 

web/src/App.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { Routes, Route } from 'react-router-dom'
 
 import Header from './components/header'
 import Selection from './components/selection'
@@ -8,15 +8,13 @@ import Publish from './components/publish'
 
 function App() {
   return (
-    <BrowserRouter basename={process.env.PUBLIC_URL}>
-      <Routes>
-        <Route path='/' element={<Header />}>
-          <Route index element={<Selection />} />
-          <Route path='/publish/*' element={<Publish />} />
-          <Route path='/*' element={<PlayerPage />} />
-        </Route>
-      </Routes>
-    </BrowserRouter>
+    <Routes>
+      <Route path='/' element={<Header />}>
+        <Route index element={<Selection />} />
+        <Route path='/publish/*' element={<Publish />} />
+        <Route path='/*' element={<PlayerPage />} />
+      </Route>
+    </Routes>
   )
 }
 

web/src/components/player/index.js

@@ -1,11 +1,14 @@
 import React, { useContext, useEffect, useMemo, useState } from 'react'
 import { parseLinkHeader } from '@web3-storage/parse-link-header'
-import { useLocation } from 'react-router-dom'
+import { useLocation, useSearchParams } from 'react-router-dom'
 
 export const CinemaModeContext = React.createContext(null);
 
 export function CinemaModeProvider({ children }) {
-  const [cinemaMode, setCinemaMode] = useState(() => localStorage.getItem("cinema-mode") === "true");
+  const [searchParams] = useSearchParams();
+  const cinemaModeInUrl = searchParams.get("cinemaMode") === "true"
+  const [cinemaMode, setCinemaMode] = useState(() => cinemaModeInUrl || localStorage.getItem("cinema-mode") === "true")
+
   const state = useMemo(() => ({
     cinemaMode,
     setCinemaMode,

web/src/index.js

@@ -3,12 +3,15 @@ import ReactDOM from 'react-dom/client'
 import './index.css'
 import App from './App'
 import { CinemaModeProvider } from './components/player'
+import { BrowserRouter } from 'react-router-dom'
 
 const root = ReactDOM.createRoot(document.getElementById('root'))
 root.render(
   <React.StrictMode>
-    <CinemaModeProvider>
-      <App />
-    </CinemaModeProvider>
+    <BrowserRouter basename={process.env.PUBLIC_URL}>
+      <CinemaModeProvider>
+        <App />
+      </CinemaModeProvider>
+    </BrowserRouter>
   </React.StrictMode>
 )