Skip to content

Commit 59e082a

Browse files
alex-barstowalex-barstow
committed
wip
1 parent e81927d commit 59e082a

29 files changed

+2540
-233
lines changed

‎package-lock.json‎

Lines changed: 1697 additions & 43 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,17 @@
2727
"devDependencies": {
2828
"@commitlint/cli": "^19.6.1",
2929
"@commitlint/config-conventional": "^19.6.0",
30+
"@emotion/react": "^11.14.0",
31+
"@emotion/styled": "^11.14.0",
3032
"@eslint/js": "^9.17.0",
33+
"@mui/icons-material": "^6.3.1",
34+
"@mui/material": "^6.3.1",
3135
"@nx/js": "20.3.1",
3236
"@size-limit/preset-big-lib": "^11.1.6",
3337
"@types/eslint__js": "^8.42.3",
3438
"@types/react": "^19.0.4",
3539
"@types/react-dom": "^19.0.2",
40+
"@types/react-router-dom": "^5.3.3",
3641
"@typestrong/ts-mockito": "^2.7.12",
3742
"@vitejs/plugin-react": "^4.3.4",
3843
"@vitest/browser": "^2.1.8",
@@ -46,6 +51,8 @@
4651
"eslint-plugin-react-refresh": "^0.4.16",
4752
"eslint-plugin-unicorn": "^56.0.1",
4853
"eslint-plugin-vitest": "^0.5.4",
54+
"firebase": "^10.14.1",
55+
"firebaseui": "^6.1.0",
4956
"globals": "^15.14.0",
5057
"http-server": "^14.1.1",
5158
"husky": "^9.1.7",
@@ -57,6 +64,7 @@
5764
"prettier": "^3.4.2",
5865
"react": "^19.0.0",
5966
"react-dom": "^19.0.0",
67+
"react-router-dom": "^7.1.1",
6068
"rimraf": "^6.0.1",
6169
"size-limit": "^11.1.6",
6270
"typedoc": "^0.27.6",
@@ -66,6 +74,7 @@
6674
"vite-plugin-banner": "^0.8.0",
6775
"vite-plugin-dts": "^4.4.0",
6876
"vite-plugin-static-copy": "^2.2.0",
69-
"vitest": "^2.1.8"
77+
"vitest": "^2.1.8",
78+
"zustand": "^5.0.3"
7079
}
7180
}

‎packages/playback/demo/index.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
<!doctype html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8" />
56
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
67
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Playback Demo page</title>
8+
<title>** NEW Playback Demo page **</title>
89
</head>
10+
911
<body>
10-
<div id="root"></div>
11-
<script type="module" src="./src/main.tsx"></script>
12+
<div id="root"></div>
13+
<script type="module" src="./src/index.tsx"></script>
1214
</body>
15+
1316
</html>

‎packages/playback/demo/public/vite.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎packages/playback/demo/src/App.css‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎packages/playback/demo/src/App.tsx‎

Lines changed: 11 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,16 @@
1-
import type { JSX } from 'react';
2-
import { useEffect } from 'react';
3-
import reactLogo from './assets/react.svg';
4-
import viteLogo from '/vite.svg';
5-
import './App.css';
6-
7-
import { Player as MainThreadOnlyPlayer } from '../../src/entry-points/main-only-core';
8-
import { Player as MainThreadWithWorkerPlayer } from '../../src/entry-points/main-with-worker-core';
9-
10-
const mainThreadOnlyPlayer = MainThreadOnlyPlayer.create();
11-
const mainThreadWithWorkerPlayer = MainThreadWithWorkerPlayer.create();
12-
13-
const MAIN_THREAD_ONLY_VIDEO_ID = 'main-thread-only-player';
14-
const MAIN_THREAD_WITH_WORKER_VIDEO_ID = 'main-thread-with-worker-player';
15-
16-
/**
17-
*
18-
*/
19-
function App(): JSX.Element {
20-
useEffect(() => {
21-
const mainThreadOnlyPlayerElem = document.getElementById(MAIN_THREAD_ONLY_VIDEO_ID) as HTMLVideoElement;
22-
const mainThreadWithWorkerPlayerElem = document.getElementById(
23-
MAIN_THREAD_WITH_WORKER_VIDEO_ID
24-
) as HTMLVideoElement;
25-
26-
mainThreadOnlyPlayer.updateConfiguration({ mse: { requiredBufferDuration: 15 } });
27-
mainThreadWithWorkerPlayer.updateConfiguration({ mse: { requiredBufferDuration: 15 } });
28-
29-
mainThreadOnlyPlayer.attach(mainThreadOnlyPlayerElem);
30-
mainThreadWithWorkerPlayer.attach(mainThreadWithWorkerPlayerElem);
31-
32-
return (): void => {
33-
mainThreadOnlyPlayer.detach();
34-
mainThreadWithWorkerPlayer.detach();
35-
};
36-
}, []);
1+
import React from 'react';
2+
import { ThemeProvider } from '@mui/material/styles';
3+
import CssBaseline from '@mui/material/CssBaseline';
4+
import AppRoutes from './routes/AppRoutes';
5+
import theme from './styles/theme';
376

7+
const App: React.FC = () => {
388
return (
39-
<>
40-
<div>
41-
<a href="https://vitejs.dev" target="_blank">
42-
<img src={viteLogo} className="logo" alt="Vite logo" />
43-
</a>
44-
<a href="https://react.dev" target="_blank">
45-
<img src={reactLogo} className="logo react" alt="React logo" />
46-
</a>
47-
</div>
48-
<h1>@videojs/playback Demo</h1>
49-
<div className="card">
50-
<p>Open the console to see Player's Factory</p>
51-
</div>
52-
53-
<div className="player-container">
54-
<h1>Main Thread Only Player</h1>
55-
<video id="main-thread-only-player"></video>
56-
</div>
57-
<div className="player-container">
58-
<h1>Main Thread With Worker Player</h1>
59-
<video id="main-thread-with-worker-player"></video>
60-
</div>
61-
</>
9+
<ThemeProvider theme={theme}>
10+
<CssBaseline />
11+
<AppRoutes />
12+
</ThemeProvider>
6213
);
63-
}
14+
};
6415

