<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video Player</title>
<link rel="stylesheet" type="text/css" href="/css/site.css">
<link rel="stylesheet" type="text/css" href="/tv/css/icons.css">
<link rel="stylesheet" type="text/css" href="/tv/css/tvplayer.css">
<link rel="stylesheet" type="text/css" href="/tv/css/common.css">
<link rel="stylesheet" type="text/css" href="/tv/css/category_colors.css">
<script src="/js/utility.js"></script> <!-- ECMA not JS -->
<script src="/js/util.qjs"></script>
<script src="/tv/js/common.js"></script>
<!-- <script src="/tv/js/recordingrules.js"></script> -->
</head>
<body>

<%
"use strict";

import "/js/utility.js"
import "/tv/js/constants.js"
import "/tv/js/tvutil.qjs"

    var myth = new Myth();
    var dvr = new Dvr();
    var content = new Content();

    var recordedID = getArg("RecordedId");

    var program = dvr.GetRecorded(recordedID);

    var videoProfile = "360p";
//    if (Server.CLIENT_NETWORK == "local")
//        videoProfile = "720p";

    var streamInfo = 0;
    // Relative bitrates and resolutions taken from
    // https://developer.apple.com/library/ios/technotes/tn2224/_index.html#//apple_ref/doc/uid/DTS40009745-CH1-SETTINGSFILES
    if (videoProfile == "720p")
        streamInfo = content.AddRecordingLiveStream(recordedID, 0, 1280, 720, 2500000, 64000, -1); // Local - 2.564 Mbps 1280x720
    else
        streamInfo = content.AddRecordingLiveStream(recordedID, 0, 640, 360, 600000, 64000, -1); // Remote - 664 Kbps 640x360

    var streamID = 0;
    if (isValidObject(streamInfo))
        streamID = streamInfo.Id;

    // The stream info can change after it has been 'Added', in particular
    // the height/width can change because the requested dimensions don't
    // match the aspect ratio of the source.
    //
    // This is a bug in the services API which we're temporarily working around
    streamInfo = content.GetLiveStream(streamInfo.Id);

    var aspectRatio = 1.777778; // Assume 16:9 as a default
    var playerWidth = 640;
    var playerHeight = 360;

    if (streamInfo.Width > 0 && streamInfo.Height > 0)
    {
        aspectRatio = streamInfo.Width / streamInfo.Height;
        playerHeight = playerWidth / aspectRatio;
    }

    var previewImage = "/Content/GetPreviewImage?RecordedId=" + program.Recording.RecordedId +
                        "&amp;height=" + playerHeight +
                        "&amp;format=JPG";

    var ua = RequestHeaders.user_agent.toLowerCase();

    // iOS and Android (Browser, Opera but not Firefox) supports HLS
    // with HTML 5 but JW Player 5 doesn't fallback as it should
    var useHTML5Video = (ua.match(/android/g) || ua.match(/(iPhone|iPad)/g)) ? true : false;
%>

<div id="playerContainer" class="playerContainer">

<div class="topBar">
    <%=qsTr("Playing")%>: <%=program.Title%> <% if (program.SubTitle != "") {%> - "<%=program.SubTitle%>"<%}%>
</div>

<div id="playerBackground">
<div id="player"> <!-- Automatically replaced with the swf by JW Player (swf or HTML) -->
<!--    <div id="player_wrapper" style="width: <%=streamInfo.Width%>px; height: <%=streamInfo.Height%>px;">
        <video width="<%=streamInfo.Width%>" height="<%=streamInfo.Height%>" controls -->
    <div id="player_wrapper" style="width: <%=playerWidth%>px; height: <%=playerHeight%>px">
        <video width="width: 100%; height: 100%;" controls
               poster="<%=previewImage%>" preload="metadata">
        <source src="<%=streamInfo.RelativeURL%>">
        Your browser does not support the &lt;video&gt; tag, please upgrade your browser.
        </video>
    </div>
</div>
</div>

<div id="playerControlBar">
    <div id="playerControls">
    <button id="playButton" class="playbackControl" onClick="play()">Play</button>&nbsp;
    <button id="stopButton" class="playbackControl" onClick="jwplayer('player').stop()">Stop</button>&nbsp;
    <button id="muteButton" class="playbackControl" onClick="jwplayer('player').setMute()">Mute</button>&nbsp;
    <label for="hlsProfileList">
        <%=qsTr("Quality")%>:
