Skip to content

Commit

Permalink
refactor: use bitmovin-player-react instead of custom made
Browse files Browse the repository at this point in the history
* refactor channel switcher button to separate component
* set channel switcher button component based on stream selected / hovered

Signed-off-by: eXhumer <[email protected]>
  • Loading branch information
eXhumer committed Nov 30, 2024
1 parent c63f335 commit ed51067
Show file tree
Hide file tree
Showing 27 changed files with 126 additions and 150 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@
"@exhumer/f1tv-api": "^2.2.1",
"@reduxjs/toolkit": "^2.4.0",
"bitmovin-player": "^8.191.0",
"bitmovin-player-react": "^1.0.2",
"bitmovin-player-ui": "^3.75.0",
"bootstrap": "^5.3.3",
"react": "^18.3.1",
Expand Down
60 changes: 34 additions & 26 deletions src/player/React/App.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,28 @@
import { useEffect, useRef } from 'react';
import { type SourceConfig, PlayerEvent } from 'bitmovin-player';
import { type SourceConfig, PlayerAPI, PlayerEvent } from 'bitmovin-player';
import { BitmovinPlayer, CustomUi } from 'bitmovin-player-react';
import type { IpcRendererEvent } from 'electron';
import { F1TV } from '@exhumer/f1tv-api';

import styles from './App.module.scss';
import BitmovinPlayer, { BitmovinPlayerRef } from './Component/BitmovinPlayer';
import Overlay from './Component/Overlay';
import PlayerUI from './Component/PlayerUI';
import StreamSwitcherButton from './Component/StreamSwitcherButton';

import { updateAscendon, updateConfig, updatePlatform, updateVideoContainer } from './Slice/Player';
import { updateAscendon, updateConfig, updateCurrentPlayResult, updatePlatform, updateVideoContainer } from './Slice/Player';
import { usePlayerDispatch, usePlayerSelector } from './Hook';

import { author, productName } from '../../../package.json';
import { F1TVPlatform } from '../../main_window/React/Type';

import styles from './App.module.scss';
import './BitmovinPlayer.scss';

const uiContainerFactory = () => PlayerUI();

const customUi: CustomUi = {
containerFactory: uiContainerFactory
};

