Skip to content

Commit

Permalink
Allow cinema mode to be toggled via cinemaMode URL Param
Browse files Browse the repository at this point in the history
  • Loading branch information
cgmartin authored and Sean-Der committed Dec 18, 2024
1 parent 4a0d8ed commit 9eba6d6
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 15 deletions.
5 changes: 5 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
18 changes: 8 additions & 10 deletions web/src/App.js
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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>
)
}

Expand Down
7 changes: 5 additions & 2 deletions web/src/components/player/index.js
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
9 changes: 6 additions & 3 deletions web/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)

0 comments on commit 9eba6d6

Please sign in to comment.