foozlereducer · May 6, 2020 18:47
diff --git a/sandbox0.php b/sandbox0.php
 <?php
    $svg_path = plugins_url() . '/_library/jwplayer/SVG';
    header("Access-Control-Allow-Origin: *");

    $m3u8_url = 'https://cdn.dev1.markmeldrum.com/c4ecdaf5-5f26-4e5b-83d5-929c4345c48d/hls/Big+Buck+Bunny+60fps+4K+-+Official+Blender+Foundation+Short+Film.m3u8';
    $expires = time() + 600;
    $key_pair_id = "APKAIV3VOUGTYYHWA3BA";
    $pk = WP_CONTENT_DIR . '/plugins/_library/pk-APKAIV3VOUGTYYHWA3BA.pem';
    $mmurl_m3u8_policy = createSignedCookiePolicy($m3u8_url, $expires, $pk, $key_pair_id);
    set_signed_cookie( $mmurl_m3u8_policy );
    $mpd_url = "https://cdn.dev1.markmeldrum.com/c4ecdaf5-5f26-4e5b-83d5-929c4345c48d/dash/Big+Buck+Bunny+60fps+4K+-+Official+Blender+Foundation+Short+Film.mpd";
    $mmurl_mpd_policy = createSignedCookiePolicy($mpd_url, $expires, $pk, $key_pair_id);
    set_signed_cookie( $mmurl_mpd_policy );
    $mp4_url = "https://cdn.dev1.markmeldrum.com/c4ecdaf5-5f26-4e5b-83d5-929c4345c48d/mp4/Big+Buck+Bunny+60fps+4K+-+Official+Blender+Foundation+Short+Film_Mp4_Avc_Aac_16x9_1280x720p_24Hz_4.5Mbps_qvbr.mp4";
    $mmurl_mp4_policy = createSignedCookiePolicy($mp4_url, $expires, $pk, $key_pair_id);
    set_signed_cookie( $mmurl_mp4_policy );

    function createSignedCookiePolicy( $resourceKey, $expires, $pk, $key_pair_id ) {
        require_once(WP_CONTENT_DIR . '/plugins/_library/aws/aws-autoloader.php' );

        // Create a CloudFront Client
        $client = new Aws\CloudFront\CloudFrontClient([
            'profile' => 'default',
            'version' => 'latest',
            'region' => 'us-east-1'
        ]);
    
        //Create a signed URL for the resource using the canned policy
        $policy = $client->getSignedCookie([
            'url' => $resourceKey,
            'expires' => $expires,
            'private_key' => $pk,
            'key_pair_id' => $key_pair_id
        ]);

        return $policy;
    }

    function set_signed_cookie( $policy, $distribution="dev1.markmeldrum.com" ) {
        foreach ($policy as $name => $value) {
            setcookie($name, $value, 0, "", $distribution, true, true);
        }
    }
 ?>
 <!DOCTYPE html>
 <html>
 <head>
    <title>MM JWPlayer</title>
    <script src="https://cdn.jwplayer.com/libraries/tihSszEY.js"></script>
    <style>
        /* Hide the default rewind, close captioning both the main bar and in the setting sub menu */
        .jw-icon-rewind, .jw-icon-cc, .jw-settings-captions, .jw-settings-submenu-captions {
            display:none !important;
        }
        h1 { text-align: center }
        article #player {
            margin: 0 auto;
        }
        article.video {
            border: 8px solid #444;
            padding: 4px 4px 4px 4px;
        }
    </style>


 </head>
 <body>
    <h1>Mark Meldrum AWS / JWPlayer</h1>
    <article class="video">
        <div id="player">Loading the player...</div>
    </article>
    <script>
        const browserDetection = () => {
            const browsers = {
                firefox: !!window.InstallTrigger,
                safari: !!window.ApplePaySession,
                opera: window.opr && !!window.opr.addons,
                chrome: window.chrome && !!window.chrome.webstore
            };

            return Object.keys(browsers).find(key => browsers[key] === true);
        };
        
        const player = jwplayer('player').setup({
            playlist: [{
                sources: [
                    {
                        file: <?php echo '"' . $mpd_url . '"' ?>
                    },
                    { 
                        file: <?php echo '"' . $m3u8_url  . '"' ?>
                    },
                    {
                        file: <?php echo '"' . $mp4_url . '"' ?>
                    }
                ]
            }],
            playbackRateControls: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2]
        });

        player.on('ready', function(e) {
            if ( 'safari' === browserDetection() ) {
                // make the playback rates the active menu, 
                // closed captions is hidden and is the default active window, 
                // this is why we need to set playback rates)
                const submenu_playback_rates = document.querySelector('#jw-settings-submenu-playbackRates');
                submenu_playback_rates.classList.add('jw-settings-submenu-active');
            }

            // Rewind Button
            ipth = <?php echo "'$svg_path/rewind-10.svg'"?>;
            let ttxt = "fast forward 15 seconds";
            let cback = jwt_mm_fastforward();
            let btnId = 'jwt-mm-fastforward';
            add_button(player, ipth, ttxt, jwt_mm_fastforward, btnId )
            function jwt_mm_fastforward() {
                const duration = player.getDuration();
                const now = player.getPosition()
                if ( ( now + 15 < duration ) ) {
                    player.seek( now + 15 );
                }
            }

            // Fast Forward Button
            ipth = <?php echo "'$svg_path/rewind-10.svg'"?>;
            ttxt = "rewind 15 seconds";
            cback = jwt_mm_rewind();
            btnId = 'jwt-mm-rewind';
            add_button( player, ipth, ttxt, jwt_mm_rewind, btnId )
            function jwt_mm_rewind() {
                const now = player.getPosition()
                if ( ( now - 15 ) > 0 ) {
                    player.seek( now - 15 );
                }
            }
           
        });

       
        let remove_default_button = (el) => {
            el.parentNode.removeChild(el);
            console.log( el )
        }

        let add_button = ( player, iconPath, tooltipText, cback, buttonId ) => {
            const p = player
            const icon_path= iconPath;
            console.log( icon_path )
            const tooltip_text = tooltipText;
            console.log( tooltip_text )
            const callback = cback;
            console.log( callback )
            const button_id = buttonId;
            console.log( button_id );
            p.addButton(icon_path, tooltip_text, callback, button_id);
        }
        </script>
    
 </body>
 </html>
	<?php
	$svg_path = plugins_url() . '/_library/jwplayer/SVG';
	header("Access-Control-Allow-Origin: *");

	$m3u8_url = 'https://cdn.dev1.markmeldrum.com/c4ecdaf5-5f26-4e5b-83d5-929c4345c48d/hls/Big+Buck+Bunny+60fps+4K+-+Official+Blender+Foundation+Short+Film.m3u8';
	$expires = time() + 600;
	$key_pair_id = "APKAIV3VOUGTYYHWA3BA";
	$pk = WP_CONTENT_DIR . '/plugins/_library/pk-APKAIV3VOUGTYYHWA3BA.pem';
	$mmurl_m3u8_policy = createSignedCookiePolicy($m3u8_url, $expires, $pk, $key_pair_id);
	set_signed_cookie( $mmurl_m3u8_policy );
	$mpd_url = "https://cdn.dev1.markmeldrum.com/c4ecdaf5-5f26-4e5b-83d5-929c4345c48d/dash/Big+Buck+Bunny+60fps+4K+-+Official+Blender+Foundation+Short+Film.mpd";
	$mmurl_mpd_policy = createSignedCookiePolicy($mpd_url, $expires, $pk, $key_pair_id);
	set_signed_cookie( $mmurl_mpd_policy );
	$mp4_url = "https://cdn.dev1.markmeldrum.com/c4ecdaf5-5f26-4e5b-83d5-929c4345c48d/mp4/Big+Buck+Bunny+60fps+4K+-+Official+Blender+Foundation+Short+Film_Mp4_Avc_Aac_16x9_1280x720p_24Hz_4.5Mbps_qvbr.mp4";
	$mmurl_mp4_policy = createSignedCookiePolicy($mp4_url, $expires, $pk, $key_pair_id);
	set_signed_cookie( $mmurl_mp4_policy );

	function createSignedCookiePolicy( $resourceKey, $expires, $pk, $key_pair_id ) {
	require_once(WP_CONTENT_DIR . '/plugins/_library/aws/aws-autoloader.php' );

	// Create a CloudFront Client
	$client = new Aws\CloudFront\CloudFrontClient([
	'profile' => 'default',
	'version' => 'latest',
	'region' => 'us-east-1'
	]);

	//Create a signed URL for the resource using the canned policy
	$policy = $client->getSignedCookie([
	'url' => $resourceKey,
	'expires' => $expires,
	'private_key' => $pk,
	'key_pair_id' => $key_pair_id
	]);

	return $policy;
	}

	function set_signed_cookie( $policy, $distribution="dev1.markmeldrum.com" ) {
	foreach ($policy as $name => $value) {
	setcookie($name, $value, 0, "", $distribution, true, true);
	}
	}
	?>
	<!DOCTYPE html>
	<html>
	<head>
	<title>MM JWPlayer</title>
	<script src="https://cdn.jwplayer.com/libraries/tihSszEY.js"></script>
	<style>
	/* Hide the default rewind, close captioning both the main bar and in the setting sub menu */
	.jw-icon-rewind, .jw-icon-cc, .jw-settings-captions, .jw-settings-submenu-captions {
	display:none !important;
	}
	h1 { text-align: center }
	article #player {
	margin: 0 auto;
	}
	article.video {
	border: 8px solid #444;
	padding: 4px 4px 4px 4px;
	}
	</style>


	</head>
	<body>
	<h1>Mark Meldrum AWS / JWPlayer</h1>
	<article class="video">
	<div id="player">Loading the player...</div>
	</article>
	<script>
	const browserDetection = () => {
	const browsers = {
	firefox: !!window.InstallTrigger,
	safari: !!window.ApplePaySession,
	opera: window.opr && !!window.opr.addons,
	chrome: window.chrome && !!window.chrome.webstore
	};

	return Object.keys(browsers).find(key => browsers[key] === true);
	};

	const player = jwplayer('player').setup({
	playlist: [{
	sources: [
	{
	file: <?php echo '"' . $mpd_url . '"' ?>
	},
	{
	file: <?php echo '"' . $m3u8_url . '"' ?>
	},
	{
	file: <?php echo '"' . $mp4_url . '"' ?>
	}
	]
	}],
	playbackRateControls: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2]
	});

	player.on('ready', function(e) {
	if ( 'safari' === browserDetection() ) {
	// make the playback rates the active menu,
	// closed captions is hidden and is the default active window,
	// this is why we need to set playback rates)
	const submenu_playback_rates = document.querySelector('#jw-settings-submenu-playbackRates');
	submenu_playback_rates.classList.add('jw-settings-submenu-active');
	}

	// Rewind Button
	ipth = <?php echo "'$svg_path/rewind-10.svg'"?>;
	let ttxt = "fast forward 15 seconds";
	let cback = jwt_mm_fastforward();
	let btnId = 'jwt-mm-fastforward';
	add_button(player, ipth, ttxt, jwt_mm_fastforward, btnId )
	function jwt_mm_fastforward() {
	const duration = player.getDuration();
	const now = player.getPosition()
	if ( ( now + 15 < duration ) ) {
	player.seek( now + 15 );
	}
	}

	// Fast Forward Button
	ipth = <?php echo "'$svg_path/rewind-10.svg'"?>;
	ttxt = "rewind 15 seconds";
	cback = jwt_mm_rewind();
	btnId = 'jwt-mm-rewind';
	add_button( player, ipth, ttxt, jwt_mm_rewind, btnId )
	function jwt_mm_rewind() {
	const now = player.getPosition()
	if ( ( now - 15 ) > 0 ) {
	player.seek( now - 15 );
	}
	}

	});


	let remove_default_button = (el) => {
	el.parentNode.removeChild(el);
	console.log( el )
	}

	let add_button = ( player, iconPath, tooltipText, cback, buttonId ) => {
	const p = player
	const icon_path= iconPath;
	console.log( icon_path )
	const tooltip_text = tooltipText;
	console.log( tooltip_text )
	const callback = cback;
	console.log( callback )
	const button_id = buttonId;
	console.log( button_id );
	p.addButton(icon_path, tooltip_text, callback, button_id);
	}
	</script>

	</body>
	</html>