add example for videoFile selector & build

Author: dularion

dist/streama-video-player.css

@@ -20,7 +20,7 @@ $templateCache.put('streama-video-player.desktop.html','<div class="player-wrapp
 $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" ng-class="{\'mobile-controls-visible\': isMobileControlsVisible}">\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\n    <div class="next-video-overlay" ng-if="isNextVideoShowing">\n      <div class="row next-video-overlay-inner">\n        <div class="col-xs-4">\n          <streama-video-image video="options.nextVideo" type="poster" size="154"></streama-video-image>\n        </div>\n        <div class="col-xs-8">\n          <h4>Up next...</h4>\n          <h3>{{options.nextVideo.fullTitle}}</h3>\n          <p>{{options.nextVideo.overview}}</p>\n\n          <button class="play-button with-label" ng-click="next()"> <span class="play-label">play now</span> <i class="ion-ios-play"></i></button>\n        </div>\n      </div>\n    </div>\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\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>');}]);
+$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 class="col-50">\n      <h2>{{\'VIDEO.VIDEO_FILES\' | translate}}</h2>\n      <ul class="track-selector-list">\n        <li class="track-selector-item" ng-class="{\'active\': isVideoFileSelected(track)}"\n            ng-repeat="track in options.videoFiles" ng-click="selectVideoFile(track)">\n          {{track.label || track.originalFilename}}\n\n\n          <i ng-if="isVideoFileSelected(track)" class="ion-checkmark"></i>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n\n\n</div>\n');}]);
 //= wrapped
 
 angular.module('streama.videoPlayer').directive('streamaVideoImage', function () {
@@ -73,6 +73,8 @@ angular.module('streama.videoPlayer').directive('streamaVideoPlayer', [
 				$scope.getBackgroundStyle = getBackgroundStyle;
 				$scope.changeEpisode = changeEpisode;
 				$scope.selectSubtitle = selectSubtitle;
+				$scope.selectVideoFile = selectVideoFile;
+				$scope.isVideoFileSelected = isVideoFileSelected;
 				$scope.showControls = showControls;
 				$scope.toggleSelectEpisodes = toggleSelectEpisodes;
 				$scope.createNewPlayerSession = createNewPlayerSession;
@@ -175,6 +177,20 @@ angular.module('streama.videoPlayer').directive('streamaVideoPlayer', [
 					localStorageService.set('selectedSubtitleLanguage', _.get(subtitle, 'subtitleSrcLang'));
 				}
 
+				function selectVideoFile(videoFile){
+					$scope.initialPlay = false;
+					$scope.options.customStartingTime = video.currentTime;
+					$scope.options.selectedVideoFile = videoFile;
+					$scope.options.videoSrc = (videoFile.src || videoFile.externalLink);
+					$scope.options.originalFilename = videoFile.originalFilename;
+					$scope.options.videoType = videoFile.contentType;
+					localStorageService.set('selectedVideoFile', videoFile.label);
+				}
+
+				function isVideoFileSelected(videoFile){
+					return _.isEqualBy($scope.options.selectedVideoFile, videoFile, 'id');
+				}
+
 				function getCurrentSubtitleTrack() {
 					return _.find($scope.options.subtitles, {id: $scope.options.currentSubtitle});
 				}
@@ -418,7 +434,7 @@ angular.module('streama.videoPlayer').directive('streamaVideoPlayer', [
 					}
 
 
-					console.log('TIME UPDATE at time: ' + video.currentTime);
+					// console.log('TIME UPDATE at time: ' + video.currentTime);
 				}
 
 				function determineNextVideoShowing() {
@@ -653,6 +669,7 @@ angular.module('streama.videoPlayer').factory('streamaVideoPlayerService', [
 				videoType: '',
 				videoTrack: '',
 				subtitles: [],
+				videoFiles: [],
 				videoOverlayEnabled: true,
 				showEpisodeBrowser: false,
 				hasNextEpisode: false,

dist/streama-video-player.js

@@ -15,6 +15,7 @@
   <script src="../bower_components/lodash/lodash.js"></script>
   <script src="../bower_components/streama-i18n/dist/streama-i18n.min.js"></script>
   <script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
+  <script src="lodashMixins.js"></script>
   <script src="../dist/streama-video-player.js"></script>
   <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
   <link rel="stylesheet" href="../bower_components/Ionicons/css/ionicons.css">
@@ -36,9 +37,15 @@
 
   <script>
     angular.module('myModule', ['streama.videoPlayer']).run(function ($rootScope) {
+			var videoFiles = [
+        {"id": 1561, "src": "https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm", "label": "Deutsch", isDefault: true, "contentType": "audio/webm"},
+        {"id": 1562, "src": "https://www.w3schools.com/html/mov_bbb.mp4", "label": "English", "contentType": "audio/webm"}
+      ];
+
 			$rootScope.videoOptions = {
 				videoSrc: 'https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm',
 				isExternalLink: true,
+        selectedVideoFile: videoFiles[0],
 				episodeList: {
         	1: [
 						{id: 1, name: 'Pilot', season_number: 1, episode_number:1, episodeString: 's01e01', still_path: 'https://image.tmdb.org/t/p/original/ydlY3iPfeOAvu8gVqrxPoMvzNCn.jpg', overview: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.', videoDuration: 1320},
@@ -59,6 +66,8 @@
 					{"id": 1562, "src": "/example/sub-en.vtt", "subtitleLabel": "English", "subtitleSrcLang": "en", "contentType": "application/x-subrip"}
         ],
 
+        videoFiles: videoFiles,
+
 				"nextVideo": {
 					"id": 522,
 					"overview": "The second 7 acts moving on to the semifinal round are revealed.",
@@ -75,4 +84,4 @@
 
   </script>
 </body>
-</html>
+</html>