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> <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} – ${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> <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> <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> <a href="videoConversionSettings.view"><fmt:message key="top.settings"/></a> 158 </span> 159 </c:if> 160</p> 161</body> 162</html> 163