const App = () => {
const ascendon = usePlayerSelector(state => state.player.ascendon);
const config = usePlayerSelector(state => state.player.config);
Expand All @@ -27,7 +37,8 @@ const App = () => {
dispatch(updateVideoContainer(videoContainer));
};

const playerRef = useRef<BitmovinPlayerRef | null>(null);
const playerRef = useRef<PlayerAPI | null>(null);
const playerDivRef = useRef<HTMLDivElement | null>(null);

const switchChannel = (channelId?: number) => {
if (videoContainer === null || !playerRef.current)
Expand All @@ -42,6 +53,7 @@ const App = () => {
.then(playData => {
const currentRef = playerRef.current;

dispatch(updateCurrentPlayResult(playData));

const source: SourceConfig = {
title: `${videoContainer.metadata.title}${stream && stream.type === 'obc' ?
Expand Down Expand Up @@ -72,18 +84,18 @@ const App = () => {
source.dash = playData.url;
}

if (currentRef.api.getSource() === null)
currentRef.api.load(source);
if (currentRef.getSource() === null)
currentRef.load(source);

else {
if (currentRef.api.isLive()) {
const timeShift = currentRef.api.getTimeShift();
currentRef.api.load(source)
.then(() => currentRef.api.timeShift(timeShift));
if (currentRef.isLive()) {
const timeShift = currentRef.getTimeShift();
currentRef.load(source)
.then(() => currentRef.timeShift(timeShift));
} else {
const seekTime = currentRef.api.getCurrentTime();
currentRef.api.load(source)
.then(() => currentRef.api.seek(seekTime));
const seekTime = currentRef.getCurrentTime();
currentRef.load(source)
.then(() => currentRef.seek(seekTime));
}
}
});
Expand Down Expand Up @@ -113,23 +125,20 @@ const App = () => {
<Overlay>
<div className={styles['additional-streams-overlay']}>
{videoContainer.metadata.additionalStreams.map(stream => (
<button
<StreamSwitcherButton
key={stream.channelId}
onClick={() => {
switchChannel(stream.channelId);
}}
style={{
backgroundColor: stream.hex,
}}
>
{stream.reportingName}
</button>
onClick={(stream) => switchChannel(stream.channelId)}
stream={stream}
/>
))}
</div>
</Overlay>}
{videoContainer && config && <BitmovinPlayer
playerKey={config.bitmovin.bitmovinKeys.player}
playerRef={playerRef}
ref={playerDivRef}
customUi={customUi}
config={{
key: config.bitmovin.bitmovinKeys.player,
buffer: {
audio: {
forwardduration: config.bitmovin.buffer.audio.forwardduration,
Expand Down Expand Up @@ -234,7 +243,6 @@ const App = () => {
app_id: `com.${author.name}.${productName}`.toLowerCase(),
},
}}
ref={playerRef}
/>}
</> : <>
<h1>Loading...</h1>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
@import '../Skin/SkinModern/skin';
@import './Skin/SkinModern/skin';

#bitmovin-player {
height: 100vh;
margin: 0;
padding: 0;
.bitmovinplayer-container {
height: 100vh!important;
margin: 0!important;
padding: 0!important;
}

.bmpui-ui-titlebar,
Expand All @@ -15,12 +15,12 @@
}

.bmpui-ui-rewindbutton {
background-image: url('../Skin/SkinModern/assets/images/rewind.svg');
background-image: url('./Skin/SkinModern/assets/images/rewind.svg');
background-size: contain;
}

.bmpui-ui-forwardbutton {
background-image: url('../Skin/SkinModern/assets/images/forward.svg');
background-image: url('./Skin/SkinModern/assets/images/forward.svg');
background-size: contain;
}

Expand Down
79 changes: 0 additions & 79 deletions src/player/React/Component/BitmovinPlayer.tsx

This file was deleted.

36 changes: 36 additions & 0 deletions src/player/React/Component/StreamSwitcherButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { F1TV } from '@exhumer/f1tv-api';
import { useState } from 'react';
import { usePlayerSelector } from '../Hook';

type StreamType = F1TV.ContentVideoContainer['metadata']['additionalStreams'][number];

type StreamSwitcherButtonProps = {
onClick: (stream: StreamType) => void;
stream: StreamType;
};

const StreamSwitcherButton = ({ onClick, stream }: StreamSwitcherButtonProps) => {
const currentPlayResult = usePlayerSelector(state => state.player.currentPlayResult);

const [hovered, setHovered] = useState(false);

return (
<button
style={{
backgroundColor: stream.hex,
opacity: currentPlayResult !== null && currentPlayResult.channelId === stream.channelId ?
1 :
hovered ?
0.8 :
0.5,
}}
onClick={() => onClick(stream)}
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
>
{stream.reportingName}
</button>
);
};

export default StreamSwitcherButton;
2 changes: 1 addition & 1 deletion src/player/React/Skin/SkinModern/_skin-cast-receiver.scss
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
// We also display a pause image while playback is paused, instead of a play action button
.#{$prefix}-ui-hugeplaybacktogglebutton {
.#{$prefix}-image {
background-image: url('../Skin/SkinModern/assets/images/pause.svg');
background-image: url('./Skin/SkinModern/assets/images/pause.svg');
opacity: .7;
}

Expand Down
4 changes: 2 additions & 2 deletions src/player/React/Skin/SkinModern/_skin-smallscreen.scss
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
// Decrease huge play button size and replace icon with normal play icon
.#{$prefix}-ui-hugeplaybacktogglebutton {
.#{$prefix}-image {
background-image: url('../Skin/SkinModern/assets/images/play.svg');
background-image: url('./Skin/SkinModern/assets/images/play.svg');
background-size: 4em;
}
}
Expand All @@ -75,7 +75,7 @@
&.#{$prefix}-on {
.#{$prefix}-image {
animation: none;
background-image: url('../Skin/SkinModern/assets/images/pause.svg');
background-image: url('./Skin/SkinModern/assets/images/pause.svg');
visibility: visible;
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@
.#{$prefix}-ui-airplaytogglebutton {
@extend %ui-button;

background-image: url('../Skin/SkinModern/assets/images/airplay.svg');
background-image: url('./Skin/SkinModern/assets/images/airplay.svg');

&:hover {
@include svg-icon-shadow;
}

&.#{$prefix}-on {
background-image: url('../Skin/SkinModern/assets/images/airplayX.svg');
background-image: url('./Skin/SkinModern/assets/images/airplayX.svg');
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
.#{$prefix}-ui-audiotracksettingstogglebutton {
@extend %ui-settingstogglebutton;

background-image: url('../Skin/SkinModern/assets/images/audio-tracks.svg');
background-image: url('./Skin/SkinModern/assets/images/audio-tracks.svg');

&.#{$prefix}-on {
background-image: url('../Skin/SkinModern/assets/images/audio-tracksX.svg');
background-image: url('./Skin/SkinModern/assets/images/audio-tracksX.svg');
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@

& {
animation: #{$prefix}-fancy $buffering-animation-duration ease-in infinite;
background: url('../Skin/SkinModern/assets/images/loader.svg') no-repeat center;
background: url('./Skin/SkinModern/assets/images/loader.svg') no-repeat center;
display: inline-block;
height: 2em;
margin: .2em;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
@include hidden-animated;

& {
background: $color-background url('../Skin/SkinModern/assets/images/chromecast.svg') center no-repeat;
background: $color-background url('./Skin/SkinModern/assets/images/chromecast.svg') center no-repeat;
background-size: 7em 7em;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@
.#{$prefix}-ui-casttogglebutton {
@extend %ui-button;

background-image: url('../Skin/SkinModern/assets/images/chromecast.svg');
background-image: url('./Skin/SkinModern/assets/images/chromecast.svg');

&:hover {
@include svg-icon-shadow;
}

&.#{$prefix}-on {
background-image: url('../Skin/SkinModern/assets/images/chromecastX.svg');
background-image: url('./Skin/SkinModern/assets/images/chromecastX.svg');
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
}

& {
background-image: url('../Skin/SkinModern/assets/images/close.svg');
background-image: url('./Skin/SkinModern/assets/images/close.svg');
}

&:hover {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@
.#{$prefix}-ui-fullscreentogglebutton {
@extend %ui-button;

background-image: url('../Skin/SkinModern/assets/images/fullscreen.svg');
background-image: url('./Skin/SkinModern/assets/images/fullscreen.svg');

&:hover {
@include svg-icon-shadow;
}

&.#{$prefix}-on {
background-image: url('../Skin/SkinModern/assets/images/fullscreenX.svg');
background-image: url('./Skin/SkinModern/assets/images/fullscreenX.svg');
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
}

.#{$prefix}-image {
background-image: url('../Skin/SkinModern/assets/images/play_big.svg');
background-image: url('./Skin/SkinModern/assets/images/play_big.svg');
background-position: center;
background-repeat: no-repeat;
background-size: 7em;
Expand Down
Loading

0 comments on commit ed51067

Please sign in to comment.