commencement de la page watching

src/app/user/utils/components/advert/advert.component.html

@@ -1,6 +1,20 @@
-<div [class]="themeService.getClassTheme()">
-    <div class="myContainer">
-        <span class="helper"></span>
-        <img [src]="'assets/pub/'+ad.images[idxImage].url" [alt]="ad.images[idxImage].url">
-    </div>
+<div *ngIf="from==='search' || from==='myPlaylists'" class="myContainer">
+    <span class="helper"></span>
+    <img [src]="'assets/pub/'+ad.images[idxImage].url"
+         [alt]="ad.images[idxImage].url"
+         id="imgFromSearchOrMyPlaylists">
 </div>
+
+<!-- --------------------------------------------------------------------- -->
+
+<img *ngIf="from === 'watchingLeft'"
+     [src]="'assets/pub/'+ad.images[idxImage].url"
+     [alt]="ad.images[idxImage].url"
+     id="imgFromWatchingLeft">
+
+<!-- --------------------------------------------------------------------- -->
+
+<img *ngIf="from === 'watchingRight'"
+     [src]="'assets/pub/'+ad.images[idxImage].url"
+     [alt]="ad.images[idxImage].url"
+     id="imgFromWatchingRight">

src/app/user/utils/components/advert/advert.component.scss

@@ -6,23 +6,33 @@
   transform: translateY(-50%);
 }
 
-
-img {
+#imgFromSearchOrMyPlaylists {
   max-width: 100%;
   max-height: 100%;
-  border: solid 3px;
+  border: solid 3px black;
   vertical-align: middle;
 }
-.lightTheme img {
-  border-color: black;
-}
-.darkTheme img {
-  border-color: white;
-}
-
 
 .helper {
   display: inline-block;
   height: 100%;
   vertical-align: middle;
 }
+
+// ------------------------------------------------------------------------------
+
+#imgFromWatchingLeft {
+  width: 14vw;
+  height: 70vh;
+  border: solid 3px black;
+  position: fixed;
+  left: 1vw;
+}
+
+#imgFromWatchingRight {
+  width: 15vw;
+  height: 70vh;
+  border: solid 3px black;
+  position: fixed;
+  right: 1vw;
+}

src/app/user/utils/components/advert/advert.component.ts

@@ -12,6 +12,7 @@ import {ThemeService} from "../../../../utils/services/theme/theme.service";
 export class AdvertComponent implements OnInit
 {
     @Input() ad: Advert;
+    @Input() from: string = "search";
     idxImage: number = 0;
 
 
@@ -22,6 +23,8 @@ export class AdvertComponent implements OnInit
     {
         const nbImages = this.ad.images.length;
         this.idxImage = Math.floor(Math.random() * nbImages);
+
+
     }
 
 }