164 lines
10 KiB
HTML
164 lines
10 KiB
HTML
<div ng-show="program">
|
|
<div class="modal" tabindex="-1" role="dialog" style="display: block; background-color: rgba(0, 0, 0, .5);">
|
|
<div class="modal-dialog modal-dialog-scrollable modal-xl" role="document">
|
|
<div class="modal-content">
|
|
<div>
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{{title}}</h5>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-body container">
|
|
<label>Duration (Seconds): <span class="text-danger pull-right">{{error.duration}}</span></label>
|
|
<input type="number" class="form-control form-control-sm" ng-model="program.durationSeconds" ng-pattern="/^([1-9][0-9]*)$/"/>
|
|
|
|
<h6 style="margin-top: 10px;">Flex Settings:</h6>
|
|
|
|
<div class='row'>
|
|
<div class="col-md-12">
|
|
<label for="offlineMode" class="small">Fallback Mode:</label>
|
|
<div class="input-group mb-1">
|
|
<select class="form-control form-control-sm" id="offlineMode" ng-model="program.channelOfflineMode">
|
|
<option value="pic">Picture</option>
|
|
<option value="clip">Clip from Library</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div ng-show="program.channelOfflineMode == 'clip'" >
|
|
<p class="text-center text-info">Pick a video clip that will be used for fallback when there's no appropriate
|
|
filler available for the time duration. It's recommended to use countdown or looping videos for this. <span class="text-danger">{{error.fallback}}</span></p>
|
|
|
|
</div>
|
|
|
|
|
|
<div class='row' ng-show="program.channelOfflineMode == 'pic'" >
|
|
<div class="col-md-3">
|
|
<img ng-src="{{program.channelPicture}}" alt="Fallback preview" style="max-height: 120px;"/>
|
|
</div>
|
|
<div class="col-md-9">
|
|
<div>
|
|
<label for="offlinePicture" class="small">
|
|
Picture: <span class="text-danger pull-right">{{error.picture}}</span></label>
|
|
<input name="offlinePicture" id="offlinePicture" class="form-control form-control-sm" type="url" ng-model="program.channelPicture" />
|
|
</div>
|
|
|
|
<div>
|
|
<label for="offlineSound" class="small">Sound Track:<span class="text-danger pull-right">{{error.sound}}</span></label>
|
|
<input name="offlineSound" id="offlineSound" class="form-control form-control-sm" type="url" ng-model="program.channelSound" placeholder="URL to a sound track that will loop during the offline screen, leave empty for silence." />
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class='row' ng-show="program.channelOfflineMode == 'pic'" >
|
|
<div class='col-md-12'><p class="text-center text-info">This picture is used in case there are no filler clips available with a shorter length than the Flex time duration. Requires ffmpeg transcoding.</p></div>
|
|
</div>
|
|
|
|
|
|
|
|
<div ng-show="program.channelOfflineMode == 'clip'">
|
|
<div class="list-group list-group-root" dnd-list="program.fallback">
|
|
<div class="list-group-item flex-container" style="cursor: default;" ng-repeat="x in program.fallback" dnd-draggable="x" dnd-moved="program.fallback.splice($index, 1)" dnd-effect-allowed="move">
|
|
<div class="program-start" >
|
|
{{durationString(x.duration)}}
|
|
</div>
|
|
<div ng-style="programSquareStyle(x, true)" />
|
|
<div style="margin-right: 5px;">
|
|
<strong>Fallback:</strong> {{x.title}}
|
|
</div>
|
|
<div class="flex-pull-right">
|
|
<button class="btn btn-sm btn-link" ng-click="program.fallback.splice($index,1)">
|
|
<i class="text-danger fa fa-trash" ></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div ng-show="program.fallback.length === 0">
|
|
<button class="btn btn-sm btn-warning form-control form-control-sm" type="button" ng-click="showFallbackPlexLibrary = true">Pick fallback</button>
|
|
</div>
|
|
<hr style='margin-top:0' />
|
|
</div>
|
|
|
|
<div>
|
|
<h6 style="margin-top: 10px;">Filler</h6>
|
|
<p class="text-center text-info">Filler clips are played randomly during the Flex time as long as the clip is shorter than the remaining time. If no valid clips are found, fallback is played.</p>
|
|
<br />
|
|
<div>
|
|
<label>Minimum time before replaying a filler (Minutes): </label>
|
|
<input type="number" class="form-control form-control-sm" ng-model="program.repeatCooldown" ng-pattern="/^([1-9][0-9]*)$/"/>
|
|
|
|
<span class="text-danger pull-right">{{error.blockRepeats}}</span>
|
|
</div>
|
|
<div>
|
|
<input id="overlayDiableIcon" type="checkbox" ng-model="program.disableOverlay">
|
|
<label class="small" for="overlayDisableIcon" style="margin-bottom: 4px;"> Disable overlay icon when playing filler </label>
|
|
</div>
|
|
<hr />
|
|
<div class="flex-container">
|
|
<div class="programming-counter small" ng-show="program.filler.length > 0">
|
|
<span class="small"><b>Filler Clips:</b> {{program.filler.length}}</span>
|
|
</div>
|
|
<div class='flex-pull-right' />
|
|
<div>
|
|
<button class="btn btn-sm btn-secondary btn-programming-tools"
|
|
ng-click="showTools = !showTools"
|
|
ng-show="channel.programs.length !== 0">
|
|
<span
|
|
class="fa {{ showTools ? 'fa-chevron-down' : 'fa-chevron-right'}}"></span> Tools
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-sm btn-primary" ng-click="showPlexLibrary = true">
|
|
<span class="fa fa-plus"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div ng-show="showTools">
|
|
<div class="row">
|
|
<div class="input-group col-md-3" style="padding: 5px;">
|
|
<button class="btn btn-sm btn-warning form-control form-control-sm" type="button" ng-click="sortFillers()">Sort Lengths</button>
|
|
</div>
|
|
<div class="input-group col-md-3" style="padding: 5px;">
|
|
<button class="btn btn-sm btn-danger form-control form-control-sm" type="button" ng-click="fillerRemoveDuplicates()">Remove Duplicates</button>
|
|
</div>
|
|
<div class="input-group col-md-6" style="padding: 5px;">
|
|
<button class="btn btn-sm btn-danger form-control form-control-sm" type="button" ng-click="fillerRemoveAllFiller()">Remove All Filler</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div ng-show="program.filler.length === 0">
|
|
<p class="text-center text-info">Click the <span class="fa fa-plus"></span> to import filler content from your Plex server(s).</p>
|
|
</div>
|
|
<div class="list-group list-group-root" dnd-list="program.filler">
|
|
<div class="list-group-item flex-container" style="cursor: default;" ng-repeat="x in program.filler" dnd-draggable="x" dnd-moved="program.filler.splice($index, 1)" dnd-effect-allowed="move">
|
|
<div class="program-start" >
|
|
{{durationString(x.duration)}}
|
|
</div>
|
|
<div ng-style="programSquareStyle(x, false)" />
|
|
<div style="margin-right: 5px;">
|
|
{{x.title}}
|
|
</div>
|
|
<div class="flex-pull-right">
|
|
<button class="btn btn-sm btn-link" ng-click="program.filler.splice($index,1)">
|
|
<i class="text-danger fa fa-trash" ></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-sm btn-link" ng-click="program = null">Cancel</button>
|
|
<button type="button" class="btn btn-sm btn-primary" ng-click="finished(program);">Done</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<plex-library height="300" visible="showPlexLibrary" on-finish="importPrograms"></plex-library>
|
|
<plex-library height="300" limit=1 visible="showFallbackPlexLibrary" on-finish="importFallback"></plex-library>
|
|
</div> |