163 lines
11 KiB
HTML
163 lines
11 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-alt" ></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>
|
|
<h5 style="margin-top: 10px;">Filler</h5>
|
|
<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]*)$/" min='0' max='1440' />
|
|
|
|
<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 />
|
|
<h6>Filler Lists</h6>
|
|
<div id='fillerContainer'>
|
|
<br />
|
|
|
|
<div class="form-row" ng-repeat = "x in program.filler" track-by = "$index">
|
|
<div class='form-group col-md-5'>
|
|
<label ng-if="$index==0" for="fillerselect{{$index}}">List</label>
|
|
<select
|
|
id="fillerselect{{$index}}" class="custom-select form-control"
|
|
ng-model="x.id" ng-options="o.id as o.name for o in x.options"
|
|
ng-change="refreshFillerStuff()"
|
|
>
|
|
</select>
|
|
</div>
|
|
<div class='form-group col-md-2' ng-if="x.id !== 'none' " >
|
|
<label ng-if="$index==0" for="cooldown{{$index}}">Cooldown (minutes)</label>
|
|
<input class='form-control' id="cooldown{{$index}}" type='number' ng-model='x.cooldown' ng-pattern="/^([0-9][0-9]*)$/"
|
|
min='0' max='1440'
|
|
data-toggle="tooltip" data-placement="bottom" title="The channel won't pick a video from this list if it played something from this list less than this amount of minutes ago."
|
|
> </input>
|
|
</div>
|
|
<div class='form-group col-md-2' ng-if="x.id === 'none' " >
|
|
</div>
|
|
<div class='form-group col-md-3' ng-if="x.id !== 'none' && program.filler.length > 2 " >
|
|
<label ng-if="$index==0" for="fillerrange{{$index}}">Weight</label>
|
|
<input class='form-control-range custom-range' id="fillerrange{{$index}}" type='range' ng-model='x.weight' min=1 max=600
|
|
data-toggle="tooltip" data-placement="bottom" title="Lists with more weight will be picked more frequently."
|
|
ng-change="refreshFillerStuff()"
|
|
>
|
|
</input>
|
|
</div>
|
|
<div class='form-group col-md-4' ng-if="x.id === 'none' || program.filler.length <= 2 " >
|
|
</div>
|
|
<div class='form-group col-md-1' ng-if="x.id !== 'none' && program.filler.length > 2" >
|
|
<label ng-if="$index==0" for="fillerp{{$index}}">%</label>
|
|
<input class='form-control flex-filler-percent' id="fillerp{{$index}}" type='text' ng-model='x.percentage'
|
|
data-toggle="tooltip" data-placement="bottom" title="This is the overall probability this list might be picked, assuming all lists are available." readonly
|
|
>
|
|
</input>
|
|
</div>
|
|
<div class='form-group col-md-1' ng-if="x.id !== 'none'" >
|
|
<label ng-if="$index==0" for="delete{{$index}}">-</label>
|
|
<button id='delete{{$index}}' class='btn btn-link form-control' ng-click='deleteFillerList($index)' >
|
|
<i class='text-danger fa fa-trash-alt'></i>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
<hr></hr >
|
|
<p class="text-center text-info">Videos from the filler list will be randomly picked to play unless there are cooldown restrictions to place or if no videos are short enough for the remaining Flex time. Use the Filler tab at the top to define filler lists. If no videos are available, the fallback will be used instead.</p>
|
|
|
|
</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 limit=1000000000 height="300" visible="showPlexLibrary" on-finish="importPrograms"></plex-library>
|
|
<plex-library height="300" limit=1 visible="showFallbackPlexLibrary" on-finish="importFallback"></plex-library>
|
|
</div> |