1<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="iso-8859-1" %>
2
3<html>
4<head>
5    <%@ include file="head.jsp" %>
6    <%@ include file="jquery.jsp" %>
7
8	<link rel="stylesheet" href='<c:url value="/script/fontawesome/css/font-awesome.min.css"/>' type="text/css">
9
10    <style type="text/css">
11        .ui-progressbar-value {
12            background: #0090BB;
13        }
14    </style>
15    <script type="text/javascript" src="<c:url value="/dwr/engine.js"/>"></script>
16    <script type="text/javascript" src="<c:url value="/dwr/interface/multiService.js"/>"></script>
17
18    <script type="text/javascript" language="javascript">
19
20        var authorized = ${model.user.videoConversionRole};
21        var updateInterval = 2000;
22
23        function init() {
24            $("#conversion-progressbar").progressbar({
25                max: ${model.video.durationSeconds}
26            });
27            dwr.engine.setErrorHandler(null);
28            updateConversionStatus();
29        }
30        function updateConversionStatus() {
31            multiService.getVideoConversionStatus(${model.video.id}, conversionStatusCallback);
32            setTimeout(updateConversionStatus, updateInterval);
33        }
34        function conversionStatusCallback(conversionStatus) {
35            $("#conversion-progressbar").progressbar("option", "value", conversionStatus == null ? 0 : conversionStatus.progressSeconds);
36            $("#conversion-status-new").toggle(conversionStatus != null && conversionStatus.statusNew);
37            $("#conversion-status-in-progress").toggle(conversionStatus != null && conversionStatus.statusInProgress);
38            $("#conversion-status-completed").toggle(conversionStatus != null && conversionStatus.statusCompleted);
39            $("#conversion-status-error").toggle(conversionStatus != null && conversionStatus.statusError);
40
41            $("#conversion-start").toggle(authorized && (conversionStatus == null || conversionStatus.statusError));
42            $("#conversion-audio-track").toggle(authorized && (conversionStatus == null || conversionStatus.statusError));
43            $("#conversion-bit-rate").toggle(authorized && (conversionStatus == null || conversionStatus.statusError));
44            $("#conversion-cancel").toggle(authorized && (conversionStatus != null && (conversionStatus.statusNew || conversionStatus.statusInProgress)));
45
46            $("#conversion-target-file").text(conversionStatus == null ? "" : conversionStatus.targetFile);
47            $("#conversion-log-file").text(conversionStatus == null ? "" : conversionStatus.logFile);
48
49            if (conversionStatus != null && conversionStatus.statusInProgress) {
50                $("#conversion-thumb").attr("src", "coverArt.view?id=${model.video.id}&auth=${model.video.hash}&size=120&offset=" + conversionStatus.progressSeconds);
51                $("#conversion-status-progress").text(conversionStatus.progressString);
52                updateInterval = 1000;
53            } else {
54                updateInterval = 2000;
55            }
56        }
57        function startConversion() {
58            var audioTrackId = null;
59            if ($("#conversion-audio-track").length > 0) {
60                audioTrackId = parseInt($("#conversion-audio-track").val());
61            }
62            var bitRate = parseInt($("#conversion-bit-rate").val());
63            if (bitRate == 0) {
64                bitRate = null;
65            }
66            console.log(bitRate);
67            multiService.startVideoConversion(${model.video.id}, audioTrackId, bitRate, conversionStatusCallback);
68        }
69        function cancelConversion() {
70            multiService.cancelVideoConversion(${model.video.id}, conversionStatusCallback);
71        }
72        function back() {
73            if (document.referrer) {
74                location.href = document.referrer;
75            } else {
76                history.back();
77            }
78        }
79    </script>
80</head>
81
82<body class="mainframe bgcolor1" style="padding-bottom:0.5em" onload="init()">
83
84<h1><i class="fa fa-film fa-fw icon"></i>&nbsp;&nbsp;<fmt:message key="videoConverter.title"/></h1>
85
86<p style="margin-top:1.5em">
87    <fmt:message key="videoConverter.intro"/>
88</p>
89
90<div style="margin: 2em 3em;">
91    <div style="float:left; width:213px; margin-right: 3em">
92        <img id="conversion-thumb" src="coverArt.view?id=${model.video.id}&auth=${model.video.hash}&size=120" height="120" width="213">
93        <div id="conversion-progressbar" style="width:100%; height:7px;margin-top: 0.5em"></div>
94
95        <select id="conversion-bit-rate" style="width:100%; margin-top:1em">
96            <option value="0"><fmt:message key="personalsettings.bitrate"/>: <fmt:message key="common.default"/></option>
97            <c:forEach items="${model.bitRates}" var="bitRate">
98                <option value="${bitRate}"><fmt:message key="personalsettings.bitrate"/>: ${bitRate} Kbps</option>
99            </c:forEach>
100        </select>
101        <c:if test="${fn:length(model.audioTracks) gt 1}">
102            <select id="conversion-audio-track" style="width:100%; margin-top:1em">
103                <c:forEach items="${model.audioTracks}" var="track">
104                    <option value="${track.id}"><fmt:message key="videoConverter.audiotrack"/>: ${track.id} &ndash; ${track.language}</option>
105                </c:forEach>
106            </select>
107        </c:if>
108
109        <c:if test="${model.licenseInfo.licenseOrTrialValid}">
110            <input id="conversion-start" style="display:none; width:100%; margin-top:1em;cursor:pointer" type="button" value="<fmt:message key="videoConverter.start"/>" onclick="startConversion()">
111            <input id="conversion-cancel" style="display:none; width:100%; margin-top:1em;cursor:pointer" type="button" value="<fmt:message key="videoConverter.cancel"/>" onclick="cancelConversion()">
112        </c:if>
113    </div>
114
115    <table class="detail" style="float:left">
116        <tr><td style="padding-right:1em"><b><fmt:message key="videoConverter.details.title"/></b></td><td>${model.video.title}</td></tr>
117        <tr><td style="padding-right:1em"><b><fmt:message key="personalsettings.format"/></b></td><td>${model.video.format}</td></tr>
118        <tr><td style="padding-right:1em"><b><fmt:message key="videoConverter.details.videocodec"/></b></td><td>${model.videoCodecs}</td></tr>
119        <tr><td style="padding-right:1em"><b><fmt:message key="videoConverter.details.audiocodec"/></b></td><td>${model.audioCodecs}</td></tr>
120        <tr><td style="padding-right:1em"><b><fmt:message key="personalsettings.duration"/></b></td><td>${model.video.durationString}</td></tr>
121        <tr><td style="padding-right:1em"><b><fmt:message key="personalsettings.bitrate"/></b></td><td>${model.video.bitRate} Kbps</td></tr>
122        <tr><td style="padding-right:1em"><b><fmt:message key="personalsettings.filesize"/></b></td><td><madsonic:formatBytes bytes="${model.video.fileSize}"/></td></tr>
123        <tr><td style="padding-right:1em"><b><fmt:message key="videoConverter.details.dimension"/></b></td><td>${model.video.width} x ${model.video.height}</td></tr>
124        <tr><td style="padding-right:1em"><b><fmt:message key="videoConverter.details.status"/></b></td><td>
125            <span style="display:none" id="conversion-status-new"><fmt:message key="videoConverter.status.new"/></span>
126            <span style="display:none" id="conversion-status-in-progress"><i class="fa fa-refresh fa-spin"></i>&nbsp;&nbsp;<fmt:message key="videoConverter.status.in_progress"/>
127                (<span id="conversion-status-progress"></span>)</span>
128            <span style="display:none" id="conversion-status-completed"><fmt:message key="videoConverter.status.completed"/></span>
129            <span style="display:none" id="conversion-status-error"><fmt:message key="videoConverter.status.error"/></span>
130        </td></tr>
131        <tr><td style="padding-right:1em"><b><fmt:message key="videoConverter.details.targetfile"/></b></td><td><span id="conversion-target-file"></span></td></tr>
132        <tr><td style="padding-right:1em"><b><fmt:message key="videoConverter.details.logfile"/></b></td><td><span id="conversion-log-file"></span></td></tr>
133    </table>
134</div>
135
136<div style="clear:both"></div>
137
138<c:set var="licenseInfo" value="${model.licenseInfo}"/>
139<%@ include file="licenseNotice.jsp" %>
140
141<p style="margin-left:2em;margin-top:2em">
142    <c:choose>
143        <c:when test="${model.user.videoConversionRole}">
144            <fmt:message key="videoConverter.info"/>
145        </c:when>
146        <c:otherwise>
147            <span class="warning"><fmt:message key="videoConverter.notallowed"/></span>
148        </c:otherwise>
149    </c:choose>
150</p>
151
152<p>
153    <i class="fa fa-chevron-left icon"></i>&nbsp;<a href="javascript:back()"><fmt:message key="common.back"/></a>
154
155    <c:if test="${model.user.adminRole}">
156        <span style="margin-left:3em">
157            <i class="fa fa-cog fa-lg icon"></i>&nbsp;<a href="videoConversionSettings.view"><fmt:message key="top.settings"/></a>
158        </span>
159    </c:if>
160</p>
161</body>
162</html>
163