6516
export default App;

‎packages/playback/demo/src/assets/react.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎packages/playback/demo/src/components/AddPresetTile.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React, { useState } from 'react';
2+
import { Card, CardContent, Typography, Box } from '@mui/material';
3+
import { Add } from '@mui/icons-material';
4+
import PresetDialog from './PresetDialog';
5+
import useBoundStore from '../stores/boundStore';
6+
import { Preset } from '../types/preset';
7+
8+
const AddPresetTile: React.FC = () => {
9+
const [open, setOpen] = useState(false);
10+
const { addPreset } = useBoundStore();
11+
12+
const handleSave = (newPreset: Omit<Preset, 'id'>) => {
13+
addPreset(newPreset);
14+
};
15+
16+
return (
17+
<>
18+
<Card
19+
onClick={() => setOpen(true)}
20+
sx={{
21+
border: '2px dashed',
22+
display: 'flex',
23+
alignItems: 'center',
24+
justifyContent: 'center',
25+
height: 200,
26+
cursor: 'pointer',
27+
'&:hover': {
28+
backgroundColor: 'rgba(255, 255, 255, 0.1)',
29+
},
30+
}}
31+
>
32+
<CardContent>
33+
<Box sx={{ textAlign: 'center' }}>
34+
<Add sx={{ fontSize: 48 }} />
35+
<Typography variant="h6">Add New Preset</Typography>
36+
</Box>
37+
</CardContent>
38+
</Card>
39+
<PresetDialog
40+
open={open}
41+
onClose={() => setOpen(false)}
42+
onSave={handleSave}
43+
onDelete={() => {}}
44+
mode="create"
45+
/>
46+
</>
47+
);
48+
};
49+
50+
export default AddPresetTile;

‎packages/playback/demo/src/components/FirebaseLogin.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React, { useEffect, useRef } from "react";
2+
import firebase from "firebase/compat/app";
3+
import "firebaseui/dist/firebaseui.css";
4+
import * as firebaseui from "firebaseui";
5+
import { auth } from "../services/firebase";
6+
7+
interface LoginDialogProps {
8+
onSuccessfulLogin: () => void;
9+
}
10+
11+
const FirebaseAuth: React.FC<LoginDialogProps> = ({ onSuccessfulLogin }) => {
12+
const uiRef = useRef<firebaseui.auth.AuthUI | null>(null);
13+
14+
useEffect(() => {
15+
if (!uiRef.current) {
16+
uiRef.current = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(auth);
17+
}
18+
19+
uiRef.current.start("#firebaseui-auth-container", {
20+
signInOptions: [
21+
firebase.auth.EmailAuthProvider.PROVIDER_ID,
22+
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
23+
],
24+
signInFlow: 'popup',
25+
signInSuccessUrl: "/",
26+
callbacks: {
27+
signInSuccessWithAuthResult: () => {
28+
onSuccessfulLogin();
29+
30+
// Prevents redirect
31+
return false;
32+
},
33+
},
34+
});
35+
36+
return () => {
37+
if (uiRef.current) {
38+
uiRef.current.reset();
39+
};
40+
};
41+
}, []);
42+
43+
return <div id="firebaseui-auth-container"></div>;
44+
};
45+
46+
export default FirebaseAuth;

‎packages/playback/demo/src/components/Header.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import { AppBar, Toolbar, Typography, Button } from '@mui/material';
3+
import { User } from 'firebase/auth';
4+
5+
interface HeaderProps {
6+
currentUser: User | null;
7+
onLoginClick: () => void;
8+
onLogoutClick: () => void;
9+
}
10+
11+
const Header: React.FC<HeaderProps> = ({ currentUser, onLoginClick, onLogoutClick }) => {
12+
return (
13+
<AppBar position="static" sx={{ backgroundColor: '#1c1f26' }}>
14+
<Toolbar>
15+
<Typography variant="h6" sx={{ flexGrow: 1 }}>
16+
Video.js Demo
17+
</Typography>
18+
{!currentUser ? (
19+
<Button onClick={onLoginClick} color="inherit">Login</Button>
20+
) : (
21+
<Button onClick={onLogoutClick} color="inherit">Logout</Button>
22+
)}
23+
</Toolbar>
24+
</AppBar>
25+
);
26+
};
27+
28+
export default Header;

0 commit comments

Comments
 (0)