From db5814c0472d2b9e8f0ca6bdd1175ff1cd99ed7c Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 14 Apr 2021 10:38:09 +0200
Subject: [PATCH] Move player style in watch component
---
client/angular.json | 2 +-
.../+video-watch/player-styles.component.scss | 4 ++++
.../+video-watch/player-styles.component.ts | 14 ++++++++++++++
.../+video-watch/video-watch.component.html | 2 ++
.../app/+videos/+video-watch/video-watch.module.ts | 4 +++-
client/src/app/app.component.scss | 6 ++----
client/src/sass/application.scss | 5 -----
7 files changed, 26 insertions(+), 11 deletions(-)
create mode 100644 client/src/app/+videos/+video-watch/player-styles.component.scss
create mode 100644 client/src/app/+videos/+video-watch/player-styles.component.ts
diff --git a/client/angular.json b/client/angular.json
index b923ba413..0cd827218 100644
--- a/client/angular.json
+++ b/client/angular.json
@@ -206,7 +206,7 @@
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
- "maximumError": "50kb"
+ "maximumError": "100kb"
}
],
"fileReplacements": [
diff --git a/client/src/app/+videos/+video-watch/player-styles.component.scss b/client/src/app/+videos/+video-watch/player-styles.component.scss
new file mode 100644
index 000000000..7f1442a59
--- /dev/null
+++ b/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';
diff --git a/client/src/app/+videos/+video-watch/player-styles.component.ts b/client/src/app/+videos/+video-watch/player-styles.component.ts
new file mode 100644
index 000000000..c02630979
--- /dev/null
+++ b/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 {
+}
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index 6ede109fd..eadb2148a 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/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>
diff --git a/client/src/app/+videos/+video-watch/video-watch.module.ts b/client/src/app/+videos/+video-watch/video-watch.module.ts
index 3e9f3822e..29ad92f00 100644
--- a/client/src/app/+videos/+video-watch/video-watch.module.ts
+++ b/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: [
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 42293e412..7e9e4a216 100644
--- a/client/src/app/app.component.scss
+++ b/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,9 +39,9 @@ $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) {
margin: 0 10px;
}
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index c01938147..fa9c0d992 100644
--- a/client/src/sass/application.scss
+++ b/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';