Bug fix data access

projects/core/assets/scss/lobby.scss

@@ -29,25 +29,26 @@ a {
 /*==================== VARIABLES CSS ====================*/
 
 body {
-    --app-background: #eaebf5;
-    --chat-background: #fff;
     --link-color: #c0c1c5;
-    --navigation-bg: #fff;
-    --navigation-box-shadow: 0 2px 6px 0 rgba(136, 148, 171, 0.2),
-    0 24px 20px -24px rgba(71, 82, 107, 0.1);
-    --main-color: #3d42df;
     --secondary-color: #262a42;
     --action-color: #41dd95;
     --attention-color: #ffdb8d;
     --warning-color: #dc3545;
-    --message-bg: #f3f4f9;
-    --message-bg-2: #3d42df;
-    --message-text: #2c303a;
-    --placeholder-text: #a2a4bc;
-    --button-bg: #fff;
+
     --border-radius: 4px;
     --asset-border-radius: 4px;
     --common-padding: 10px;
+
+    --app-background: #262a42;
+    --navigation-box-shadow: 0px 0px 8px 0px #282b33;
+    --chat-background: #3c3f56;
+    --message-bg: #2c3046;
+    --message-text: rgba(255, 255, 255, 0.8);
+    --placeholder-text: #fff;
+    --navigation-bg: #3c3f56;
+    --button-bg: #3c3f56;
+    --main-color: #8DCAFF;
+    --message-bg-2: #8DCAFF;
 }
 
 
@@ -63,47 +64,32 @@ body {
     --md-switch-track-color: rgba(38, 42, 66, 0.26);
 }
 
-/*========== Variables Dark theme ==========*/
-
-body.dark {
-    --app-background: #262a42;
-    --navigation-box-shadow: 0px 0px 8px 0px #282b33;
-    --chat-background: #3c3f56;
-    --message-bg: #2c3046;
-    --message-text: rgba(255, 255, 255, 0.8);
-    --placeholder-text: #fff;
-    --navigation-bg: #3c3f56;
-    --button-bg: #3c3f56;
-    --main-color: #8DCAFF;
-    --message-bg-2: #8DCAFF;
-}
-
-body.dark .mic {
+.mic {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-mic-off' viewBox='0 0 24 24'%3E%3Cpath d='M1 1l22 22M9 9v3a3 3 0 005.12 2.12M15 9.34V4a3 3 0 00-5.94-.6'/%3E%3Cpath d='M17 16.95A7 7 0 015 12v-2m14 0v2a7 7 0 01-.11 1.23M12 19v4M8 23h8'/%3E%3C/svg%3E%0A");
 }
 
-body.dark .camera {
+.camera {
     background-image: url("data:image/svg+xml,%3E%3Cpath d='M1 1l22 22M21 21H3a2 2 0 01-2-2V8a2 2 0 012-2h3m3-3h6l2 3h4a2 2 0 012 2v9.34m-7.72-2.06a4 4 0 11-5.56-5.56'/%3E%3C/svg%3E%0A");
 }
 
 
-body.dark .maximize {
+.maximize {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-maximize' viewBox='0 0 24 24'%3E%3Cpath d='M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3'/%3E%3C/svg%3E%0A");
 }
 
-body.dark .magnifier {
+.magnifier {
     color: #fff;
 }
 
-body.dark .guest-header {
+.guest-header {
     border-color: var(--message-bg);
 }
 
-body.dark .btn-close-right {
+.btn-close-right {
     color: #fff;
 }
 
-.dark .chat-typing-area {
+.chat-typing-area {
     box-shadow: none;
 }
 

projects/core/src/lib/component/lobby/lobby.component.html

@@ -14,7 +14,7 @@
                         </svg>
                         <!-- Setting icon -->
                     </button>
-                    <span class="nav-header">{{ stream.uuid | uppercase }} ({{ state }})</span>
+                    <span class="nav-header">{{ stream.title}} ({{ state }})</span>
                 </div>
             </div>
 

projects/core/src/lib/component/lobby/lobby.component.ts

@@ -60,11 +60,15 @@ export class LobbyComponent implements OnInit {
     @Input('stream') streamId: string | undefined;
     @Input('space') spaceId: string | undefined;
     @Input('user') user: string | undefined;
+    @Input('base-path') basePath: string | undefined;
+
 
     @Input() role: string | null = 'guest';
 
     @Output() loadComp = new EventEmitter();
 
+    private image: HTMLImageElement = new Image;
+
     constructor(
         private session: SessionService,
         private devices: DeviceSettingsService,
@@ -83,6 +87,16 @@ export class LobbyComponent implements OnInit {
         if (this.apiPrefix !== undefined) {
             this.params.API_PREFIX = this.apiPrefix;
         }
+        if (this.basePath === undefined) {
+            this.basePath = "./assets";
+        }
+
+
+        this.image.src = this.basePath + '/images/face.svg';
+        this.image.onload = function () {
+            console.log('Image loaded');
+        };
+
         this.session.setAuthenticationToken(this.getToken());
         this.getStream();
         this.getStreamLiveData();
@@ -100,7 +114,7 @@ export class LobbyComponent implements OnInit {
                     this.isHost = this.user !== undefined && this.stream?.user === this.user;
                     if (this.isHost) {
                         setTimeout(() => {
-                            this.mixer = new CanvasStreamMixer('canvasOne');
+                            this.mixer = new CanvasStreamMixer('canvasOne', this.image);
                             this.mixer.start();
                         }, 0);
                     }
@@ -202,6 +216,8 @@ export class LobbyComponent implements OnInit {
     }
 
     start(): void {
+        console.log("Hey ####################")
+        console.log("Hey ####################", this.streamLiveData, this.streamId,this.spaceId )
         if (this.streamLiveData != undefined && this.streamId != undefined && this.spaceId != undefined) {
             this.lobbyService.startLiveStream(this.streamLiveData, this.spaceId, this.streamId)
                 .subscribe(() => {

projects/core/src/lib/entities/stream.ts

@@ -1,4 +1,5 @@
 export interface Stream {
-  uuid: string;
-  user: string
+    uuid: string;
+    title: string;
+    user: string;
 }

projects/core/src/lib/provider/canvas_stream_mixer.ts

@@ -1,17 +1,12 @@
 const WIDTH = 1920;
 const HEIGHT = 1080;
 
-let img = new Image;
-img.src = './assets/icons/face.svg';
-img.onload = function () {
-    console.log('Image loaded');
-};
-
 
 export class CanvasStreamMixer {
 
     private readonly canvas: HTMLCanvasElement;
     private readonly context: CanvasRenderingContext2D;
+    private readonly img: HTMLImageElement;
     public readonly videoElements: Map<string, HTMLVideoElement> = new Map<string, HTMLVideoElement>();
 
     private mediaStreams: Map<string, MediaStream> = new Map<string, MediaStream>();
@@ -21,12 +16,14 @@ export class CanvasStreamMixer {
     private gainNode?: GainNode;
     private useGainNode = false;
 
-    constructor(elementId: string) {
+    constructor(elementId: string, img: HTMLImageElement) {
+        this.img = img;
         this.canvas = window.document.getElementById(elementId) as HTMLCanvasElement;
         this.canvas.width = WIDTH;
         this.canvas.height = HEIGHT;
         this.context = this.canvas.getContext('2d') as CanvasRenderingContext2D;
         this.context.imageSmoothingEnabled = true;
+
     }
 
     start() {
@@ -50,16 +47,16 @@ export class CanvasStreamMixer {
                 let placeX = c * gridParams.partWidth + c * gridParams.xPad;
                 let placeY = r * gridParams.partHeight + r * gridParams.yPad;
                 if (!!v) {
-                    if (v.classList.contains("camera-off")) {
-                        let imgW = img.naturalWidth ;
-                        let imgH = img.naturalHeight;
-                        let ratio =  imgW/ gridParams.partWidth;
-                        let ratioH =  imgH/ gridParams.partHeight;
-                        let startW = placeX + ((gridParams.partWidth  - (imgW))/ 2)
-                        let startH = placeY + ((gridParams.partHeight  - (imgH))/ 2)
+                    if (v.classList.contains('camera-off')) {
+                        let imgW = this.img.naturalWidth;
+                        let imgH = this.img.naturalHeight;
+                        let ratio = imgW / gridParams.partWidth;
+                        let ratioH = imgH / gridParams.partHeight;
+                        let startW = placeX + ((gridParams.partWidth - (imgW)) / 2);
+                        let startH = placeY + ((gridParams.partHeight - (imgH)) / 2);
                         this.context.fillStyle = 'rgba(60, 63, 86, 100)';
                         this.context.fillRect(placeX, placeY, gridParams.partWidth, gridParams.partHeight);
-                        this.context.drawImage(img, startW, startH, gridParams.partWidth * ratio, gridParams.partHeight * ratioH);
+                        this.context.drawImage(this.img, startW, startH, gridParams.partWidth * ratio, gridParams.partHeight * ratioH);
                     } else {
                         //this.context.drawImage(img, 0, 0, gridParams.partWidth, gridParams.partHeight);
                         this.context.drawImage(v, placeX, placeY, gridParams.partWidth, gridParams.partHeight);

projects/core/src/lib/provider/peertube.service.ts

@@ -13,7 +13,7 @@ export class PeerTubeService {
     }
 
     public fetchStreamLiveData(token: string, stream: string): Observable<StreamLiveData> {
-        return this.http.get<StreamLiveData>(`api/v1/videos/live/${stream}`, {
+        return this.http.get<StreamLiveData>(`/api/v1/videos/live/${stream}`, {
             headers: new HttpHeaders({
                 'Authorization': token,
                 'Content-Type': 'application/json'