Move player style in watch component

client/angular.json

@@ -206,7 +206,7 @@
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "6kb",
-                  "maximumError": "50kb"
+                  "maximumError": "100kb"
                 }
               ],
               "fileReplacements": [

client/src/app/+videos/+video-watch/player-styles.component.scss

@@ -0,0 +1,4 @@
+@import 'node_modules/video.js/dist/video-js';
+
+$assets-path: '../../assets/';
+@import '../../../sass/player/index';

client/src/app/+videos/+video-watch/player-styles.component.ts

@@ -0,0 +1,14 @@
+import { Component, ViewEncapsulation } from '@angular/core'
+
+/*
+* Allows to lazy load global player styles in the watch component
+*/
+
+@Component({
+  selector: 'my-player-styles',
+  template: '',
+  styleUrls: [ './player-styles.component.scss' ],
+  encapsulation: ViewEncapsulation.None
+})
+export class PlayerStylesComponent {
+}

client/src/app/+videos/+video-watch/video-watch.component.html

@@ -319,3 +319,5 @@
   <my-support-modal #supportModal [video]="video"></my-support-modal>
   <my-video-share #videoShareModal [video]="video" [videoCaptions]="videoCaptions" [playlist]="playlist"></my-video-share>
 </ng-container>
+
+<my-player-styles></my-player-styles>

client/src/app/+videos/+video-watch/video-watch.module.ts

@@ -14,6 +14,7 @@ import { VideoCommentService } from '../../shared/shared-video-comment/video-com
 import { VideoCommentAddComponent } from './comment/video-comment-add.component'
 import { VideoCommentComponent } from './comment/video-comment.component'
 import { VideoCommentsComponent } from './comment/video-comments.component'
+import { PlayerStylesComponent } from './player-styles.component'
 import { RecommendationsModule } from './recommendations/recommendations.module'
 import { TimestampRouteTransformerDirective } from './timestamp-route-transformer.directive'
 import { VideoAvatarChannelComponent } from './video-avatar-channel.component'
@@ -50,7 +51,8 @@ import { VideoWatchComponent } from './video-watch.component'
     VideoAvatarChannelComponent,
 
     TimestampRouteTransformerDirective,
-    TimestampRouteTransformerDirective
+
+    PlayerStylesComponent
   ],
 
   exports: [

client/src/app/app.component.scss

@@ -3,8 +3,6 @@
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
 
-$assets-path: '../assets';
-
 .peertube-container {
   padding-bottom: 20px;
 }
@@ -41,7 +39,7 @@ $assets-path: '../assets';
 
       &.icon-menu {
         background-color: pvar(--mainForegroundColor);
-        mask-image: url('#{$assets-path}/images/misc/menu.svg');
+        mask-image: url('../assets/images/misc/menu.svg');
         margin: 0 18px 0 20px;
 
         @media screen and (max-width: $mobile-view) {

client/src/sass/application.scss

@@ -6,11 +6,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
 @import '_fonts';
 
-@import '~video.js/dist/video-js.css';
-
-$assets-path: '../../assets/';
-@import './player/index';
-
 @import './bootstrap';
 @import './primeng-custom';
 @import './ng-select.scss';