<%
"use strict";

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

    var listOnly = 0;
    if (getArg("ListOnly"))
        listOnly = 1;

    var myth = new Myth();

    // Default is to sort recordings from most recent through to the oldest
    var sortDescending = true;
    if (getArg("SortAsc") == 1)
        sortDescending = false;

    var recGroup = "Default";
    if (getArg("RecordingGroup"))
        recGroup = getArg("RecordingGroup");

    var displayGroup = "";
    if (getArg("DisplayGroup"))
        displayGroup = getArg("DisplayGroup");

    var sortOrder = "";
    if (getArg("SortAsc"))
        sortOrder = getArg("SortAsc");

    var startIndex = 0;
    if (getIntegerArg("Start"))
        startIndex = getIntegerArg("Start");

    var dvr = new Dvr();

    // Get Recording Group List
    var recGroupList = dvr.GetRecGroupList();

    // Get Display Group List (Titles Only currently)
    var displayGroupList = dvr.GetTitleList(recGroup);
    // If the Display Group (Title) given as an argument is not actually present
    // in the list - true if we've just switched recording groups - then clear
    // this filter
    if (displayGroupList.indexOf(displayGroup) === -1)
        displayGroup = "";

    var PAGEINTERVAL = 10;
    var recordingList = dvr.GetRecordedList( sortDescending, startIndex, PAGEINTERVAL, displayGroup, recGroup, "" );

    var deletedList = dvr.GetRecordedList( false, 0, 1, "", "Deleted", "" );
    var showDeletedLink = (deletedList.TotalAvailable > 0) ? true : false;

    var nextStartIndex = (startIndex + PAGEINTERVAL);
    if (nextStartIndex >= recordingList.TotalAvailable)
        nextStartIndex = 0;

    var programs = recordingList.Programs;
%>

