Merge pull request #752 from cloudinary/update-master-from-edge

chore: update master
cloudinary · Dec 9, 2024 · d5ccac5 · d5ccac5
2 parents b163910 + b408157
commit d5ccac5
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 0 deletions.
diff --git a/docs/profiles.html b/docs/profiles.html
@@ -23,6 +23,10 @@
   <script type="text/javascript" src="./scripts.js"></script>
 
   <script type="text/javascript">
+    window.addEventListener('load', async () => {
+      const playerWithDefaultProfile = await cloudinary.player('player-default-profile', {
+        cloudName: 'demo',
+        profile: 'cld-default',
     window.addEventListener('load', async () => {
       const playerWithDefaultProfile = await cloudinary.player('player-default-profile', {
         cloudName: 'demo',
@@ -32,6 +36,12 @@
       playerWithDefaultProfile.source('sea_turtle');
     }, false);
 
+    window.addEventListener('load', async function() {
+      const playerWithCustomProfile = await cloudinary.player('player-custom-profile', {
+        cloudName: 'prod',
+        profile: 'myCustomProfile',
+    }, false);
+
     window.addEventListener('load', async function() {
       const playerWithCustomProfile = await cloudinary.player('player-custom-profile', {
         cloudName: 'prod',
@@ -54,6 +64,20 @@
 
       playerWithCustomProfileAndOverrides.source('samples/cld-sample-video');
     }, false);
+
+    window.addEventListener('load', async function() {
+      const playerWithCustomProfileAndOverrides = await cloudinary.player('player-custom-profile-overrides', {
+        cloudName: 'prod',
+        profile: 'myCustomProfile',
+        colors: {
+          base: "#1532a8"
+        },
+        seekThumbnails: false,
+        aiHighlightsGraph: true,
+      });
+
+      playerWithCustomProfileAndOverrides.source('samples/cld-sample-video');
+    }, false);
   </script>
 </head>
 <body>
@@ -77,6 +101,34 @@ <h5>Player with default profile</h5>
 
   <h3 class="mt-4">Example Code:</h3>
 
+  <pre>
+    <code class="language-html">
+
+      &lt;video
+        id="player-default-profile"
+        controls
+        autoplay
+        muted
+        class="cld-video-player"
+        width="500"&gt;
+      &lt;/video&gt;
+
+      </code>
+      <code class="language-javascript">
+        window.addEventListener('load', async function() {
+          const playerWithDefaultProfile = await cloudinary.player('player-default-profile', {
+            cloudName: 'demo',
+            profile: 'cld-default',
+          });
+
+          playerWithDefaultProfile.source('sea_turtle');
+        }, false);
+      </code>
+    </pre>
+
+  <h5>Player with custom profile</h5>
+  <h3 class="mt-4">Example Code:</h3>
+
   <pre>
     <code class="language-html">
 
@@ -155,6 +207,7 @@ <h3 class="mt-4">Example Code:</h3>
 
   <pre>
     <code class="language-html">
+
       &lt;video
         id="player-custom-profile-overrides"
         controls
@@ -163,6 +216,7 @@ <h3 class="mt-4">Example Code:</h3>
         class="cld-video-player"
         width="500"&gt;
       &lt;/video&gt;
+
       </code>
       <code class="language-javascript">
         window.addEventListener('load', async function() {

diff --git a/test/e2e/specs/analyticsPage.spec.ts b/test/e2e/specs/analyticsPage.spec.ts
@@ -0,0 +1,20 @@
+import { vpTest } from '../fixtures/vpTest';
+import { expect, test } from '@playwright/test';
+import { waitForPageToLoadWithTimeout } from '../src/helpers/waitForPageToLoadWithTimeout';
+import { getLinkByName } from '../testData/pageLinksData';
+import { ExampleLinkName } from '../testData/ExampleLinkNames';
+
+// Link to Analytics page
+const link = getLinkByName(ExampleLinkName.Analytics);
+/**
+ * Testing if video on analytics page is playing by checking that is pause return false.
+ */
+vpTest(`Test if video on analytics page is playing as expected`, async ({ page, pomPages }) => {
+    await test.step('Navigate to analytics page by clicking on link', async () => {
+        await pomPages.mainPage.clickLinkByName(link.name);
+        await waitForPageToLoadWithTimeout(page, 5000);
+    });
+    await test.step('Validating that the video is playing (in case isPause is false)', async () => {
+        expect(await pomPages.analyticsPage.analyticsVideoComponent.isPaused()).toEqual(false);
+    });
+});
diff --git a/test/e2e/src/pom/PageManager.ts b/test/e2e/src/pom/PageManager.ts
@@ -2,6 +2,7 @@ import { Page } from '@playwright/test';
 import { HighlightsGraphPage } from './highlightsGraphPage';
 import { BasePage } from './BasePage';
 import { MainPage } from './mainPage';
+import { AnalyticsPage } from './analyticsPage';
 
 /**
  * Page manager,
@@ -40,5 +41,12 @@ export class PageManager {
     public get highlightGraphPage(): HighlightsGraphPage {
         return this.getPage(HighlightsGraphPage);
     }
+
+    /**
+     * Returns Analytics page object
+     */
+    public get analyticsPage(): AnalyticsPage {
+        return this.getPage(AnalyticsPage);
+    }
 }
 export default PageManager;
diff --git a/test/e2e/src/pom/analyticsPage.ts b/test/e2e/src/pom/analyticsPage.ts
@@ -0,0 +1,16 @@
+import { Page } from '@playwright/test';
+import { VideoComponent } from '../../components/videoComponent';
+import { BasePage } from './BasePage';
+const ANALYTICS_PAGE_VIDEO_SELECTOR = '//*[@id="player_html5_api"]';
+
+/**
+ * Video player examples analytics page object
+ */
+export class AnalyticsPage extends BasePage {
+    public analyticsVideoComponent: VideoComponent;
+
+    constructor(page: Page) {
+        super(page);
+        this.analyticsVideoComponent = new VideoComponent(page, ANALYTICS_PAGE_VIDEO_SELECTOR);
+    }
+}