add custom font sizing to player options #878

streamaserver · Apr 13, 2020 · 57b1cc9 · 57b1cc9
1 parent d62d268
commit 57b1cc9
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 2 deletions.
diff --git a/grails-app/assets/javascripts/streama/directives/streama-video-player-directive.js b/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);

diff --git a/grails-app/assets/javascripts/streama/templates/modal--playback-options.tpl.htm b/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">

diff --git a/grails-app/assets/javascripts/streama/templates/streama-video-player.tpl.htm b/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>

diff --git a/grails-app/assets/stylesheets/_player.scss b/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,