[#44898] Enterprise page on the Notification Centre - Animation

https://community.openproject.org/work_packages/44898

frontend/src/app/features/in-app-notifications/date-alerts-upsale/ian-date-alerts-upsale.component.html

@@ -1,5 +1,5 @@
 <op-enterprise-page
-  [feature_image]="image"
+  [feature_video]="video"
   [feature_title]="text.title"
   [feature_description]="text.description"
 ></op-enterprise-page>

frontend/src/app/features/in-app-notifications/date-alerts-upsale/ian-date-alerts-upsale.component.ts

@@ -1,6 +1,6 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
-import { imagePath } from 'core-app/shared/helpers/images/path-helper';
+import { videoPath } from 'core-app/shared/helpers/videos/path-helper';
 
 @Component({
   selector: 'op-ian-date-alerts-upsale',
@@ -8,7 +8,7 @@ import { imagePath } from 'core-app/shared/helpers/images/path-helper';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class InAppNotificationsDateAlertsUpsaleComponent {
-  image = imagePath('notification-center/date-alerts-ee.png');
+  video = videoPath('enterprise/date-alert-notifications.mp4');
 
   text = {
     title: this.I18n.t('js.notifications.date_alerts.upsale.title'),

frontend/src/app/shared/components/enterprise-page/enterprise-page.component.html

@@ -12,14 +12,15 @@
     <p class="upsale--feature-reference"
     [textContent]="more_info"></p>
 
-  <video width="400" *ngIf="feature_video" controls class="widget-box--teaser-video">
-    <source src="feature_video" type="video/mp4">
+  <video width="400" *ngIf="feature_video" autoplay="autoplay" loop="loop" muted="muted" class="widget-box--teaser-video" [src]="feature_video">
   </video>
-    
-  <img [src]="feature_image" class="widget-box--teaser-image" *ngIf="feature_image">
-  <img [src]="image.enterprise_edition" class="widget-box--teaser-image_default" *ngIf="!feature_image">
-
 
+  <img [src]="feature_image" class="widget-box--teaser-image" *ngIf="feature_image">
+  <img
+    [src]="image.enterprise_edition"
+    class="widget-box--teaser-image_default"
+    *ngIf="!feature_image && !feature_video"
+  >
 
   <p [innerHTML]="text.enterprise_info_html(feature_title)"></p>
   <p>{{text.upgrade_info}}</p>

frontend/src/app/shared/helpers/videos/path-helper.ts

@@ -0,0 +1,15 @@
+/**
+ * Returns an absolute asset path from the assets/videos/ folder
+ *
+ * e.g., to access:
+ * app/assets/videos/enterprise/date-alert-notification-settings.mp4
+ *
+ * use
+ * imagePath('enterprise/date-alert-notification-settings.mp4')
+ *
+ *
+ * @param video Path to the video starting from app/assets/videos
+ */
+export function videoPath(video:string):string {
+  return `/assets/${video}`;
+}