in src/channel.js [14:143]
function AWSIVSPlayer(options) {
const divEl = useRef(null);
const videoEl = useRef(null);
const [muted, setMuted] = useState(true);
const PLAYBACK_URL = options.location;
const ARN = options.arn;
const heartCount = 2;
const [hearts, setHearts] = useState([]);
console.log(PLAYBACK_URL);
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://player.live-video.net/1.0.0/amazon-ivs-player.min.js';
script.async = true;
document.body.appendChild(script);
script.onload = () => {
if (IVSPlayer.isPlayerSupported) {
console.log("player init")
player = IVSPlayer.create();
player.attachHTMLVideoElement(document.getElementById('video-player'));
player.load(PLAYBACK_URL);
player.setMuted(true);
player.play();
player.addEventListener(IVSPlayer.PlayerState.READY, onStateChange);
player.addEventListener(IVSPlayer.PlayerState.PLAYING, onStateChange);
player.addEventListener(IVSPlayer.PlayerState.ENDED, onStateChange);
player.addEventListener(IVSPlayer.PlayerState.ERROR, onError);
player.addEventListener(IVSPlayer.PlayerEventType.TEXT_METADATA_CUE, function(cue) {
const metadataText = JSON.parse(cue.text);
console.log("TRIGGER!!");
console.log("prot: " + metadataText.prot);
console.log("playerID: " + metadataText.playerID)
if (metadataText.prot === "Like" && metadataText.playerID !== playerID) {
animateLike(false);
}
});
}
}
return () => {
console.log("return script");
document.body.removeChild(script);
player.removeEventListener(IVSPlayer.PlayerState.READY, onStateChange);
player.removeEventListener(IVSPlayer.PlayerState.PLAYING, onStateChange);
player.removeEventListener(IVSPlayer.PlayerState.ENDED, onStateChange);
player.removeEventListener(IVSPlayer.PlayerState.ERROR, onError);
player.removeEventListener(IVSPlayer.PlayerEventType.TEXT_METADATA_CUE);
}
}, [PLAYBACK_URL])
const onStateChange = (cue) => {
const newState = player.getState();
console.log(`Player State - ${newState}`);
};
const onError = (err) => {
console.warn('Player Event - ERROR:', err);
};
async function putMetaFunc() {
const user = await Auth.currentAuthenticatedUser();
const token = user.signInUserSession.idToken.jwtToken
console.log("put meta");
var payload = {
prot: 'Like',
playerID: playerID,
}
var params = {
arn: ARN,
/* required */
meta: JSON.stringify(payload) /* required */
};
const requestData = {
headers: {
Authorization: token
},
queryStringParameters: params,
}
try {
const data = await API.post('ivsmetainput', '/', requestData);
console.log(data);
}
catch (e) {
console.log("ERROR!!!");
console.log(e);
}
}
const animateLike = (putMeta) => {
for (let i = 0; i < heartCount; i++) {
setTimeout(() => {
setHearts((hearts) => [...hearts, {
id: Date.now(),
color: getRandomColor()
}]);
}, i * 200);
}
if (putMeta === true) {
console.log("animateLike");
putMetaFunc();
}
};
const removeHeart = () => {
const activeHearts = [...hearts];
activeHearts.shift();
setHearts(activeHearts);
};
const toggleMute = () => {
if (player === null) {
console.log("nukk");
}
const muteNext = !player.isMuted();
player.setMuted(muteNext);
setMuted(muteNext);
};
return (
<div class='player-ui' ref={divEl}>
<video
class='player-video-el'
id="video-player"
ref={videoEl}
playsInline
autoPlay
/>
<div className="player-ui-actions">
<button className="player-ui-button" onClick={toggleMute}>
{muted ? <VolumeOff /> : <VolumeUp />}
</button>
<div className="like-wrapper">
<button className="like-button" onClick={()=>{animateLike(true)}}>