diff --git a/README.md b/README.md index 362c16d..81dbab9 100644 --- a/README.md +++ b/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 diff --git a/web/src/App.js b/web/src/App.js index b25af96..cc9cccd 100644 --- a/web/src/App.js +++ b/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 ( - - - }> - } /> - } /> - } /> - - - + + }> + } /> + } /> + } /> + + ) } diff --git a/web/src/components/player/index.js b/web/src/components/player/index.js index 30d7022..29c5762 100644 --- a/web/src/components/player/index.js +++ b/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, diff --git a/web/src/index.js b/web/src/index.js index 5a743d2..abc1f62 100644 --- a/web/src/index.js +++ b/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( - - - + + + + + )