fix wrong codec error for stateChanges

Author: dularion

dist/streama-video-player.js

@@ -19,7 +19,7 @@ angular.module('streama.videoPlayer').run(['$templateCache', function($templateC
 $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>');}]);
+$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>');}]);
 'use strict';
 
 angular.module('streama.videoPlayer').directive('streamaVideoPlayer', [
@@ -116,6 +116,7 @@ angular.module('streama.videoPlayer').directive('streamaVideoPlayer', [
 					initExternalTriggers();
 					initIsMobile();
 					$scope.$on('$destroy', onDirectiveDestroy);
+					$scope.$on('$stateChangeStart', onStateChangeStart);
 					$scope.$on('$stateChangeSuccess', onStateChangeSuccess);
 					generateVolumeScrubberOptions();
 
@@ -349,6 +350,10 @@ angular.module('streama.videoPlayer').directive('streamaVideoPlayer', [
 					});
 				}
 
+				function onStateChangeStart() {
+					$scope.isStateChangeStarted = true;
+				}
+
 				function onStateChangeSuccess(e, toState) {
 					if(toState.name != "player"){
 						//If full screen is enabled, it will be canceled.
@@ -364,7 +369,9 @@ angular.module('streama.videoPlayer').directive('streamaVideoPlayer', [
 					Mousetrap.reset();
 
 					console.log("destroy");
-					video.pause();
+					if($scope.initialPlay){
+						video.pause();
+					}
 					video.src = '';
 					$elem.find('video').children('source').prop('src', '');
 					$elem.find('video').remove().length = 0;
@@ -396,7 +403,7 @@ angular.module('streama.videoPlayer').directive('streamaVideoPlayer', [
 				}
 
 				function onVideoError(){
-					if(!video.duration && !$scope.initialPlay){
+					if(!video.duration && !$scope.initialPlay && !$scope.isStateChangeStarted){
 						console.error('Video Playback Error');
 						$scope.options.onError();
 					}