UNPKG

@openveo/publish

Version:
163 lines (154 loc) 9.62 kB
<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>