patch test Signal use

backend/controllers/videoController.js

@@ -0,0 +1,22 @@
+import pool from "../config/db.js";
+
+export const getVideo = async (req, res) => {
+  let conn;
+  try {
+    conn = await pool.getConnection();
+    const data = await conn.query(`SELECT * FROM video ORDER BY created_at DESC`);
+    return res.status(200).json({
+      data
+    });
+  } catch (error) {
+    console.error('Erreur lors de la récupération de l\'utilisateur :', error);
+    return res.status(500).json({
+      message: 'Erreur lors de la récupération de l\'utilisateur.',
+      status: false
+    });
+  } finally {
+    if (conn) {
+      await conn.release();
+    }
+  }
+};

backend/routes/apiRoutes.js

@@ -11,6 +11,7 @@ import {verifyToken} from "../middleware/tokenJWTMiddleware.js";
 import multer from "multer";
 import { v4 as uuidv4 } from 'uuid';
 import path from "node:path";
+import {getVideo} from "../controllers/videoController.js";
 
 router.get('', apiController);
 
@@ -51,4 +52,7 @@ router.post('/auth/logout', logout);
 router.get('/auth/user', verifyToken, getprofile);
 router.get('/auth/check-auth', verifyToken, checkAuth);
 
+// Récupérer vidéo
+router.get('/video', getVideo)
+
 export default router;

src/app/_models/video.ts

@@ -0,0 +1,13 @@
+export interface Videos {
+  data: Video[];
+}
+export interface Video {
+  id: number;
+  user_id: number;
+  name: string;
+  description: string;
+  link_miniature: string;
+  link_video: string;
+  created_at: Date;
+  updated_at: Date;
+}

src/app/_services/video.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import {HttpClient, HttpHeaders} from '@angular/common/http';
+import {Observable} from 'rxjs';
+import {Videos} from '../_models/video';
+import {environment} from '../../environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class VideoService {
+
+  constructor(private http: HttpClient) { }
+
+  getVideo(): Observable<Videos> {
+    const headers = new HttpHeaders({
+      'Authorization': environment.apikey,
+      'Content-Type': 'application/json'
+    });
+    return this.http.get<Videos>(environment.apiurl + '/video', { headers });
+  }
+
+}

src/app/public/pages/home/home.component.html

@@ -1,85 +1,19 @@
 <section class="text-gray-600 body-font">
   <div class="container px-5 py-24 mx-auto">
     <div class="flex flex-wrap -m-4">
+      @for (video of videos; track video.name) {
         <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
-        <a class="block relative h-48 rounded overflow-hidden">
+          <a [href]="generatorLink()" target="_blank">
-          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://dummyimage.com/420x260">
+            <div class="block relative h-48 rounded overflow-hidden">
-        </a>
+              <img alt="ecommerce" class="object-cover object-center w-full h-full block" [src]="video.link_miniature">
+            </div>
             <div class="mt-4">
-          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
+              <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">Sortie le {{ video.created_at | date: 'dd/MM/yyyy' }}</h3>
-          <h2 class="text-gray-900 title-font text-lg font-medium">The Catalyzer</h2>
+              <h2 class="text-gray-900 title-font text-lg font-medium">{{ video.description }}</h2>
-          <p class="mt-1">$16.00</p>
             </div>
-      </div>
-      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
-        <a class="block relative h-48 rounded overflow-hidden">
-          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://dummyimage.com/421x261">
           </a>
-        <div class="mt-4">
-          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
-          <h2 class="text-gray-900 title-font text-lg font-medium">Shooting Stars</h2>
-        </div>
-      </div>
-      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
-        <a class="block relative h-48 rounded overflow-hidden">
-          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://dummyimage.com/422x262">
-        </a>
-        <div class="mt-4">
-          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
-          <h2 class="text-gray-900 title-font text-lg font-medium">Neptune</h2>
-          <p class="mt-1">$12.00</p>
-        </div>
-      </div>
-      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
-        <a class="block relative h-48 rounded overflow-hidden">
-          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://dummyimage.com/423x263">
-        </a>
-        <div class="mt-4">
-          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
-          <h2 class="text-gray-900 title-font text-lg font-medium">The 400 Blows</h2>
-          <p class="mt-1">$18.40</p>
-        </div>
-      </div>
-      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
-        <a class="block relative h-48 rounded overflow-hidden">
-          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://dummyimage.com/424x264">
-        </a>
-        <div class="mt-4">
-          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
-          <h2 class="text-gray-900 title-font text-lg font-medium">The Catalyzer</h2>
-          <p class="mt-1">$16.00</p>
-        </div>
-      </div>
-      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
-        <a class="block relative h-48 rounded overflow-hidden">
-          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://dummyimage.com/425x265">
-        </a>
-        <div class="mt-4">
-          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
-          <h2 class="text-gray-900 title-font text-lg font-medium">Shooting Stars</h2>
-          <p class="mt-1">$21.15</p>
-        </div>
-      </div>
-      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
-        <a class="block relative h-48 rounded overflow-hidden">
-          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://dummyimage.com/427x267">
-        </a>
-        <div class="mt-4">
-          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
-          <h2 class="text-gray-900 title-font text-lg font-medium">Neptune</h2>
-          <p class="mt-1">$12.00</p>
-        </div>
-      </div>
-      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
-        <a class="block relative h-48 rounded overflow-hidden">
-          <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://dummyimage.com/428x268">
-        </a>
-        <div class="mt-4">
-          <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
-          <h2 class="text-gray-900 title-font text-lg font-medium">The 400 Blows</h2>
-          <p class="mt-1">$18.40</p>
-        </div>
         </div>
+      }
     </div>
   </div>
 </section>

src/app/public/pages/home/home.component.ts

@@ -1,19 +1,43 @@
 import {Component, OnInit} from '@angular/core';
 import {Title} from '@angular/platform-browser';
+import {VideoService} from '../../../_services/video.service';
+import {Video} from '../../../_models/video';
+import {DatePipe} from '@angular/common';
 
 @Component({
   selector: 'app-home',
-  imports: [],
+  imports: [
+    DatePipe
+  ],
   templateUrl: './home.component.html',
   styleUrl: './home.component.css'
 })
 export class HomeComponent implements OnInit {
 
-  constructor(private title: Title) {
+  videos: Video[] = []
+
+  constructor(private title: Title, private videoService: VideoService) {
   }
 
   ngOnInit(): void {
     this.title.setTitle('Accueil - YouVideo');
+    this.videoService.getVideo().subscribe(v => {
+      this.videos = v.data;
+    })
+  }
+
+  generatorLink() {
+    const baseId = 'qiSOyusTaeo';
+    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_';
+    const length = 11;
+
+    let randomPart = '';
+    for (let i = 0; i < length; i++) {
+      const randomIndex = Math.floor(Math.random() * characters.length);
+      randomPart += characters.charAt(randomIndex);
+    }
+
+    return `https://youtube.com/watch?v=${randomPart}`;
   }
 
 }