design-react-kit
Version:
Componenti React per Bootstrap 5
99 lines • 5.78 kB
JavaScript
import React, { useEffect, useRef } from 'react';
import { VideoPlayer } from 'bootstrap-italia';
import { Input } from '../Input/Input';
import { Accordion } from '../Accordion/Accordion';
import { AccordionItem } from '../Accordion/AccordionItem';
import { AccordionHeader } from '../Accordion/AccordionHeader';
import { AccordionBody } from '../Accordion/AccordionBody';
import { Dimmer } from '../Dimmer/Dimmer';
import { DimmerButtons } from '../Dimmer/DimmerButtons';
import { Button } from '../Button/Button';
import { FormGroup, Label } from 'reactstrap';
import { Icon } from '../Icon/Icon';
export const Video = (props) => {
const [showTranscript, setShowTranscript] = React.useState(false);
const [showDisclaimer, setShowDisclaimer] = React.useState(false);
const [instance, setInstance] = React.useState();
const [rememberFlag, setRememberFlag] = React.useState(false);
const [disclaimerText, setDisclaimerText] = React.useState(`Accetta i cookie di YouTube per vedere il video. Puoi gestire le preferenze nella cookie policy.`);
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (el && VideoPlayer && !instance) {
setInstance(new VideoPlayer(el));
}
if (props.youtube?.url) {
if (props.youtube.hasDisclaimer) {
const serviceName = props.youtube.disclaimerKey || 'youtube';
const rememberFlag = localStorage.getItem(serviceName);
if (props.youtube.disclaimerText) {
setDisclaimerText(props.youtube.disclaimerText);
}
setRememberFlag(rememberFlag == 'true');
if (rememberFlag == 'true') {
setShowDisclaimer(false);
loadYouTubeVideo(props.youtube.url);
}
else {
setShowDisclaimer(true);
}
}
}
if (props.autoPlay) {
setTimeout(() => {
instance?.player?.play();
}, 1000);
}
return () => {
if (instance) {
instance.dispose();
}
};
}, []);
const loadYouTubeVideo = (url) => {
if (instance) {
instance.setYouTubeVideo(url);
}
};
const { controls = true, autoPlay = false, loop = false, fluid = true, poster = undefined } = props;
const videoProps = { controls, autoPlay, loop, fluid, poster };
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: 'row dimmable' },
React.createElement("video", { ...videoProps, ref: ref, preload: 'auto', className: 'video-js', "data-bs-video": true },
props.sources?.map((source) => React.createElement("source", { key: source.src, src: source.src, type: source.type })),
props.tracks?.map((track) => {
const { src, kind, label, srcLang, isDefault } = track;
return (React.createElement("track", { key: src, kind: kind, src: src, srcLang: srcLang || '', label: label, default: isDefault || false }));
})),
props.transcription && (React.createElement(Accordion, { className: 'vjs-transcription' },
React.createElement(AccordionItem, null,
React.createElement(AccordionHeader, { active: showTranscript, onToggle: () => setShowTranscript((p) => !p) }, props.transcriptionLabel || 'Trascrizione'),
React.createElement(AccordionBody, { active: showTranscript }, props.transcription)))),
React.createElement(Dimmer, { show: showDisclaimer, className: 'acceptoverlay-inner', wrapperClassName: 'acceptoverlay acceptoverlay-primary ' },
React.createElement("div", { className: 'acceptoverlay-icon' },
React.createElement(Icon, { icon: 'it-video', size: 'xl', className: '' })),
React.createElement("p", { dangerouslySetInnerHTML: { __html: disclaimerText } }),
React.createElement(DimmerButtons, { className: 'bg-primary' },
React.createElement(Button, { onClick: () => {
if (props.youtube?.url) {
if (props.youtube.hasDisclaimer) {
const serviceName = props.youtube.disclaimerKey || 'youtube';
if (rememberFlag) {
// set cookie
localStorage.setItem(serviceName, 'true');
}
else {
// reset cookie
localStorage.removeItem(serviceName);
}
loadYouTubeVideo(props.youtube.url);
}
setShowDisclaimer(false);
}
}, color: 'primary' }, props.acceptLabel || 'Accetta'),
React.createElement("div", { className: 'd-flex align-items-center ml-2' },
React.createElement(FormGroup, { check: true, inline: true },
React.createElement(Input, { id: `inline-checkbox_${props.id}`, type: 'checkbox', checked: rememberFlag, onChange: () => setRememberFlag((p) => !p) }),
React.createElement(Label, { check: true, for: `inline-checkbox_${props.id}`, defaultChecked: false, className: 'text-white' }, props.rememberLabel || 'Ricorda per tutti i video'))))))));
};
//# sourceMappingURL=Video.js.map