<!--    <select name="profile" id="hlsProfileList">
        <option value="360p"><%=qsTr("360p (Mobile)")%></option>
        <option value="720p" <%if (videoProfile == "720p") {%>selected<%}%>><%=qsTr("720p (WiFi)")%></option>
    </select>-->
    </label>
    </div>
</div>

<div class="programBox">
    <div class="programInnerBox">
        <div class="programHeader">
            <span class="programTitle"><%=escapeHTML(program.Title)%> <% if (isValidObject(program.Airdate) && program.Airdate.getFullYear() && program.CatType == "movie") {%>(<%=program.Airdate.getFullYear()%>)<%}%></span>
            <span class="programStartTime"><%=myth.GetFormatDate(program.StartTime)%>, <%=myth.GetFormatTime(program.StartTime)%></span>
        </div>
        <div class="programBody">
            <span class="programSubtitle"><%=escapeHTML(program.SubTitle)%></span>
            <% if (program.Season > 0 || program.Episode > 0) { %>
                <span class="programSeasonEpisode">
                    <% if (program.Season > 0) { %>(<%=qsTr("S %1", "Season x").arg(program.Season)%>
                    <%} else {%>(<% } if (program.TotalEpisodes > 0) { %><%=qsTr("Ep %1/%2", "Episode x of y").arg(program.Episode).arg(program.TotalEpisodes)%>)
                    <%} else if (program.Episode > 0) {%><%=qsTr("Ep %1", "Episode x").arg(program.Episode)%>)<%}%>
                </span>
            <%}%>
            <span class="programDescription"><%=escapeHTML(program.Description)%></span>
        </div>
    </div>
</div>

</div>

<script type="text/javascript" src="/js/fileutil.js"></script>
<%
    if (!useHTML5Video)
    {
        var jwpExists = 0;

        var hash = content.GetHash("3rdParty", "JW_Player/player.swf");

        if (hash != "")
        {
            jwpExists = 1;
%>
<script type="text/javascript" src="/StorageGroup/3rdParty/JW_Player/jwplayer.js"></script>
<script type="text/javascript" nonce="<%=CSP_NONCE%>">

    var playlist = "<%=streamInfo.RelativeURL%>";
    var width = <%=playerWidth%>; // Not the Video width, but the width of the embedded player
    var height = <%=playerHeight%>; // Not the Video height, but the height of the embedded player
    var duration = <%=(program.Recording.EndTs - program.Recording.StartTs) / 1000%>;
    var previewImage = "<%=previewImage%>";

    function play()
    {
            jwplayer('player').load({file: playlist, provider: "/StorageGroup/3rdParty/JW_Player/adaptiveProvider.swf"});
            jwplayer('player').play();
            return;
    }

    jwplayer('player').setup({
        file: playlist,
        width: width,
        height: height,
        modes: [
        {
            type: "flash",
            src: "/StorageGroup/3rdParty/JW_Player/player.swf",
            config: {
                file: playlist,
                provider: "/StorageGroup/3rdParty/JW_Player/adaptiveProvider.swf",
// This is far from complete
//                skin: "/3rdParty/jwplayer/mythtv_skin/MythTV.zip",
                backcolor: "2A2A2A",
                frontcolor: "FFFFFF",
                image: previewImage,
                smoothing: true,
                autostart: false,
                duration: duration
            }
        },
        {
            type: "html5",
            config: {
                file: playlist,
                provider: "/StorageGroup/3rdParty/JW_Player/adaptiveProvider.swf",
                backcolor: "2A2A2A",
                frontcolor: "FFFFFF",
                image: previewImage,
                autostart: false,
                duration: duration
            }
        }
        ]
    });

</script>
<%
        }
        else
        {
%>

<b>Your browser does not support adaptive streaming with HTML 5 Video, you will need to&nbsp;
<a href='javascript:void(0);' onClick="javascript:loadContent('/3rdParty/jwplayer.qsp');"><i18n>install JW Player&trade;</i18n></a>&nbsp;
to use this HLS test page</b><hr><br>
<%
        }
    }
%>

</body>
</html>
