@salesforcedevs/dw-components 1.3.261-alpha.1 → 1.3.265-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.3.261-alpha.1",
+    "version": "1.3.265-alpha.0",
     "description": "Lightning web components for https://developer.salesforce.com",
     "license": "MIT",
     "engines": {
@@ -10,12 +10,12 @@
         "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",
-        "@types/youtube-player": "^5.5.11",
         "youtube-player": "^5.6.0"
     },
     "devDependencies": {

package/src/modules/dw/blogsGrid/blogsGrid.html

@@ -5,10 +5,8 @@
         <div class="subscription-box">
             <div class="box">
                 <div class="content">
-                    <h2 class="title">
-                        Get the latest Salesforce Developer blog posts and
-                        podcast episodes via Slack or RSS.
-                    </h2>
+                    <h2 class="title">{rssTitle}</h2>
+                    <p lwc:if={rssBody}>{rssBody}</p>
                     <div class="cta-container">
                         <dx-button
                             size="small"
@@ -19,7 +17,7 @@
                             href="/slack/install"
                             class="button"
                         >
-                            Add to Slack
+                            {rssBtnOneLabel}
                         </dx-button>
                         <dx-button
                             size="small"
@@ -31,7 +29,7 @@
                             class="button"
                             onclick={rssOnClick}
                         >
-                            Subscribe to RSS
+                            {rssBtnTwoLabel}
                         </dx-button>
                     </div>
                 </div>
@@ -65,14 +63,14 @@
             if:true={showLoadMore}
             onclick={onClick}
             variant="load-more"
-            text="SHOW MORE"
+            text={showMoreLabel}
         ></dx-hr>
         <dx-hr
             if:true={showArchives}
             onclick={onClick}
             variant="link"
             href="/content-archive?content-type=Blogs"
-            text="VIEW ARCHIVES"
+            text={viewArchivesLabel}
         ></dx-hr>
     </div>
 </template>

package/src/modules/dw/blogsGrid/blogsGrid.ts

@@ -1,3 +1,4 @@
+import { api } from "lwc";
 import { normalizePost } from "dxUtils/normalizers";
 import { track } from "dxUtils/analytics";
 import { WordpressBlogPost, NormalizedPost } from "typings/custom";
@@ -13,6 +14,14 @@ const ANALYTICS_INFO = {
 };
 
 export default class BlogsGrid extends PostsGrid {
+    @api showMoreLabel = "SHOW MORE";
+    @api viewArchivesLabel = "VIEW ARCHIVES";
+    @api rssTitle =
+        "Get the latest Salesforce Developer blog posts and podcast episodes via Slack or RSS.";
+    @api rssBody?: string;
+    @api rssBtnOneLabel = "Add to Slack";
+    @api rssBtnTwoLabel = "Subscribe to RSS";
+
     _loadMoreAmount = 21;
 
     normalizePost(post: WordpressBlogPost): NormalizedPost {

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

@@ -2,6 +2,8 @@ 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;
@@ -26,28 +28,39 @@ export default class YoutubeVideoGrid extends LightningElement {
 
     private _videosData: Array<VideoData> = [];
     private players: any = [];
+    private _hasRendered = false;
 
     private pauseAllExceptCurrent(id: any) {
-        this.players.forEach((player: any) => {
-            if (player.id !== id) {
-                player.player.pauseVideo();
+        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 === 1) {
+                if (event.data === PLAYING) {
+                    // Pause all other players when a new one starts playing.
                     this.pauseAllExceptCurrent(index);
                 }
             });
         });
+
+        this._hasRendered = true;
     }
 }