SamsungPlayer.js

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);