@openveo/publish
Version:
OpenVeo video publication plugin
163 lines (154 loc) • 9.62 kB
HTML
<div class="pu-chapter" ng-class="selectedData.value">
<h2>
<div class='btn btn-default back-button' ng-click='back()'><span class='glyphicon glyphicon-chevron-left'></span>{{'CORE.UI.BACK'| translate}}</div>
<span ng-bind="'PUBLISH.EDITOR.TITLE' | translate"></span>
</h2>
<div class="well well-lg" ng-bind="'PUBLISH.EDITOR.INFO' | translate"></div>
<div class="row media-viewer">
<div class='col-sm-8 col-sm-push-4'>
<opl-player
opl-player-type="{{playerType}}"
opl-data="mediaPlayer"
opl-language="{{playerLanguage}}"
opl-chapters-tab="false"
opl-tags-tab="false"
opl-chapters="false"
opl-tags="false"
opl-cuts="false"
id="editorPlayer"
></opl-player>
</div>
<div class='col-sm-4 col-sm-pull-8' >
<uib-tabset justified="true">
<uib-tab ng-repeat="data in dataId" select="selectedData.value = data;" index="$index" heading="{{ 'PUBLISH.EDITOR.CONTEXT.' + data.toUpperCase() + '_TITLE' | translate}}"></uib-tab>
</uib-tabset>
<table class="table table-striped table-condensed chapter-table" ng-show='ranges.length'>
<thead>
<tr><th class='col-sm-3 active'>{{ 'PUBLISH.EDITOR.HEAD_TIME' | translate}}</th>
<th class='col-sm-8 active'>{{ 'PUBLISH.EDITOR.HEAD_TITLE' | translate}}</th>
<th class='col-sm-1 active'>
<input type="checkbox" ng-model="checkAllSelected" ng-click="checkAll();$event.stopPropagation();">
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in ranges| orderBy:'+value'" ng-dblclick="selectAndOpen(row)" ng-click="select(row)" ng-class="{'selected':row.select}" class="{{row.type?row.type:''}}">
<td class="col-sm-3">
{{ row.value | millisecondsToTime }}</td>
<td class="col-sm-8 chapter-title ">
<span ng-bind="row.name | translate"></span>
</td>
<td class="col-sm-1">
<input ng-if="!row.type" type="checkbox" ng-model="row.check" ng-click="checkRow(row.check);$event.stopPropagation();">
</td>
</tr>
</tbody>
</table>
<div class="no-chapter" ng-if='!ranges.length'>
<span class="text" ng-bind-html="'PUBLISH.EDITOR.NO_' + selectedData.value.toUpperCase() | translate"></span>
</div>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" ng-click="openNew()">{{ 'CORE.UI.FORM_NEW' | translate}}</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" ng-disabled="!selectRow" ng-click="openEdit()">{{ 'CORE.UI.FORM_EDIT' | translate}}</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" ng-disabled="!nbCheckRow || !isCollapsed || (selectRow && selectRow.type) || !ranges.length" ng-click="remove()">{{ 'CORE.UI.REMOVE' | translate}}</button>
</div>
</div>
</div>
</div>
<div class="editform" uib-collapse="isCollapsed">
<div class='well container-fluid'>
<form name="myForm" enctype="multipart/form-data" ng-submit="submit()">
<div class="col-sm-4">
<div class="form-group" ng-class="{ 'has-error': myForm.time.$invalid }">
<label class="control-label" for="time">{{ 'PUBLISH.EDITOR.FORM_TIME' | translate}}</label>
<ovp-time ng-change="updateRange()" ng-model="editTime" name="time" milliseconds-max="{{ duration }}"></ovp-time>
</div>
<div class="form-group">
<label for="title">{{ 'PUBLISH.EDITOR.FORM_TITLE' | translate}}*</label>
<div ng-hide="!modelToEdit.type" class="well well-sm">{{modelToEdit.name | translate}}</div>
<input ng-show="!modelToEdit.type" type="text" class="form-control" name="title" id="title" ng-model="modelToEdit.name" ng-disabled="modelToEdit.type" required>
</div>
<div class="form-group" ng-if="modelToEdit.file && !modelToEdit.type && !file">
<img style="width:100%" ng-if="simpleMimeType == 'image'" ng-src="{{modelToEdit.file.url}}">
<video width="100%" controls ng-if="simpleMimeType == 'video'"
ng-src="{{modelToEdit.file.url}}">
</video>
<audio style="width:100%" ng-if="simpleMimeType == 'audio'" ng-src="{{modelToEdit.file.url}}" audioplayer controls></audio>
<div ng-if="simpleMimeType && ['image','video','audio'].indexOf(simpleMimeType) == -1">{{modelToEdit.file.originalName}}</div>
<a ng-if="simpleMimeType" href="{{modelToEdit.file.url}}?filename={{modelToEdit.file.originalName}}"
class="btn btn-default" role="button"
download="{{modelToEdit.file.originalName}}"
><span class="glyphicon glyphicon-download" aria-hidden="true"></span> <span> {{ 'PUBLISH.EDITOR.FILE_DOWNLOAD' | translate}}</span>
</a>
<button type="button" class="btn btn-danger" ng-click="modelToEdit.file = null" ng-show="modelToEdit.file">{{ 'CORE.UI.REMOVE' | translate}}</button>
</div>
<div ng-show="!modelToEdit.type && selectedData.value == 'tags'" class="form-group">
<label for="file" ng-if='!modelToEdit.file'>{{ 'PUBLISH.EDITOR.ADD_FILE' | translate}}</label>
<label for="file" ng-if='modelToEdit.file'>{{ 'PUBLISH.EDITOR.REPLACE_FILE' | translate}}</label>
<input type="file" class="btn btn-default" ngf-select ng-model="file" name="file"
ngf-max-size="20MB"
ngf-model-invalid="errorFile">
<i ng-show="myForm.file.$error.maxSize && errorFile">{{ 'PUBLISH.EDITOR.LARGE_FILE_ERROR' | translate}} {{errorFile.size / 1000000|number:2}}MB: max 20MB</i>
<div ng-if="myForm.file.$valid && file">
<img style="width:100%" ngf-thumbnail="file" class="thumb">
<audio style="width:100%" controls ngf-src="file"></audio>
<video width="100%" controls ngf-src="file"></video>
</div>
<button type="button" class="btn btn-default" ng-click="file = null;" ng-show="file">{{ 'CORE.UI.REMOVE' | translate}}</button>
<uib-progressbar ng-show="file.progress >= 0" class="progress-striped" value="file.progress" type="warning">{{file.progress}}%</uib-progressbar>
</div>
<div class="button">
<button type="submit" ng-disabled="!myForm.time.$valid || !myForm.title.$valid || !myForm.file.$valid" class="btn btn-primary" ng-bind="selectRow?'CORE.UI.FORM_SAVE':'CORE.UI.FORM_ADD' | translate"></button>
<button type="button" class="btn btn-default" ng-click="cancel()" ng-bind="'CORE.UI.FORM_CANCEL' | translate"></button>
</div>
</div>
<div class="col-sm-8">
<div class="form-group" ng-if="!modelToEdit.type">
<label for="desc">{{ 'PUBLISH.EDITOR.FORM_DESCRIPTION' | translate}}</label>
<textarea ui-tinymce="tinymceOptions" class="form-control" name="desc" rows="5" ng-model="modelToEdit.description"></textarea>
</div>
</div>
</form>
</div>
</div>
<div class="multirange-container" ng-swipe-disable-mouse>
<div class="pull-left" style="margin-bottom: 5px">
<button uib-popover="{{!beginCut.isInArray?'PUBLISH.EDITOR.ADD_BEGIN':'PUBLISH.EDITOR.REMOVE_BEGIN' | translate | noBreakSpace }}" popover-trigger="'mouseenter'" class="btn btn-default" ng-model="beginCut.isInArray" uib-btn-checkbox>
<i class="glyphicon glyphicon-log-out"></i>
</button>
<button uib-popover="{{!endCut.isInArray?'PUBLISH.EDITOR.ADD_END':'PUBLISH.EDITOR.REMOVE_END' | translate | noBreakSpace }}" popover-trigger="'mouseenter'" class="btn btn-default" ng-model="endCut.isInArray" uib-btn-checkbox>
<i class="glyphicon glyphicon-log-in"></i>
</button>
</div>
<div class="pull-right" style="margin-bottom: 5px" ng-if="slider.views.length>1">
<span class="ng-binding">Zoom x<span ng-bind="slider.view+1"></span></span>
<button class="btn btn-default" ng-disabled="slider.view == slider.views.length-1" ng-click="changeSliderView($event, 1)">
<i class="glyphicon glyphicon-zoom-in"></i>
</button>
<button class="btn btn-default" ng-disabled="slider.view == 0" ng-click="changeSliderView($event, -1)">
<i class="glyphicon glyphicon-zoom-out"></i> </button>
</div>
<ov-multirange class="row" duration="duration" ng-model="ranges" on-select="select" on-mouserelease="releaseRange" on-enableMouseOver="true" views="slider.views" view="slider.view"></ov-multirange>
</div>
</div>
<!-- "ovp-time" directive template -->
<script type="text/ng-template" id="ov-publish-time.html">
<div class="form-inline">
<div class="form-group">
<input type="text" name="hours" class="form-control ovp-time-input" ng-change="updateTime()" ng-blur="formatInputs()" ng-model="hours" size="2" maxlength="2">
</div>
:
<div class="form-group">
<input type="text" class="form-control ovp-time-input" ng-change="updateTime()" ng-blur="formatInputs()" ng-model="minutes" size="2" maxlength="2">
</div>
:
<div class="form-group">
<input type="text" class="form-control ovp-time-input" ng-change="updateTime()" ng-blur="formatInputs()" ng-model="seconds" size="2" maxlength="2">
</div>
</div>
</script>