-
Notifications
You must be signed in to change notification settings - Fork 6
/
Playback.js
53 lines (42 loc) · 1.35 KB
/
Playback.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import { useContext, useEffect, useState } from "react";
import { AppContext } from "../context/AddressContext";
import classes from "./Playback.module.css";
import AdvertisementForm from "./AdvertisementForm";
import { useParams } from "react-router-dom";
const Playback = () => {
const [showAd, setShowAd] = useState(false);
const [playbackUri, setPlaybackUri] = useState("");
const [imageUrl, setImageUrl] = useState("");
const ctx = useContext(AppContext);
const {id} = useParams();
let playbackId;
useEffect(() => {
const getId = async () => {
playbackId = await ctx.sharedState.getPlaybackId(+id);
setPlaybackUri(playbackId);
}
getId();
}, []);
const showAdHandler = (shouldShow) => {
setShowAd(shouldShow);
}
const setUrlHandler = (url) => {
setImageUrl(url);
}
return (
<div className= {classes.page}>
<iframe
className={classes.screen}
src={`https://lvpr.tv?v=${playbackUri}`}
frameborder="0"
width="75%"
height="450"
allowfullscreen
allow="autoplay; encrypted-media; picture-in-picture"
sandbox="allow-scripts"
></iframe>
{showAd ? <img src = {imageUrl} width="270px" height= "100%"></img> : <AdvertisementForm showAd = {showAdHandler} imageUrl = {setUrlHandler}/>}
</div>
);
};
export default Playback;