81 lines
2.4 KiB
TypeScript
Executable File
81 lines
2.4 KiB
TypeScript
Executable File
import {Fragment} from 'react';
|
|
import {PlayerContext} from '@common/player/player-context';
|
|
import {MediaItem} from '@common/player/media-item';
|
|
import {PlayerOutlet} from '@common/player/ui/player-outlet';
|
|
import {PlayButton} from '@common/player/ui/controls/play-button';
|
|
import {VolumeControls} from '@common/player/ui/controls/volume-controls';
|
|
import {Seekbar} from '@common/player/ui/controls/seeking/seekbar';
|
|
import {FormattedCurrentTime} from '@common/player/ui/controls/formatted-current-time';
|
|
import {FormattedPlayerDuration} from '@common/player/ui/controls/formatted-player-duration';
|
|
import {PlaybackOptionsButton} from '@common/player/ui/controls/playback-options-button';
|
|
import clsx from 'clsx';
|
|
import {SeekButton} from '@common/player/ui/controls/seeking/seek-button';
|
|
import {Forward10Icon} from '@common/icons/material/Forward10';
|
|
import {UndoIcon} from '@common/icons/material/Undo';
|
|
|
|
const mediaItem: MediaItem = {
|
|
id: 'test1',
|
|
src: 'storage/title-videos/pLiHKnN3dXz0Ep0rVrgiZ4mSS0lyDV8fnrcwmDOE.mp4',
|
|
poster: 'https://peach.blender.org/wp-content/uploads/bbb-splash.png',
|
|
provider: 'htmlAudio',
|
|
};
|
|
|
|
const mediaItem2: MediaItem = {
|
|
id: 'test2',
|
|
src: '0G3_kG5FFfQ',
|
|
provider: 'youtube',
|
|
};
|
|
|
|
interface Props {
|
|
className?: string;
|
|
}
|
|
export function AudioPlayer({className}: Props) {
|
|
return (
|
|
<PlayerContext
|
|
id="audio"
|
|
options={{
|
|
initialData: {
|
|
queue: [mediaItem2, mediaItem],
|
|
cuedMediaId: 'test1',
|
|
},
|
|
}}
|
|
>
|
|
<div className={clsx(className, 'shadow rounded')}>
|
|
<Player />
|
|
</div>
|
|
</PlayerContext>
|
|
);
|
|
}
|
|
|
|
function Player() {
|
|
return (
|
|
<Fragment>
|
|
<PlayerOutlet className="w-full h-full" />
|
|
<Controls />
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
function Controls() {
|
|
return (
|
|
<div className="flex items-center gap-24 p-14 text-sm">
|
|
<div className="flex items-center gap-4">
|
|
<SeekButton seconds="-15">
|
|
<UndoIcon />
|
|
</SeekButton>
|
|
<PlayButton />
|
|
<SeekButton seconds="+15">
|
|
<Forward10Icon />
|
|
</SeekButton>
|
|
</div>
|
|
<FormattedCurrentTime className="min-w-40 text-right" />
|
|
<Seekbar fillColor="bg-black" trackColor="bg-black/20" />
|
|
<FormattedPlayerDuration className="min-w-40 text-right" />
|
|
<div className="flex items-center gap-4">
|
|
<PlaybackOptionsButton />
|
|
<VolumeControls fillColor="bg-black" trackColor="bg-black/20" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|