ov-components: Fixed base href when playing and downloading recordings

Added base href to video src and downloading link for fixing the recordings features
OpenVidu · Jul 17, 2024 · fc17b3b · fc17b3b
1 parent d8033dc
commit fc17b3b
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/...-components-angular/src/lib/services/config/openvidu-components-angular.config.service.ts b/...-components-angular/src/lib/services/config/openvidu-components-angular.config.service.ts
@@ -2,6 +2,7 @@ import { Inject, Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { OpenViduComponentsConfig, ParticipantFactoryFunction } from '../../config/openvidu-components-angular.config';
 import { RecordingInfo } from '../../models/recording.model';
+import { DOCUMENT } from '@angular/common';
 
 // import { version } from '../../../../package.json';
 
@@ -84,7 +85,10 @@ export class OpenViduComponentsConfigService {
 	private adminLoginError = <BehaviorSubject<any>>new BehaviorSubject(null);
 	adminLoginError$: Observable<any>;
 
-	constructor(@Inject('OPENVIDU_COMPONENTS_CONFIG') config: OpenViduComponentsConfig) {
+	constructor(
+		@Inject('OPENVIDU_COMPONENTS_CONFIG') config: OpenViduComponentsConfig,
+		@Inject(DOCUMENT) private document: Document
+	) {
 		this.configuration = config;
 		console.log(this.configuration);
 		if (this.isProduction()) console.log('OpenVidu Angular Production Mode');
@@ -356,6 +360,19 @@ export class OpenViduComponentsConfigService {
 		return this.configuration?.production || false;
 	}
 
+	/**
+	 * Retrieves the base href of the application.
+	 *
+	 * @returns The base href of the application as a string.
+	 */
+	getBaseHref(): string {
+		const baseHref = this.document.getElementsByTagName('base')[0].href;
+		if (baseHref) {
+			return baseHref;
+		}
+		return '/';
+	}
+
 	hasParticipantFactory(): boolean {
 		return typeof this.getConfig().participantFactory === 'function';
 	}

diff --git a/...ular/projects/openvidu-components-angular/src/lib/services/recording/recording.service.ts b/...ular/projects/openvidu-components-angular/src/lib/services/recording/recording.service.ts
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { RecordingInfo, RecordingStatus, RecordingStatusInfo } from '../../models/recording.model';
 import { ActionService } from '../action/action.service';
+import { OpenViduComponentsConfigService } from '../config/openvidu-components-angular.config.service';
 
 @Injectable({
 	providedIn: 'root'
@@ -12,7 +13,7 @@ export class RecordingService {
 	 */
 	recordingStatusObs: Observable<RecordingStatusInfo>;
 	private recordingTimeInterval: NodeJS.Timeout;
-	private readonly API_RECORDINGS_PREFIX = '/call/api/recordings/';
+	private API_RECORDINGS_PREFIX = 'call/api/recordings/';
 	private recordingStatus = <BehaviorSubject<RecordingStatusInfo>>new BehaviorSubject({
 		status: RecordingStatus.STOPPED,
 		recordingList: [] as RecordingInfo[],
@@ -22,8 +23,9 @@ export class RecordingService {
 	/**
 	 * @internal
 	 */
-	constructor(private actionService: ActionService) {
+	constructor(private actionService: ActionService, private openviduConfigService: OpenViduComponentsConfigService) {
 		this.recordingStatusObs = this.recordingStatus.asObservable();
+		this.API_RECORDINGS_PREFIX = this.openviduConfigService.getBaseHref() + this.API_RECORDINGS_PREFIX;
 	}
 
 	/**
@@ -159,7 +161,7 @@ export class RecordingService {
 		// Only COMPOSED recording is supported. The extension will allways be 'mp4'.
 		const queryParamForAvoidCache = `?t=${new Date().getTime()}`;
 		const link = document.createElement('a');
-		link.href = `${this.API_RECORDINGS_PREFIX}${recording.filename}${queryParamForAvoidCache}`;
+		link.href = `${this.API_RECORDINGS_PREFIX}${recording.id}/stream${queryParamForAvoidCache}`;
 		link.download = recording.filename || 'openvidu-recording.mp4';
 		link.dispatchEvent(
 			new MouseEvent('click', {