53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react';
|
|
|
|
import style from './PlyrJS.module.scss'
|
|
|
|
import { VideoData } from '@/meta/data';
|
|
|
|
import "plyr-react/plyr.css"
|
|
|
|
import dynamic from 'next/dynamic';
|
|
|
|
interface Props {
|
|
data: VideoData
|
|
}
|
|
|
|
const PlyrJS: React.FC<Props> = (props) => {
|
|
|
|
|
|
const PlyrComponent = React.useMemo(() => {
|
|
return dynamic(() => import("plyr-react"), { ssr: false });
|
|
}, []);
|
|
|
|
// const Plyr = dynamic(() => import("plyr-react"), { ssr: false });
|
|
|
|
const { data } = props;
|
|
|
|
const plyrProps = {
|
|
source: { type: 'video', sources: data.srcSet }, // https://github.com/sampotts/plyr#the-source-setter
|
|
options: {
|
|
controls: [
|
|
'play', // Play/pause playback
|
|
'progress', // The progress bar and scrubber for playback and buffering
|
|
'current-time', // The current time of playback
|
|
'duration', // The full duration of the media
|
|
'mute', // Toggle mute
|
|
'volume', // Volume control
|
|
'captions', // Toggle captions
|
|
'settings', // Settings menu
|
|
'fullscreen', // Toggle fullscreen
|
|
]
|
|
}, // https://github.com/sampotts/plyr#options
|
|
}
|
|
|
|
return (
|
|
<div className={style.container}>
|
|
{/* @ts-ignore */}
|
|
<PlyrComponent {...plyrProps} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PlyrJS; |