<% if (!listOnly) {%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%=qsTr("Recordings")%></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/recordings.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 type="text/javascript" src="/3rdParty/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/3rdParty/jquery/jqueryUI/js/jquery-ui-1.10.3.js"></script>
<script src="/3rdParty/jquery/jqueryJScroll/jquery.jscroll.js"></script>
<script src="/tv/js/common.js"></script>
<script src="/tv/js/recordings.js"></script>
</head>
<body>

<!-- Popup Option Menu -->
<!-- To avoid the need to define multiple overlapping menus, we use JS+CSS as
     an indirect if/else. It might seem convoluted but the alternatives are
     generating this bit of HTML client side with JS (bad), generating it server
     side (harder to maintain/template) or keeping in together inline with the
     other related html, with as little non-html markup as possible -->
<div id="optMenu" class="contextMenu" style="display:none;">
    <div class="button normalMenu" onClick="MythRecordings.DeleteRecording(gRecordedId, false, false)">
        <%=qsTr("Delete")%>
    </div>
    <div class="button normalMenu" onClick="MythRecordings.DeleteRecording(gRecordedId, true, false)">
        <%=qsTr("Delete and Re-Record")%>
    </div>
    <div class="button deletedMenu" onClick="unDeleteRecording(gRecordedId)">
        <%=qsTr("Undelete")%>
    </div>
    <div class="button deletedMenu" onClick="MythRecordings.DeleteRecording(gRecordedId, false, true)">
        <%=qsTr("Delete Forever")%>
    </div>
    <div class="button recordingMenu" onClick="stopRecording(gRecordedId)">
        <%=qsTr("Stop Recording")%>
    </div>
    <div class="button normalMenu" onClick="loadScheduler('recording', gChanID, gStartTime)">
        <%=qsTr("Edit recording rule")%>
    </div>
    <div class="button playMenu" onClick="MythRecordings.PlayInBrowser(gRecordedId)">
        <%=qsTr("Play in Browser")%>
    </div>
<%
    var myth = new Myth();
    var frontendList = myth.GetFrontends(true).Frontends;
    for (var nIdx = 0; nIdx < frontendList.length; nIdx++)
    {
%>
    <div class="button playMenu" onClick="MythRecordings.PlayOnFrontend(gRecordedId, '<%=frontendList[nIdx].IP%>', <%=frontendList[nIdx].Port%>)">
        <%=qsTr("Play on Frontend")%> <%=frontendList[nIdx].Name%>
    </div>
<%  } %>
    <div class="button playMenu">
        <a href="#" onClick="MythRecordings.GetStream(gRecordedId, 'xspf')"><%=qsTr("XSPF")%></a> /
        <a href="#" onClick="MythRecordings.GetStream(gRecordedId, 'm3u8')"><%=qsTr("M3U8")%></a> /
        <a href="#" onClick="MythRecordings.GetStream(gRecordedId, 'asx')"><%=qsTr("ASX")%></a>
    </div>
    <div class="button playMenu">
        <a href="#" onClick="MythRecordings.Download(gRecordedId)"><%=qsTr("Download")%></a>
    </div>
</div>

<!-- Popup Program Details Box -->
<div id="programDetails" class="programExDetail">
</div>

<!-- Wastebin - indicator of deleted recordings and link to deleted recording list -->
<div id="wastebin" class="wastebin" <% if (!showDeletedLink) {%>style="display:none;"<%}%> onclick="loadTVContent('/tv/recordings.qsp?RecordingGroup=Deleted')">
    <img src="/tv/images/wastebin.svg" height="32" alt="<%=qsTr("Wastebin")%>" />
</div>

<!-- Sort order, grouping etc -->
<div class="navigateBox">

    <form action="/tv/recordings.qsp">
    <label for="listRecGroup"><%=qsTr("Recording Group")%>:
    <select id="listRecGroup" name="RecordingGroup" onChange="submitForm(this.form)">
<%
    for (var grpIdx = 0; grpIdx < recGroupList.length; grpIdx++)
    {
        // Do not include the deleted recgroup, instead we have a direct link on the page
        if (recGroupList[grpIdx] == "Deleted")
            continue;
%>
        <option value="<%=recGroupList[grpIdx]%>" <%if (recGroup == recGroupList[grpIdx]) {%>selected<%}%>><%=recGroupList[grpIdx]%></option>
<%
    }
%>
    </select>
    </label>

    <label for="listSortOrder"><%=qsTr("Sort")%>:
    <select id="listSortOrder" name="SortAsc" onChange="submitForm(this.form)">
        <option label="Descending" value="0">Descending</option>
        <option label="Ascending" value="1" <%if (sortOrder == 1) {%>selected<%}%>>Ascending</option>
    </select>
    </label>
    <label for="listDisplayGroup"><%=qsTr("Filter")%>:
    <select id="listDisplayGroup" name="DisplayGroup" onChange="submitForm(this.form)">

        <option value="" <%if (displayGroup == displayGroupList[grpIdx]) {%>selected<%}%>>All</option>
<%
    for (var grpIdx = 0; grpIdx < displayGroupList.length; grpIdx++)
    {
%>
        <option value="<%=displayGroupList[grpIdx]%>" <%if (displayGroup == displayGroupList[grpIdx]) {%>selected<%}%>><%=displayGroupList[grpIdx]%></option>
<%
    }
%>
    </select>
    </label>
    </form>

</div>

<div id="recordingList-container" style="overflow:hidden;clear:both;width:100%;">

<div id="recordingList" class="recordingList jscroll">

<div class="topBar">
    <%=qsTr("Recordings")%>
</div>

<%} // End of the header %>

<%
// The nothing to display message
if (!isValidObject(programs) || programs.length === 0)
{
    var message = "";

    if (recGroup == "Default")
        message = qsTr("There are no recordings available.");
    else if (recGroup == "Deleted")
        message = qsTr("There are no deleted recordings.");
    else
        message = qsTr("There are no recordings matching the given filters.")
%>
    <div id="noRecordingsRow" class="noRecordingsRow">
        <%=message%>
    </div>
<%
}

