add custom font sizing to player options #878

Author: dularion

grails-app/assets/javascripts/streama/directives/streama-video-player-directive.js

@@ -41,6 +41,7 @@ angular.module('streama').directive('streamaVideoPlayer', [
         $scope.closeVideo = closeVideo;
         $scope.clickVideo = clickVideo;
         $scope.fullScreen = toggleFullScreen;
+        $scope.getCustomSubtitleSize = getCustomSubtitleSize;
         $scope.next = $scope.options.onNext;
         $scope.isInitialized = false;
         $scope.isNextVideoShowing = false;
@@ -116,6 +117,8 @@ angular.module('streama').directive('streamaVideoPlayer', [
             });
 
             $scope.options.subtitleSize = localStorageService.get('subtitleSize') || 'md';
+            $scope.options.hasCustomSubtitleSize = localStorageService.get('hasCustomSubtitleSize') || false;
+            $scope.options.customSubtitleSize = localStorageService.get('customSubtitleSize') || null;
           });
         }
 
@@ -196,6 +199,10 @@ angular.module('streama').directive('streamaVideoPlayer', [
           $scope.options.onVideoClick();
         }
 
+        function getCustomSubtitleSize() {
+          return $scope.options.hasCustomSubtitleSize ? $scope.options.customSubtitleSize : null;
+        }
+
         function toggleFullScreen() {
           var docElm;
           var docElmClose = document;
@@ -512,8 +519,12 @@ angular.module('streama').directive('streamaVideoPlayer', [
               return;
             }
 
+            $scope.options.hasCustomSubtitleSize = response.hasCustomSubtitleSize;
+            $scope.options.customSubtitleSize = response.customSubtitleSize;
             $scope.options.subtitleSize = response.subtitleSize;
             localStorageService.set('subtitleSize', response.subtitleSize);
+            localStorageService.set('hasCustomSubtitleSize', response.hasCustomSubtitleSize);
+            localStorageService.set('customSubtitleSize', response.customSubtitleSize);
 
             if(!_.isEqualBy(response.selectedVideoFile, $scope.options.selectedVideoFile, 'id')){
               changeVideoFile(response.selectedVideoFile, video.currentTime);

grails-app/assets/javascripts/streama/templates/modal--playback-options.tpl.htm

@@ -24,11 +24,16 @@ <h4>{{'VIDEO.SUBTITLES' | translate}}</h4>
 
       <div>
         <h4>{{'VIDEO.SUBTITLE_SIZE' | translate}}</h4>
-        <ul class="subtitle-size-picker">
+        <ul class="subtitle-size-picker" ng-if="!vm.playerOptions.hasCustomSubtitleSize">
           <li class="subtitle-size-lg" ng-class="{'active': vm.playerOptions.subtitleSize == 'lg'}" ng-click="vm.changeSubtitleSize('lg')">A</li>
           <li class="subtitle-size-md" ng-class="{'active': vm.playerOptions.subtitleSize == 'md'}" ng-click="vm.changeSubtitleSize('md')">A</li>
           <li class="subtitle-size-sm" ng-class="{'active': vm.playerOptions.subtitleSize == 'sm'}" ng-click="vm.changeSubtitleSize('sm')">A</li>
         </ul>
+        <div>
+          <label><input type="checkbox" ng-model="vm.playerOptions.hasCustomSubtitleSize"> Custom Size?</label>
+          <input ng-if="vm.playerOptions.hasCustomSubtitleSize" class="form-control input-sm" type="text"
+                 placeholder="Custom Font Size (in px)" ng-model="vm.playerOptions.customSubtitleSize">
+        </div>
       </div>
     </div>
     <div class="col-md-6">

grails-app/assets/javascripts/streama/templates/streama-video-player.tpl.htm

@@ -187,7 +187,7 @@ <h2 class="seasons-title" ng-click="toggleSelectEpisodes()">
     </section>
   </div>
 
-  <video ng-if="isInitialized" id="video" ng-src="{{options.videoSrc}}" type="{{options.videoType}}" ng-click="clickVideo()" class="subtitle-size-{{options.subtitleSize}}">
+  <video ng-if="isInitialized" id="video" ng-src="{{options.videoSrc}}" type="{{options.videoType}}" ng-click="clickVideo()" class="subtitle-size-{{options.subtitleSize}} subtitle-size-custom-{{getCustomSubtitleSize()}}">
     <track ng-repeat="subtitle in options.subtitles" ng-src="{{subtitle.src}}" kind="subtitles" id="subtitle-{{subtitle.id}}"
            srclang="{{subtitle.subtitleSrcLang}}" label="{{subtitle.subtitleLabel}}" src="{{subtitle.src}}">
   </video>

grails-app/assets/stylesheets/_player.scss

@@ -15,6 +15,11 @@ streama-video-player{
   video.subtitle-size-sm::cue {
     font-size: 0.8em;
   }
+  @for $i from 10 through 60{
+    video.subtitle-size-custom-#{$i}::cue{
+      font-size: #{$i}px;
+    }
+  }
 }
 
 .video-wrapper-inner,