Video Premiere UI for Scheduled Videos

client/src/app/+videos/+video-watch/shared/premiere/video-premiere.component.html

@@ -0,0 +1,10 @@
+<div class="premiere-container">
+  <img [src]="video?.thumbnailUrl" alt="Video Thumbnail" class="video-thumbnail" />
+  <div class="premiere-info">
+    <div class="premiere-text">
+
+      <p>Video will be available in {{ remainingTime }}</p>
+    </div>
+    <my-subscribe-button #subscribeButton [videoChannels]="[video.channel]" size="small"></my-subscribe-button>
+  </div>
+</div>

client/src/app/+videos/+video-watch/shared/premiere/video-premiere.component.scss

@@ -0,0 +1,56 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_bootstrap-variables';
+
+$video-default-height: 66vh;
+$video-max-height: calc(100vh - #{pvar(--header-height)} - #{$theater-bottom-space});
+
+.premiere-container {
+  position: relative;
+  width: 100%;
+  max-width: 800px;
+  height: 450px;
+  overflow: hidden;
+}
+
+.video-thumbnail {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.premiere-info {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 10px 20px;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.premiere-text {
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+.premiere-text p {
+  margin: 0;
+}
+
+.notify-button {
+  background-color: pvar(--primary);
+  color: black;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.notify-button:hover {
+  background-color: #cc0000;
+}

client/src/app/+videos/+video-watch/shared/premiere/video-premiere.component.ts

@@ -0,0 +1,69 @@
+import { Component, Input } from "@angular/core";
+import { GlobalIconComponent } from "../../../../shared/shared-icons/global-icon.component";
+import { InfiniteScrollerDirective } from "../../../../shared/shared-main/common/infinite-scroller.directive";
+import { NgbTooltip } from "@ng-bootstrap/ng-bootstrap";
+import { NgIf, NgClass, NgFor } from "@angular/common";
+import { VideoDetails } from "@app/shared/shared-main/video/video-details.model";
+import { PTDatePipe } from "@app/shared/shared-main/common/date.pipe";
+import { interval, Subscription } from "rxjs";
+import { SubscribeButtonComponent } from "@app/shared/shared-user-subscription/subscribe-button.component";
+
+@Component({
+  selector: "my-video-premiere",
+  templateUrl: "./video-premiere.component.html",
+  styleUrls: ["./video-premiere.component.scss"],
+  standalone: true,
+  imports: [
+    NgIf,
+    InfiniteScrollerDirective,
+    NgClass,
+    NgbTooltip,
+    GlobalIconComponent,
+    SubscribeButtonComponent,
+    NgFor,
+    PTDatePipe,
+  ],
+})
+export class VideoPremiereComponent {
+  @Input() video: VideoDetails;
+
+  remainingTime: string = "";
+  private countdownSubscription!: Subscription;
+
+  ngOnInit(): void {
+    this.startCountdown();
+  }
+
+  ngOnDestroy(): void {
+    this.countdownSubscription?.unsubscribe();
+  }
+
+  startCountdown(): void {
+    this.countdownSubscription = interval(1000).subscribe(() => {
+      const now = new Date().getTime();
+      const premiereTime = new Date(
+        this.video.scheduledUpdate.updateAt
+      ).getTime();
+      const diff = premiereTime - now;
+
+      if (diff <= 0) {
+        this.remainingTime = "Premiere has started!";
+        this.countdownSubscription.unsubscribe();
+      } else {
+        const years = Math.floor(diff / (1000 * 60 * 60 * 24 * 365));
+        const days = Math.floor(
+          (diff % (1000 * 60 * 60 * 24 * 365)) / (1000 * 60 * 60 * 24)
+        );
+        const hours = Math.floor(
+          (diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+        );
+        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+        const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+        this.remainingTime = `${years > 0 ? years + "y " : ""}${
+          days > 0 ? days + "d " : ""
+        }${hours}h ${minutes}m ${seconds}s`;
+      }
+    });
+  }
+}

client/src/app/+videos/+video-watch/video-watch.component.html

@@ -10,9 +10,14 @@
         <ng-container i18n>Please try refreshing the page, or try again later.</ng-container>
       </div>
 
-      <div id="videojs-wrapper">
-        <video #playerElement class="video-js vjs-peertube-skin" playsinline="true"></video>
-      </div>
+      @if (hasPremiere()) {
+        <my-video-premiere [video]="video"></my-video-premiere>
+      }
+      @else {
+        <div id="videojs-wrapper" *ngIf="!hasPremiere()">
+          <video #playerElement class="video-js vjs-peertube-skin" playsinline="true"></video>
+        </div>
+      }
 
       <div class="player-widget-component">
         <my-video-watch-playlist