add listen

src/app/listen/listen.component.ts

@@ -78,44 +78,48 @@ export class ListenComponent implements OnInit {
   //  }
   //}
 
-  onFileSelected(event: any): void {
-    const file = event.target.files[0];
-    if (file && file.name.toLowerCase().endsWith('.mp4')) {
-      this.selectedFile = file;
-      const formData = new FormData();
-      formData.append('video', file);
-
-      this.listenService.uploadVideo(formData).subscribe({
-        next: (response) => {
-          const newVideoUrl = `http://127.0.0.1:5000/static/videos/${response.filename}`;
-          this.videoUrl = ''; // Reset first to force re-binding
+ 
+onFileSelected(event: any): void {
+  const file = event.target.files[0];
+  if (file && file.name.toLowerCase().endsWith('.mp4')) {
+    this.selectedFile = file;
+    const formData = new FormData();
+    formData.append('video', file);
+
+    this.listenService.uploadVideo(formData).subscribe({
+      next: (response) => {
+        // Use backend /media/videos/<filename> path for preview (works both local & HF)
+        const newVideoUrl = this.listenService.getVideoUrl(response.filename);
+
+        this.videoUrl = ''; // Reset first to force re-binding
+        setTimeout(() => {
+          this.videoUrl = newVideoUrl;
+
+          const videoElement = document.getElementById('videoPreview') as HTMLVideoElement;
+          if (videoElement) {
+            videoElement.load(); // Reload the video player
+          }
+
+          this.uploadSuccess = true;
+          this.isGenerateEnabled = false;
+          this.isVideoPlaying = false;
+
           setTimeout(() => {
-            this.videoUrl = newVideoUrl;
-
-            const videoElement = document.getElementById('videoPreview') as HTMLVideoElement;
-            if (videoElement) {
-              videoElement.load(); // Reload the video player
-            }
-
-            this.uploadSuccess = true;
-            this.isGenerateEnabled = false;
-            this.isVideoPlaying = false;
-
-            setTimeout(() => {
-              this.popupMessage = '✅ Video uploaded successfully!';
-              setTimeout(() => this.popupMessage = '', 7000);
-            }, 1000);
-          });
-        },
-        error: (err) => {
-          console.error('Upload failed', err);
-          alert('❌ Video upload failed.');
-        }
-      });
-    } else {
-      alert('Please upload a valid MP4 file.');
-    }
+            this.popupMessage = '✅ Video uploaded successfully!';
+            setTimeout(() => this.popupMessage = '', 7000);
+          }, 1000);
+        });
+      },
+      error: (err) => {
+        console.error('Upload failed', err);
+        alert('❌ Video upload failed.');
+      }
+    });
+  } else {
+    alert('Please upload a valid MP4 file.');
   }
+}
+
 
 
   onVideoEnded(): void {

src/app/listen/listen.service.ts

@@ -12,6 +12,11 @@ export class ListenService {
   
   constructor(private http: HttpClient) { }
 
+  /** Helper to form the full video URL for previews */
+  getVideoUrl(filename: string): string {
+    return `${this.baseUrl}/videos/${filename}`;
+  }
+
   // Fetch the list of available videos
   getVideos(): Observable<any[]> {
     return this.http.get<any[]>(`${this.baseUrl}/videos`);