Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React, { useEffect } from 'react';
import ReactJWPlayer from 'react-jw-player';
import { playerScript } from 'config';
// import { Analytics } from "functions/utils/Analytics";
import { buildArtimediaParams } from 'functions/helpers/artimedia';
import { dispatchGalaxyEvent } from './PlayerAnalytics';
import useEvtListener from 'functions/hooks/useEvtListener';
/****************************************
Author: aamirkhan180@gmail.com
github @iamaamir
createdAt: 08/07/2019
*****************************************/
// globals
const playerElementID = 'mzaaloPartnerPlayer';
const galaxyEvents = 'PLAY,PAUSE,STOP'.split(',');
//default for SamsungPlayer
const defaultPlayerOptions = {
height: window.innerHeight,
width: window.innerWidth,
mute: true,
repeat: false,
displaytitle: false,
displaydescription: false,
stretching: 'fill',
// height: '100%',
// width: '100%',
autostart: false,
withCredentials: false
// skin: {
// name: "aamir"
// }
};
const setUpArtimedia = function(data) {
defaultPlayerOptions['plugins'] = {
'//akamai.advsnx.net/CDN/sdk/plugins/jw7/plugin.js': buildArtimediaParams(
data
)
};
};
const SamsungPlayer = ({ customProps, playerData, DEBUG }) => {
let playerInstance;
if (playerData.arti_test) {
setUpArtimedia(playerData);
}
const setSize = () => {
// try {
// if (!!window.jwplayer) {
// const height = window.innerHeight;
// const width = window.innerWidth;
// window.jwplayer().resize(width, height);
// }
// } catch (ex) {
// console.log('Exception while applying resizing SamsungPlayer:: ', ex);
// }
};
useEvtListener('resize', setSize);
useEvtListener('orientationchange', () => {
console.log(global.screen.orientation.type);
});
const handlePlay = () => {
console.log('SamsungPlayer started playing');
DEBUG ? setFullScreen() : activeFullScreen();
// Track When Videos started Playing
// Analytics.sendEvent("content_played", {
// asset_id: data.assetId,
// asset_name: data.title,
// thumbnail_image_url: image,
// asset_description: data.description ? data.description : "",
// asset_type: data.asset_type,
// genre_name: data.genre ? data.genre.join(", ") : "",
// language: data.language ? data.language : "",
// content_length: data.duration,
// progress: data.watched_for
// });
};
function openFullscreen(elem) {
const requestFullscreen =
elem.requestFullscreen ||
elem.mozRequestFullScreen ||
elem.webkitRequestFullscreen ||
elem.msRequestFullscreen;
console.log('requestFullscreen', requestFullscreen);
return requestFullscreen.call(elem);
}
// function setFullScreen() {
// let elem = document.getElementById(playerElementID).querySelector('video');
// if (!document.fullscreenElement) {
// openFullscreen(elem).catch(e => console.log("fullscreen",e));
// } else {
// document.exitFullscreen();
// }
// }
function setFullScreen() {
// openFullscreen(document.getElementById(playerElementID));
playerInstance.setFullscreen(true, true);
}
function activeFullScreen() {
if (window.JavaScriptBridge && window.JavaScriptBridge.requestFullscreen) {
window.setFullScreen = setFullScreen;
window.JavaScriptBridge.requestFullscreen('setFullScreen');
}
}
const init = () => {
playerInstance = window.jwplayer();
setSize();
galaxyEvents.forEach(evtName =>
playerInstance.on(evtName.toLowerCase(), () =>
dispatchGalaxyEvent(evtName, playerData)
)
);
playerInstance.once('fullscreen', () => {
console.log('calling fullscreen');
setTimeout(() => {
// window.screen.orientation.lock("landscape");
window.screen.orientation
.lock('landscape-primary')
.then(function() {
// alert("Locked");
})
.catch(function(error) {
alert(error);
});
}, 5000);
});
// setFullScreen();
};
return !!playerData.video ? (
<ReactJWPlayer
// file={file}
playlist={[
{
file: playerData.video,
title: playerData.title,
duration: playerData.duration,
tracks: [
{
file: playerData.stream_images_url,
kind: 'thumbnails'
}
],
// "description": data.description ? data.description : '',
sources: [
{
file: playerData.video,
// fairplay m3u8 streems
drm: {
fairplay: {
certificateUrl:
'https://x-drm.uplynk.com/fairplay/public_key/12ccd788e5224b0692264ac02cc4929f_new.cer'
}
}
},
{
file: playerData.video,
// widevine mpd streems
drm: {
widevine: {
url: 'https://content.uplynk.com/wv'
}
}
},
{
file: playerData.video
}
]
}
]}
playerId={playerElementID}
playerScript={playerScript}
customProps={Object.assign(defaultPlayerOptions, customProps)}
onPlay={handlePlay}
onReady={init}
/>
) : (
<h1 className="centered">
Oops! {playerData.message || 'something went wrong'}
</h1>
);
};
export default React.memo(SamsungPlayer);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment