@salesforcedevs/dw-components 1.3.261 → 1.3.265

package/lwc.config.json

@@ -6,6 +6,7 @@
     "expose": [
         "dw/blogsGrid",
         "dw/videoGrid",
+        "dw/youtubeVideoGrid",
         "dw/browseTrials",
         "dw/cardBlogPostProvider",
         "dw/cardPodcastEpisodeProvider",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.3.261",
+    "version": "1.3.265",
     "description": "Lightning web components for https://developer.salesforce.com",
     "license": "MIT",
     "engines": {
@@ -10,11 +10,13 @@
         "access": "public"
     },
     "dependencies": {
+        "@types/youtube-player": "^5.5.11",
         "classnames": "^2.2.6",
         "lodash.clonedeep": "^4.5.0",
         "lodash.orderby": "^4.6.0",
         "lodash.uniqby": "^4.7.0",
-        "query-string": "^7.1.3"
+        "query-string": "^7.1.3",
+        "youtube-player": "^5.6.0"
     },
     "devDependencies": {
         "@types/classnames": "^2.2.10",
@@ -24,5 +26,5 @@
         "@types/setimmediate": "^1.0.2",
         "setimmediate": "^1.0.5"
     },
-    "gitHead": "8f326de081fbbef38ac44074ed4f54190e6416c1"
+    "gitHead": "840b94133684a800cbdc7432f9df4d69a15cc0e9"
 }

package/src/modules/dw/youtubeVideoGrid/types.ts

@@ -0,0 +1,8 @@
+export type VideoData = {
+    id: string;
+    iframeTitle: string;
+    title: string;
+    body?: string;
+    src: string;
+    date?: string;
+};

package/src/modules/dw/youtubeVideoGrid/youtubeVideoGrid.css

@@ -0,0 +1,14 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+h3 {
+    margin: var(--dx-g-spacing-md) 0;
+}
+
+p {
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.video-container iframe {
+    border-radius: 16px;
+}

package/src/modules/dw/youtubeVideoGrid/youtubeVideoGrid.html

@@ -0,0 +1,24 @@
+<template>
+    <dx-grid columns="dynamic">
+        <template for:each={videosData} for:item="videoData">
+            <div class="video-container" key={videoData.id}>
+                <iframe
+                    id={videoData.id}
+                    src={videoData.src}
+                    width={width}
+                    height={height}
+                    title={videoData.iframeTitle}
+                    allowfullscreen
+                ></iframe>
+                <h3 lwc:if={videoData.title} class="dx-text-display-6">
+                    {videoData.title}
+                </h3>
+                <p lwc:if={videoData.body}>{videoData.body}</p>
+                <dx-formatted-date-time
+                    lwc:if={videoData.date}
+                    value={videoData.date}
+                ></dx-formatted-date-time>
+            </div>
+        </template>
+    </dx-grid>
+</template>

package/src/modules/dw/youtubeVideoGrid/youtubeVideoGrid.ts

@@ -0,0 +1,66 @@
+import { api, LightningElement } from "lwc";
+import YoutubePlayer from "youtube-player";
+import { VideoData } from "./types";
+
+const PLAYING = 1;
+
+export default class YoutubeVideoGrid extends LightningElement {
+    @api width = 382;
+    @api height = 215;
+
+    @api
+    get videosData(): Array<VideoData> {
+        return this._videosData;
+    }
+
+    set videosData(value: string | Array<VideoData>) {
+        if (typeof value === "string") {
+            try {
+                this._videosData = JSON.parse(value) as Array<VideoData>;
+            } catch (error) {
+                console.error("Error parsing cards data:", error);
+                this._videosData = [];
+            }
+        } else {
+            this._videosData = value;
+        }
+    }
+
+    private _videosData: Array<VideoData> = [];
+    private players: any = [];
+    private _hasRendered = false;
+
+    private pauseAllExceptCurrent(id: any) {
+        this.players.forEach((currentPlayer: any) => {
+            if (currentPlayer.id !== id) {
+                currentPlayer.player.pauseVideo();
+            }
+        });
+    }
+
+    renderedCallback() {
+        if (this._hasRendered) {
+            return;
+        }
+
+        const iframeEls = this.template.querySelectorAll("iframe");
+
+        iframeEls.forEach((el, index) => {
+            // The YoutubePlayer package is a wrapper around the Youtube embedded API without the need for script tags (which aren't allowed in LWC templates)
+            // https://developers.google.com/youtube/iframe_api_reference
+            const player = YoutubePlayer(el);
+
+            this.players.push({ id: index, player });
+
+            // Listener for state change events (play, pause, etc).
+            player.on("stateChange", (event: any) => {
+                if (event.data === PLAYING) {
+                    // Pause all other players when a new one starts playing.
+                    this.pauseAllExceptCurrent(index);
+                }
+            });
+        });
+
+        this._hasRendered = true;
+    }
+}