LogalDeveloper/owncast
0
Fork 0
Code Activity

Add player poster

Browse Source
This commit is contained in:
Gabe Kangas
2022-05-10 15:36:09 -07:00
parent 9bb37679c0
commit ff6886575f
14 changed files with 234 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/components/stores/ClientConfigStore.tsx
View File

@@ -10,6 +10,7 @@ import { getLocalStorage, setLocalStorage } from '../../utils/helpers';
import {
AppState,
ChatState,
VideoState,
ChatVisibilityState,
getChatState,
getChatVisibilityState,
@@ -39,6 +40,11 @@ export const chatStateAtom = atom<ChatState>({
default: ChatState.Offline,
});
export const videoStateAtom = atom<VideoState>({
key: 'videoStateAtom',
default: VideoState.Unavailable,
});
export const chatVisibilityAtom = atom<ChatVisibilityState>({
key: 'chatVisibility',
default: ChatVisibilityState.Visible,
@@ -71,6 +77,7 @@ export function ClientConfigStore() {
const [chatMessages, setChatMessages] = useRecoilState<ChatMessage[]>(chatMessagesAtom);
const setChatDisplayName = useSetRecoilState<string>(chatDisplayNameAtom);
const [appState, setAppState] = useRecoilState<AppState>(appStateAtom);
const [videoState, setVideoState] = useRecoilState<VideoState>(videoStateAtom);
const [accessToken, setAccessToken] = useRecoilState<string>(accessTokenAtom);
const [websocketService, setWebsocketService] =
useRecoilState<WebsocketService>(websocketServiceAtom);
@@ -81,7 +88,6 @@ export function ClientConfigStore() {
try {
const config = await ClientConfigService.getConfig();
setClientConfig(config);
setAppState(AppState.Online);
} catch (error) {
console.error(`ClientConfigService -> getConfig() ERROR: \n${error}`);
}
@@ -100,7 +106,6 @@ export function ClientConfigStore() {
setAccessToken(newAccessToken);
// setLocalStorage('accessToken', newAccessToken);
setChatDisplayName(newDisplayName);
setAppState(AppState.Online);
} catch (e) {
console.error(`ChatService -> registerUser() ERROR: \n${e}`);
}

2
web/components/ui/Content/Content.tsx
View File

@@ -60,7 +60,7 @@ export default function ContentComponent() {
return (
<Content className={`${s.root}`} data-columns={chatOpen ? 2 : 1}>
<div className={`${s.leftCol}`}>
<OwncastPlayer source="https://watch.owncast.online" />
<OwncastPlayer source="/hls/stream.m3u8" online={online} />
<Statusbar
online={online}
lastConnectTime={lastConnectTime}

75
web/components/ui/CrossfadeImage/CrossfadeImage.tsx Normal file
View File

@@ -0,0 +1,75 @@
import React, { useMemo, useState } from 'react';
type ObjectFit = React.CSSProperties['objectFit'];
interface CrossfadeImageProps {
src: string;
width: string;
height: string;
objectFit?: ObjectFit;
duration?: string;
}
const imgStyle: React.CSSProperties = {
position: 'absolute',
width: `100%`,
height: `100%`,
};
export default function CrossfadeImage({
src = '',
width,
height,
objectFit = 'fill',
duration = '1s',
}: CrossfadeImageProps) {
const spanStyle: React.CSSProperties = useMemo(
() => ({
display: 'inline-block',
position: 'relative',
width,
height,
}),
[width, height],
);
const imgStyles = useMemo(
() => [
{ ...imgStyle, objectFit, opacity: 0, transition: `opacity ${duration}` },
{ ...imgStyle, objectFit, opacity: 1, transition: `opacity ${duration}` },
{ ...imgStyle, objectFit, opacity: 0 },
],
[objectFit, duration],
);
const [key, setKey] = useState(0);
const [srcs, setSrcs] = useState(['', '']);
const nextSrc = src !== srcs[1] ? src : '';
const onLoadImg = () => {
setKey((key + 1) % 3);
setSrcs([srcs[1], nextSrc]);
};
return (
<span style={spanStyle}>
{[...srcs, nextSrc].map(
(src, index) =>
src !== '' && (
<img
key={(key + index) % 3}
src={src}
alt=""
style={imgStyles[index]}
onLoad={index === 2 ? onLoadImg : undefined}
/>
),
)}
</span>
);
}
CrossfadeImage.defaultProps = {
objectFit: 'fill',
duration: '3s',
};

2
web/components/ui/Statusbar/Statusbar.tsx
View File

@@ -45,7 +45,7 @@ export default function Statusbar(props: Props) {
} else {
onlineMessage = 'Offline';
if (lastDisconnectTime) {
rightSideMessage = `Last live ${formatDistanceToNow(lastDisconnectTime)} ago.`;
rightSideMessage = `Last live ${formatDistanceToNow(new Date(lastDisconnectTime))} ago.`;
}
}

36
web/components/video/OwncastPlayer.tsx
View File

@@ -1,15 +1,26 @@
import React from 'react';
import { useSetRecoilState } from 'recoil';
import VideoJS from './player';
import ViewerPing from './viewer-ping';
import VideoPoster from './VideoPoster';
import { getLocalStorage, setLocalStorage } from '../../utils/helpers';
import { videoStateAtom } from '../stores/ClientConfigStore';
import { VideoState } from '../../interfaces/application-state';
const PLAYER_VOLUME = 'owncast_volume';
const ping = new ViewerPing();
export default function OwncastPlayer(props) {
interface Props {
source: string;
online: boolean;
}
export default function OwncastPlayer(props: Props) {
const playerRef = React.useRef(null);
const { source } = props;
const { source, online } = props;
const setVideoState = useSetRecoilState<VideoState>(videoStateAtom);
const setSavedVolume = () => {
try {
@@ -51,7 +62,7 @@ export default function OwncastPlayer(props) {
},
sources: [
{
src: `${source}/hls/stream.m3u8`,
src: source,
type: 'application/x-mpegURL',
},
],
@@ -75,6 +86,7 @@ export default function OwncastPlayer(props) {
player.on('playing', () => {
player.log('player is playing');
ping.start();
setVideoState(VideoState.Playing);
});
player.on('pause', () => {
@@ -85,10 +97,26 @@ export default function OwncastPlayer(props) {
player.on('ended', () => {
player.log('player is ended');
ping.stop();
setVideoState(VideoState.Unavailable);
});
player.on('volumechange', handleVolume);
};
return <VideoJS options={videoJsOptions} onReady={handlePlayerReady} />;
return (
<div style={{ display: 'grid' }}>
{online && (
<div style={{ gridColumn: 1, gridRow: 1 }}>
<VideoJS
style={{ gridColumn: 1, gridRow: 1 }}
options={videoJsOptions}
onReady={handlePlayerReady}
/>
</div>
)}
<div style={{ gridColumn: 1, gridRow: 1 }}>
<VideoPoster online={online} initialSrc="/logo" src="/thumbnail.jpg" />
</div>
</div>
);
}

6
web/components/video/Player.module.scss
View File

@@ -1,5 +1,9 @@
.player {
height: 80vh;
width: 100%;
background-color: green;
background-color: black;
.vjs-big-play-centered .vjs-big-play-button {
z-index: 99999 !important;
}
}

5
web/components/video/VideoPoster.module.scss Normal file
View File

@@ -0,0 +1,5 @@
.poster {
background-color: black;
display: flex;
justify-content: center;
}

131
web/components/video/VideoPoster.tsx
View File

@@ -1,109 +1,46 @@
/*
VideoPoster is the image that covers up the video component and shows a
preview of the video, refreshing every N seconds.
It's more complex than it needs to be, using the "double buffer" approach to
cross-fade the two images. Now that we've moved to React we may be able to
simply use some simple cross-fading component.
*/
import { useEffect, useState } from 'react';
import CrossfadeImage from '../ui/CrossfadeImage/CrossfadeImage';
import s from './VideoPoster.module.scss';
import { useEffect, useLayoutEffect, useState } from 'react';
import { ReactElement } from 'react-markdown/lib/react-markdown';
const REFRESH_INTERVAL = 20_000;
const REFRESH_INTERVAL = 15000;
const TEMP_IMAGE = 'http://localhost:8080/logo';
const POSTER_BASE_URL = 'http://localhost:8080/';
interface Props {
initialSrc: string;
src: string;
online: boolean;
}
export default function VideoPoster(props): ReactElement {
const { active } = props;
const [flipped, setFlipped] = useState(false);
const [oldUrl, setOldUrl] = useState(TEMP_IMAGE);
const [url, setUrl] = useState(props.url);
const [currentUrl, setCurrentUrl] = useState(TEMP_IMAGE);
const [loadingImage, setLoadingImage] = useState(TEMP_IMAGE);
const [offlineImage, setOfflineImage] = useState(TEMP_IMAGE);
export default function VideoPoster(props: Props) {
const { online, initialSrc, src: base } = props;
let refreshTimer = null;
const setLoaded = () => {
setFlipped(!flipped);
setUrl(loadingImage);
setOldUrl(currentUrl);
};
const fire = () => {
const cachebuster = Math.round(new Date().getTime() / 1000);
setLoadingImage(`${POSTER_BASE_URL}?cb=${cachebuster}`);
const img = new Image();
img.onload = setLoaded;
img.src = loadingImage;
};
const stopRefreshTimer = () => {
clearInterval(refreshTimer);
refreshTimer = null;
};
const startRefreshTimer = () => {
stopRefreshTimer();
fire();
// Load a new copy of the image every n seconds
refreshTimer = setInterval(fire, REFRESH_INTERVAL);
};
let timer: ReturnType<typeof setInterval>;
const [src, setSrc] = useState(initialSrc);
const [duration, setDuration] = useState('0s');
useEffect(() => {
if (active) {
fire();
startRefreshTimer();
} else {
stopRefreshTimer();
}
}, [active]);
clearInterval(timer);
timer = setInterval(() => {
if (duration === '0s') {
setDuration('3s');
}
// On component unmount.
useLayoutEffect(
() => () => {
stopRefreshTimer();
},
[],
);
// TODO: Replace this with React memo logic.
// shouldComponentUpdate(prevProps, prevState) {
// return (
// this.props.active !== prevProps.active ||
// this.props.offlineImage !== prevProps.offlineImage ||
// this.state.url !== prevState.url ||
// this.state.oldUrl !== prevState.oldUrl
// );
// }
if (!active) {
return (
<div id="oc-custom-poster">
<ThumbImage url={offlineImage} visible />
</div>
);
}
setSrc(`${base}?${Date.now()}`);
}, REFRESH_INTERVAL);
}, []);
return (
<div id="oc-custom-poster">
<ThumbImage url={!flipped ? oldUrl : url} visible />
<ThumbImage url={flipped ? oldUrl : url} visible={!flipped} />
<div className={s.poster}>
{!online && <img src={initialSrc} alt="logo" height="500vh" />}
{online && (
<CrossfadeImage
src={src}
duration={duration}
objectFit="contain"
width="100%"
height="500px"
/>
)}
</div>
);
}
function ThumbImage({ url, visible }) {
if (!url) {
return null;
}
return (
<div
className="custom-thumbnail-image"
style={{
opacity: visible ? 1 : 0,
backgroundImage: `url(${url})`,
}}
/>
);
}