122 lines
8.8 KiB
HTML
122 lines
8.8 KiB
HTML
<div ng-show="visible">
|
|
<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-lg" role="document">
|
|
<div class="modal-content" ng-if="noServers">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Plex Library</h5>
|
|
</div>
|
|
<div class="model-body">
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
<p class="text-center">Configure your Plex Server(s) in <a href="/#!/settings#plex">Settings</a></p>
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-content" ng-if="!noServers">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Plex Library</h5>
|
|
<span class="pull-right">
|
|
<label class="small" for="displayImages">Thumbnails</label>
|
|
<input id="displayImages" type="checkbox" ng-model="displayImages" />
|
|
</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<select class="form-control form-control-sm" ng-model="plexServer"
|
|
ng-options="x.name for x in plexServers" ng-change="selectServer(plexServer)"></select>
|
|
<hr />
|
|
<ul class="list-group list-group-root plex-panel" ng-init="setHeight = {'height': height + 'px'}" ng-style="setHeight" lazy-img-container>
|
|
<li class="list-group-item" ng-repeat="a in libraries">
|
|
<div class="{{ displayImages ? 'w_images' : 'wo_images' }}" ng-click="getNested(a);">
|
|
<span class="fa {{ a.collapse ? 'fa-chevron-down' : 'fa-chevron-right' }} tab"></span>
|
|
<img ng-if="displayImages" lazy-img="{{a.icon}}" />
|
|
<span>{{a.title}}</span><!-- Library -->
|
|
</div>
|
|
<ul ng-if="a.collapse" class="list-group">
|
|
<li class="list-group-item {{ b.type !== 'movie' ? 'list-group-item-secondary' : 'list-group-item-video' }}"
|
|
ng-repeat="b in a.nested">
|
|
<div class="flex-container"
|
|
ng-click="b.type !== 'movie' ? getNested(b) : selectItem(b)">
|
|
<span ng-if="b.type === 'movie'" class="fa fa-plus-circle tab"></span>
|
|
<span ng-if="b.type !== 'movie'" class="tab"></span>
|
|
<span ng-if="b.type !== 'movie'" class="fa {{ b.collapse ? 'fa-chevron-down' : 'fa-chevron-right' }} tab"></span>
|
|
<img ng-if="displayImages" lazy-img="{{ b.type === 'episode' ? b.episodeIcon : b.icon }}" />
|
|
{{b.title}}
|
|
<span ng-if="b.type === 'movie'" class="flex-pull-right">
|
|
{{b.durationStr}}
|
|
</span>
|
|
<span ng-if="b.type === 'playlist'" class="flex-pull-right" ng-click="$event.stopPropagation(); selectPlaylist(b);">
|
|
<span class="fa fa-plus btn"></span>
|
|
</span>
|
|
<span ng-if="b.type === 'show'" class="flex-pull-right" ng-click="$event.stopPropagation(); selectShow(b);">
|
|
<span class="fa fa-plus btn"></span>
|
|
</span>
|
|
</div>
|
|
<ul ng-if="b.collapse" class="list-group">
|
|
<li ng-repeat="c in b.nested"
|
|
class="list-group-item {{ c.type !== 'movie' && c.type !== 'episode' ? 'list-group-item-dark' : 'list-group-item-video' }}">
|
|
<div class="flex-container"
|
|
ng-click="c.type !== 'movie' && c.type !== 'episode' ? getNested(c) : selectItem(c)">
|
|
<span ng-if="c.type === 'movie' || c.type === 'episode'"
|
|
class="fa fa-plus-circle tab"></span>
|
|
<span ng-if="c.type !== 'movie' && c.type !== 'episode'"
|
|
class="tab"></span>
|
|
<span ng-if="c.type !== 'movie' && c.type !== 'episode'"
|
|
class="tab"></span>
|
|
<span ng-if="c.type !== 'movie' && c.type !== 'episode'"
|
|
class="fa {{ c.collapse ? 'fa-chevron-down' : 'fa-chevron-right' }} tab"></span>
|
|
<img ng-if="displayImages" lazy-img="{{c.type === 'episode' ? c.episodeIcon : c.icon }}" />
|
|
{{ c.type === 'episode' ? c.showTitle + ' - S' + c.season.toString().padStart(2,'0') + 'E' + c.episode.toString().padStart(2,'0') + ' - ' : '' }}
|
|
{{c.title}}
|
|
<span ng-if="c.type === 'movie' || c.type === 'episode'"
|
|
class="flex-pull-right">
|
|
{{c.durationStr}}
|
|
</span>
|
|
<span ng-if="c.type === 'season'" class="flex-pull-right" ng-click="$event.stopPropagation(); selectSeason(c);">
|
|
<span class="fa fa-plus btn"></span>
|
|
</span>
|
|
</div>
|
|
<ul ng-if="c.collapse" class="list-group">
|
|
<li class="list-group-item list-group-item-video"
|
|
ng-repeat="d in c.nested">
|
|
<div class="flex-container" ng-click="selectItem(d)">
|
|
<span class="fa fa-plus-circle tab"></span>
|
|
<img ng-if="displayImages" lazy-img="{{d.episodeIcon}}" />
|
|
E{{ d.episode.toString().padStart(2,'0')}} - {{d.title}}
|
|
<span class="flex-pull-right">{{d.durationStr}}</span>
|
|
<!-- Episode -->
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<hr/>
|
|
<h6>Selected Items</h6>
|
|
<ul class="list-group list-group-root" style="height: 180px; overflow-y: scroll" dnd-list="selection" scroll-glue>
|
|
<div ng-if="selection.length === 0">Select media items from your plex library above.</div>
|
|
<li class="list-group-item" ng-repeat="x in selection" style="cursor:default;" dnd-draggable="x" dnd-moved="selection.splice($index, 1)" dnd-effect-allowed="move">
|
|
{{ (x.type !== 'episode') ? x.title : (x.showTitle + ' - S' + x.season.toString().padStart(2,'0') + 'E' + x.episode.toString().padStart(2,'0'))}}
|
|
<span class="pull-right">
|
|
<span class="btn fa fa-trash" ng-click="selection.splice($index,1)"></span>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-sm btn-link" ng-click="_onFinish([])">Cancel</button>
|
|
<button type="button" class="btn btn-sm btn-primary" ng-click="_onFinish(selection);">Done</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |