fix(FEC-12479): [Dash] - Subtitles are too small and not centered (#204)

issue: the player uses the shaka UITextDisplayer plugin to render text tracks with our container but does not load all relevant CSS class

fix: update the CSS file and replace the container

solves: FEC-12479

src/assets/style.css

@@ -1,29 +1,37 @@
-.shaka-text-container {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  width: 100%;
-  min-width: 48px;
-  transition: bottom cubic-bezier(0.4, 0, 0.6, 1) 0.1s;
-  transition-delay: 0.5s;
-  font-size: 20px;
-  line-height: 1.4;
+.shaka-text-container{
+  position:absolute;
+  left:0;
+  right:0;
+  top:0;
+  bottom:0;
+  pointer-events:none;
+  width:100%;
+  min-width:48px;
+  transition:bottom cubic-bezier(.4, 0, .6, 1) .1s;
+  transition-delay:0s;
+  font-size:20px;
+  line-height:1.4;
+  color:#fff;
+  font-family: Roboto-Regular, Roboto, sans-serif, TengwarTelcontar;
+}
+.shaka-text-container span.shaka-text-wrapper{
+  display:inline;
+  background:0 0;
+  text-align: center;
+}
+
+:fullscreen .shaka-text-container{
+  font-size:4.4vmin
 }
 
-.shaka-text-container * {
-  font-size: 20px;
-  line-height: 1.4;
+:-webkit-full-screen .shaka-text-container{
+  font-size:4.4vmin
 }
 
-.shaka-text-container span {
-  background-color: rgba(0, 0, 0, 0.8);
-  color: #fff;
-  display: inline-block;
+:-moz-full-screen .shaka-text-container{
+  font-size:4.4vmin
 }
 
-.shaka-text-container .shaka-nested-cue:not(:last-of-type):after {
-  content: ' ';
-  white-space: pre;
+:-ms-fullscreen .shaka-text-container{
+  font-size:4.4vmin
 }

src/dash-adapter.js

@@ -398,7 +398,7 @@ export default class DashAdapter extends BaseMediaSourceAdapter {
     //Need to call this again cause we are uninstalling the VTTCue polyfill to avoid collisions with other libs
     shaka.polyfill.installAll();
     this._shaka = new shaka.Player();
-    //render text tracks to our own container
+    // This will force the player to use shaka UITextDisplayer plugin to render text tracks.
     if (this._config.useShakaTextTrackDisplay) {
       this._shaka.setVideoContainer(Utils.Dom.getElementBySelector('.playkit-subtitles'));
     }