for (var progIdx = 0; progIdx < programs.length; progIdx++)
{
    var program = programs[progIdx];
    var channel = program.Channel;

    var menu = "normalMenu";
    if (recGroup === "Deleted")
        menu = "deletedMenu";
    else if (program.Recording.Status == RecordingStatus.RECORDING)
        menu = "normalMenu recordingMenu"; // stopRecMenu

    // Used as a unique identifier and also to access the chanid
    // and starttime for the AJAX scheduling stuff
    // NOTE: DVR methods require recording start time, not scheduled start time
    var programIdentifier = channel.ChanId + "_" + program.Recording.StartTs.toISOString();

    // RecStatusToClass() - /tv/js/tvutil.qjs
    var statusClass = RecStatusToClass(program.Recording.Status);
%>
    <div class="recordingRow" id="<%=program.Recording.RecordedId%>_row">
        <div class="previewBox">
            <div class="previewImageBackground">
                <img alt="Preview Image" height="67" class="previewImage" src="/Content/GetPreviewImage?RecordedId=<%=program.Recording.RecordedId%>&amp;height=67&amp;format=JPG" lazyload />
            </div>
            <div class="watchButtons">
                <div class="watchButton watchRecordingLink"><a onClick="showMenu(this, 'playMenu');" data-recordedid="<%=program.Recording.RecordedId%>" data-chanid="<%=program.Channel.ChanId%>" data-recstarttime="<%=program.Recording.StartTs.toISOString()%>"><%=qsTr("Watch")%></a></div>
                <div class="watchButton playlistLink"><a onClick="showMenu(this, 'playlistMenu');" data-recordedid="<%=program.Recording.RecordedId%>" data-chanid="<%=program.Channel.ChanId%>" data-recstarttime="<%=program.Recording.StartTs.toISOString()%>">+</a></div>
            </div>
        </div>
        <div class="programBox">
            <div class="programInnerBox <%=statusClass%>" id="<%=programIdentifier%>" data-recordedid="<%=program.Recording.RecordedId%>" data-chanid="<%=program.Channel.ChanId%>" data-recstarttime="<%=program.Recording.StartTs.toISOString()%>" data-starttime="<%=program.StartTime.toISOString()%>" onMouseOver="startDetailTimer(this, 'recording');" onMouseOut="hideDetail(this);" onClick="showMenu(this, '<%=menu%>');">
                <div class="programHeader">
                    <span class="programTitle">
                        <% if (program.CatType == CategoryType.MOVIE) {%><img src="/tv/images/cat_movie.svg" width="18" height="13" alt="<%=qsTr("Movie")%>" title="<%=qsTr("Movie")%>" /><%}%>
                        <%=escapeHTML(program.Title)%> <% if (isValidObject(program.Airdate) && program.Airdate.getFullYear() && program.CatType == "movie") {%><span class="programAirDate"> (<%=program.Airdate.getFullYear()%>)</span><%}%>
                    </span>
                    <span class="programStartTime"><%=myth.GetFormatDate(program.StartTime)%>, <%=myth.GetFormatTime(program.StartTime)%></span>
                </div>
                <div class="programBody">
                    <div class="programIcons">
                        <% if (program.VideoProps & VideoProperty.HD1080) {%><img class="icon_hd1080" src="/tv/images/blank.png" alt="<%=qsTr("HD 1080")%>" title="<%=qsTr("HD 1080")%>" />
                        <% } else if (program.VideoProps & VideoProperty.HD720) {%><img class="icon_hd720" src="/tv/images/blank.png" alt="<%=qsTr("HD 720")%>" title="<%=qsTr("HD 720")%>" />
                        <% } else if (program.VideoProps & VideoProperty.HDTV) {%><img class="icon_hdtv" src="/tv/images/blank.png" alt="<%=qsTr("HD")%>" title="<%=qsTr("HD")%>" /><%}%>
                        <% if (program.ProgramFlags & ProgramFlag.AUTOEXP) {%><img class="icon_flautoexpire" src="/tv/images/blank.png" alt="<%=qsTr("Auto-Expire")%>" title="<%=qsTr("Auto-Expire")%>" /><%}%>
                        <% if (program.ProgramFlags & ProgramFlag.WATCHED) {%><img class="icon_flwatched" src="/tv/images/blank.png" alt="<%=qsTr("Watched")%>" title="<%=qsTr("Watched")%>" />
                        <% } else if (program.ProgramFlags & ProgramFlag.BOOKMARK) {%><img class="icon_flbookmark" src="/tv/images/blank.png" alt="<%=qsTr("Bookmark")%>" title="<%=qsTr("Bookmark")%>" /><%}%>
                        <% if (program.ProgramFlags & ProgramFlag.COMMFLAG) {%><img class="icon_flcommflag" src="/tv/images/blank.png" alt="<%=qsTr("Commercial Flagged")%>" title="<%=qsTr("Commercial Flagged")%>" /><%}%>
                        <!-- <% if (program.CatType == CategoryType.MOVIE) {%><img class="icon_catmovie" src="/tv/images/blank.png" alt="<%=qsTr("Movie")%>" title="<%=qsTr("Movie")%>" /><%}%> -->
                    </div>
                    <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>
<%
}
%>

<% if (nextStartIndex) { %>
<a class="jscroll-next" href="/tv/recordings.qsp?RecordingGroup=<%=encodeURIComponent(recGroup)%>&amp;DisplayGroup=<%=encodeURIComponent(displayGroup)%>&amp;SortAsc=<%=sortOrder%>&amp;Start=<%=nextStartIndex%>&amp;ListOnly=1"></a>
<%}%>

<% if (!listOnly) {%>
</div> <!-- End recordingList -->
</div> <!-- End recordingList-container -->

<script type="text/javascript" nonce="<%=CSP_NONCE%>">
    loadJScroll();
</script>

</body>
</html>
<%}%>
