order episodes in selector by episodenumber

Author: dularion

dist/streama-video-player.js

@@ -16,7 +16,7 @@ Number.prototype.clamp = function(min, max) {
 	return Math.min(Math.max(this, min), max);
 };
 angular.module('streama.videoPlayer').run(['$templateCache', function($templateCache) {$templateCache.put('streama-video-player.desktop.html','<div class="player-wrapper">\n  <div class="video-wrapper-inner"  ng-mousemove="showControls()">\n    <div>\n      <div class="volume-info" ng-show="volumeChanged">\n        {{volumeLevel * 10}}% Volume\n      </div>\n\n      <div class="volume-info" ng-show="currentTimeChanged">\n        <br>\n        <strong ng-show="currentTime">\n          <span>{{currentTime | streamaVideoTime}}</span>\n        </strong>\n        <span>{{videoDuration | streamaVideoTime}}</span>\n      </div>\n    </div>\n\n    <i class="ion-android-arrow-back player-back" ng-class="{\'visible\': controlsVisible}" ng-click="closeVideo()"></i>\n\n\n    <div class="spinner" ng-show="loading">\n      <div class="bounce1"></div>\n      <div class="bounce2"></div>\n      <div class="bounce3"></div>\n    </div>\n\n    <div class="overlay" ng-class="{\'visible\': overlayVisible}" ng-if="options.videoOverlayEnabled">\n      <div class="video-info">\n        <p>You\'re watching</p>\n\n        <h1>{{options.videoMetaTitle}}</h1>\n        <h3>{{options.videoMetaSubtitle}}</h3>\n        <p ng-if="!isMobile">{{options.videoMetaDescription}}</p>\n      </div>\n    </div>\n\n    <i ng-if="isMobile && !playing && canplay" class="play-button ion-ios-play" ng-click="pause();play()"></i>\n\n    <div class="player-controls-wrapper player-active no-select" ng-class="{\'visible\': controlsVisible}" ng-hide="loading && !initialPlay">\n\n      <div class="slider-ui-wrapper" ng-show="!volumeOpen">\n        <div class="scrupper-wrapper">\n          <rzslider rz-slider-model="currentTime" rz-slider-options="scrubber.options"></rzslider>\n        </div>\n\n        <!--<div id="playerDurationSlider" class="player-ui-slider" ui-slider="scrubberOptions" min="0" max="{{videoDuration}}" ng-model="currentTime"></div>-->\n        <div class="time-display">\n          <strong ng-show="currentTime">\n            <span>{{currentTime | streamaVideoTime}}</span>\n          </strong>\n          <span>{{videoDuration | streamaVideoTime}}</span>\n        </div>\n      </div>\n\n      <section class="player-control-bar no-select">\n\n        <div class="player-control-button player-play-pause play ion-play" ng-show="!playing" ng-click="play()"></div>\n\n        <div class="player-control-button player-play-pause play ion-pause" ng-show="playing" ng-click="pause()"></div>\n\n        <div class="volume-control player-control-button volume" ng-mouseleave="volumeOpen = false" ng-mouseenter="volumeOpen = true">\n          <i ng-class="{\n        \'ion-volume-mute\': volumeLevel == 0,\n        \'ion-volume-low\': volumeLevel > 0 && volumeLevel < 3,\n        \'ion-volume-medium\': volumeLevel >= 3 && volumeLevel < 6,\n        \'ion-volume-high\': volumeLevel >= 6\n        }" ng-click="playerVolumeToggle()"\n          ></i>\n\n          <div id="player-menu-volume" class="player-menu" ng-show="volumeOpen">\n            <div class="volume-menu-content">\n              <rzslider style="height: 120px;" rz-slider-model="volumeLevel" rz-slider-options="volume.options"></rzslider>\n            </div>\n          </div>\n        </div>\n\n\n        <div class="player-status">\n          <span class="player-status-main-title">{{options.videoMetaTitle}}</span>\n          <span>{{options.videoMetaSubtitle}}</span>\n        </div>\n\n        <div class="player-control-button player-next-episode ion-ios-skipforward" ng-if="options.showNextButton" ng-click="next()"></div>\n\n        <div class="player-control-button player-episode-selector" ng-if="options.showEpisodeBrowser">\n          <i class="ion-ios-browsers" ng-click="episodeBrowseOpen = !episodeBrowseOpen"></i>\n          <div id="player-menu-episode-selector" class="player-menu" ng-show="episodeBrowseOpen">\n            <div class="episode-selector-container">\n              <div class="episode-selector-slider" ng-class="{\'slide-left\': options.selectedEpisodes}">\n                <div class="season-list-container">\n                  <h2 class="seasons-title">{{options.videoMetaTitle}}</h2>\n                  <ul class="season-list">\n                    <li class="season" ng-click="toggleSelectEpisodes(episodes)"\n                        ng-repeat="(season, episodes) in options.episodeList">\n                      <span>{{\'VIDEO.SEASON\' | translate}} {{season}}</span>\n                    </li>\n                  </ul>\n                </div>\n              </div>\n\n              <div class="episode-selector-slider" ng-class="{\'slide-left\': options.selectedEpisodes}">\n                <div class="season-list-container">\n                  <h2 class="seasons-title" ng-click="toggleSelectEpisodes()">\n                    <span class="back-button"><i class="ion-chevron-left"></i></span>\n                    {{\'VIDEO.SEASON\' | translate}} {{options.selectedEpisodes[0].season_number}}\n                  </h2>\n                  <ul class="episode-list">\n                    <li class="episode" ng-repeat="episode in options.selectedEpisodes"\n                        ng-class="{\'current\': (episode.episode_number == options.currentEpisode.episode && episode.season_number == options.currentEpisode.season), \'no-files\': !episode.hasFile}" >\n                      <div class="flex-wrapper">\n                        <span class="episode-number">{{episode.episode_number | streamaPadnumber:2}}</span>\n                        <span class="episode-name" ng-click="visible = !visible">{{episode.name}}</span>\n                        <span class="episode-play" ng-if="episode.hasFile" ui-sref="player({videoId: episode.id})"><i class="ion-play"></i></span>\n                      </div>\n\n                      <div class="extra-episode-info" ng-if="visible || (episode.episode_number == video.episode_number && episode.season_number == video.season_number)">\n                        <div class="image-wrapper">\n                          <img ng-if="episode.still_path" ng-src="https://image.tmdb.org/t/p/w92/{{episode.still_path}}"/>\n                          <div ng-if="!episode.still_path" class="fallback-image"></div>\n                        </div>\n\n                        <p>{{episode.overview.length > 250 ? (episode.overview.substring(0, 250) + \'...\') : episode.overview}}</p>\n                      </div>\n                    </li>\n                  </ul>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class="player-control-button player-fill-screen ion-android-wifi" ng-if="options.showSocketSession" ng-click="createNewPlayerSession()"></div>\n\n        <div class="player-control-button player-fill-screen ion-android-textsms" ng-if="options.videoTrack" ng-class="{\'inactive\': !isTextTrackVisible}" ng-click="toggleTextTrack()"></div>\n\n        <div class="player-control-button player-fill-screen"\n             ng-click="fullScreen()" ng-class="{\'ion-arrow-shrink\': isFullScreen, \'ion-arrow-expand\': !isFullScreen}"></div>\n      </section>\n    </div>\n\n\n    <video ng-if="isInitialized" id="video" ng-src="{{options.videoSrc}}" type="{{options.videoType}}" ng-click="clickVideo()">\n      <track ng-if="options.videoTrack" ng-src="{{options.videoTrack}}" kind="subtitles" srclang="en" label="English">\n    </video>\n\n  </div>\n</div>\n\n\n');
-$templateCache.put('streama-video-player.episodeSelector.html','<div class="mobile-overlay-container mobile-episode-selector-container">\n  <div class="mobile-episode-selector-season-tabs">\n    <div class="mobile-episode-selector-season-tab" ng-class="{\'active\': season == options.selectedEpisodes[0].season_number}"\n         ng-repeat="(season, episodes) in options.episodeList" ng-click="toggleSelectEpisodes(episodes)">\n      <span>{{\'VIDEO.SEASON\' | translate}} {{season}}</span>\n    </div>\n  </div>\n\n  <div class="mobile-episode-selector-outer">\n    <div class="mobile-episode-selector-inner">\n      <div class="mobile-episode-box" ng-repeat="episode in options.selectedEpisodes" ng-class="{\'active\': episode.id == options.currentEpisode.id}">\n        <div class="image-wrapper">\n          <i ng-if="episode.id != options.currentEpisode.id" class="play-button ion-ios-play" ng-click="changeEpisode(episode)"></i>\n          <img ng-if="episode.still_path" ng-src="{{episode.still_path}}"/>\n          <div ng-if="!episode.still_path" class="fallback-image"></div>\n        </div>\n        <h3>\n          <span class="episode-number">{{episode.episode_number}}. </span>\n          <span class="episode-name" ng-click="visible = !visible">{{episode.name}}</span>\n\n          <span ng-if="episode.videoDuration" class="episode-duration">{{episode.videoDuration | videoDurationDisplay}}</span>\n        </h3>\n        <p class="episode-overview">{{episode.overview.length > 250 ? (episode.overview.substring(0, 250) + \'...\') : episode.overview}}</p>\n      </div>\n    </div>\n  </div>\n\n  \n</div>');
+$templateCache.put('streama-video-player.episodeSelector.html','<div class="mobile-overlay-container mobile-episode-selector-container">\n  <div class="mobile-episode-selector-season-tabs">\n    <div class="mobile-episode-selector-season-tab" ng-class="{\'active\': season == options.selectedEpisodes[0].season_number}"\n         ng-repeat="(season, episodes) in options.episodeList" ng-click="toggleSelectEpisodes(episodes)">\n      <span>{{\'VIDEO.SEASON\' | translate}} {{season}}</span>\n    </div>\n  </div>\n\n  <div class="mobile-episode-selector-outer">\n    <div class="mobile-episode-selector-inner">\n      <div class="mobile-episode-box" ng-repeat="episode in options.selectedEpisodes | orderBy:\'episode_number\'" ng-class="{\'active\': episode.id == options.currentEpisode.id}">\n        <div class="image-wrapper">\n          <i ng-if="episode.id != options.currentEpisode.id" class="play-button ion-ios-play" ng-click="changeEpisode(episode)"></i>\n          <img ng-if="episode.still_path" ng-src="{{episode.still_path}}"/>\n          <div ng-if="!episode.still_path" class="fallback-image"></div>\n        </div>\n        <h3>\n          <span class="episode-number">{{episode.episode_number}}. </span>\n          <span class="episode-name" ng-click="visible = !visible">{{episode.name}}</span>\n\n          <span ng-if="episode.videoDuration" class="episode-duration">{{episode.videoDuration | videoDurationDisplay}}</span>\n        </h3>\n        <p class="episode-overview">{{episode.overview.length > 250 ? (episode.overview.substring(0, 250) + \'...\') : episode.overview}}</p>\n      </div>\n    </div>\n  </div>\n\n  \n</div>');
 $templateCache.put('streama-video-player.html','<div>\n  <pre>{{playerTemplate}}</pre>\n  <div ng-if="playerTemplate" ng-include="playerTemplate"></div>\n\n</div>\n\n');
 $templateCache.put('streama-video-player.touch.html','<div class="player-wrapper">\n  <pre>{{options.videoStillImage}}</pre>\n  <div class="video-wrapper-inner" ng-style="getBackgroundStyle()" ng-click="toggleControls()">\n\n    <div ng-if="loading">\n      <i class="spinner ion-load-c" ></i>\n    </div>\n\n    <i ng-if="!playing && canplay" class="play-button ion-ios-play" ng-click="$event.stopPropagation();togglePlay()"></i>\n\n    <div class="player-controls-mobile" ng-show="isMobileControlsVisible" >\n      <div class="player-controls-topbar">\n        <div class="player-controls-box player-control-button" ng-click="$event.stopPropagation(); closeVideo();">\n          <i class="ion-close-round"></i>\n        </div>\n        <div class="player-controls-stretch player-controls-metaTitle">\n          {{options.videoMetaTitle}}\n        </div>\n\n        <div class="player-controls-box player-control-button" ng-click="$event.stopPropagation(); toggleMobileOverlayBox(\'track\');">\n          <i class="ion-android-textsms"></i>\n        </div>\n\n        <div ng-if="options.showEpisodeBrowser" class="player-controls-box player-control-button" ng-click="$event.stopPropagation(); toggleMobileOverlayBox(\'episode\')">\n          <i class="ion-ios-browsers"></i>\n        </div>\n        <div ng-if="options.hasNextEpisode" class="player-controls-box player-control-button" ng-click="$event.stopPropagation(); next();">\n          <i class="ion-ios-skipforward"></i>\n        </div>\n\n      </div>\n      <div class="player-controls-bottombar" ng-if="initialPlay">\n        <div class="player-controls-box player-control-button" ng-click="$event.stopPropagation();togglePlay()">\n          <i class="player-play-pause play ion-play" ng-show="!playing"></i>\n          <i class="player-play-pause play ion-pause" ng-show="playing"></i>\n        </div>\n        <div class="player-controls-box player-control-button" ng-click="$event.stopPropagation();replay(30)">\n          <i class="icon-replay_30"></i>\n        </div>\n        <div class="player-controls-stretch">\n          <rzslider ng-if="scrubber.options" rz-slider-model="scrubber.model" rz-slider-options="scrubber.options"></rzslider>\n        </div>\n        <div class="player-controls-box">\n          <div class="time-display">\n            <strong class="current-time">{{scrubber.model | streamaVideoTime}} | </strong>{{videoDuration | streamaVideoTime}}\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class="player-controls-mobile-overlay-box" ng-if="mobileOverlayBox.isVisble">\n      <i class="ion-close player-controls-mobile-overlay-box-close" ng-click="toggleMobileOverlayBox()"></i>\n\n      <div ng-include="\'streama-video-player.\' + mobileOverlayBox.type + \'Selector.html\'"></div>\n    </div>\n\n    <video ng-show="initialPlay" ng-if="isInitialized" id="video" ng-src="{{options.videoSrc | streamaTrustAs:\'resourceUrl\'}}" type="{{options.videoType}}"\n           ng-click="clickVideo()" class="subtitle-size-{{options.subtitleSize}}">\n      <track ng-repeat="subtitle in options.subtitles" ng-src="{{subtitle.src  | streamaTrustAs:\'resourceUrl\'}}" kind="subtitles" id="subtitle-{{subtitle.id}}"\n             srclang="{{subtitle.subtitleSrcLang}}" label="{{subtitle.subtitleLabel}}" src="{{subtitle.src  | streamaTrustAs:\'resourceUrl\'}}">\n    </video>\n\n  </div>\n</div>\n\n\n');
 $templateCache.put('streama-video-player.trackSelector.html','<div class="mobile-overlay-container mobile-track-selector-container">\n\n  <div class="row">\n    <div class="col-50">\n      <h2>{{\'VIDEO.SUBTITLES\' | translate}}</h2>\n      <ul class="track-selector-list">\n        <li class="track-selector-item" ng-class="{\'active\': !selectedSubtitleId}" ng-click="selectSubtitle()">\n          {{\'VIDEO.NO_SUBTITLE\' | translate}} &nbsp;\n\n          <i ng-if="!selectedSubtitleId" class="ion-checkmark"></i>\n        </li>\n        <li class="track-selector-item" ng-class="{\'active\': track.id == selectedSubtitleId}"\n            ng-repeat="track in options.subtitles" ng-click="selectSubtitle(track)">\n          {{track.subtitleLabel || track.originalFilename}}\n\n          <i ng-if="track.id == selectedSubtitleId" class="ion-checkmark"></i>\n        </li>\n      </ul>\n    </div>\n    <div class="col-50">\n      <h2>{{\'VIDEO.SUBTITLE_SIZE\' | translate}}</h2>\n      <ul class="subtitle-size-picker">\n        <li class="subtitle-size-lg" ng-class="{\'active\': options.subtitleSize == \'lg\'}" ng-click="changeSubtitleSize(\'lg\')">A</li>\n        <li class="subtitle-size-md" ng-class="{\'active\': options.subtitleSize == \'md\'}" ng-click="changeSubtitleSize(\'md\')">A</li>\n        <li class="subtitle-size-sm" ng-class="{\'active\': options.subtitleSize == \'sm\'}" ng-click="changeSubtitleSize(\'sm\')">A</li>\n      </ul>\n    </div>\n  </div>\n\n\n\n</div>');}]);