From 84644004a50bc8b0715039491ac8c25dadf97ec5 Mon Sep 17 00:00:00 2001
From: James Sullivan <jsullivan@cloudanswers.com>
Date: Tue, 8 Jun 2021 18:42:51 +0200
Subject: [PATCH 1/3] enable component for use in communities

---
 .../default/classes/VideoViewerController.cls |  10 +-
 .../main/default/lwc/videoViewer/utils.js     |   6 +-
 .../lwc/videoViewer/videoViewer.js-meta.xml   | 323 ++++++++++++------
 3 files changed, 223 insertions(+), 116 deletions(-)
 mode change 100755 => 100644 force-app/main/default/classes/VideoViewerController.cls
 mode change 100755 => 100644 force-app/main/default/lwc/videoViewer/videoViewer.js-meta.xml

diff --git a/force-app/main/default/classes/VideoViewerController.cls b/force-app/main/default/classes/VideoViewerController.cls
old mode 100755
new mode 100644
index 9659dc7..ef5d78d
--- a/force-app/main/default/classes/VideoViewerController.cls
+++ b/force-app/main/default/classes/VideoViewerController.cls
@@ -33,6 +33,12 @@ public with sharing class VideoViewerController {
 
   @AuraEnabled(cacheable=true)
   public static String getBaseUrl() {
-    return System.URL.getOrgDomainUrl().toExternalForm();
+    if(Network.getNetworkId() == null){
+      String baseURL = System.URL.getSalesforceBaseUrl().toExternalForm();
+      baseURL =  baseURL.split('\\.')[0];
+      return baseURL+'--c'+'.documentforce.com';
+    }else{
+      return System.URL.getSalesforceBaseUrl().toExternalForm();
+    }
   }
-}
+}
\ No newline at end of file
diff --git a/force-app/main/default/lwc/videoViewer/utils.js b/force-app/main/default/lwc/videoViewer/utils.js
index 1459e7f..e8294b2 100644
--- a/force-app/main/default/lwc/videoViewer/utils.js
+++ b/force-app/main/default/lwc/videoViewer/utils.js
@@ -8,15 +8,13 @@
 /**
  * Util methods
  */
-const CUSTOM_PART = "--c";
 const DOWNLOAD_PART =
-  ".documentforce.com/sfc/servlet.shepherd/document/download/";
+  "/sfc/servlet.shepherd/document/download/";
 
 // Returns either an empty string or the org's base video download url
 export function getBaseVideoUrl(baseUrl) {
   if (baseUrl) {
-    const domain = baseUrl.split(".")[0];
-    return `${domain}${CUSTOM_PART}${DOWNLOAD_PART}`;
+    return `${baseUrl}${DOWNLOAD_PART}`;
   }
   return "";
 }
diff --git a/force-app/main/default/lwc/videoViewer/videoViewer.js-meta.xml b/force-app/main/default/lwc/videoViewer/videoViewer.js-meta.xml
old mode 100755
new mode 100644
index fbed0b2..90437d9
--- a/force-app/main/default/lwc/videoViewer/videoViewer.js-meta.xml
+++ b/force-app/main/default/lwc/videoViewer/videoViewer.js-meta.xml
@@ -1,110 +1,213 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
-   <apiVersion>48.0</apiVersion>
-   <masterLabel>Video Viewer</masterLabel>
-   <description>View videos attached to record detail pages, chatter or file detail pages.</description>
-   <isExposed>true</isExposed>
-   <targets>
-      <target>lightning__RecordPage</target>
-   </targets>
-   <targetConfigs>
-      <targetConfig targets="lightning__RecordPage">
-         <property
-            name="title"
-            type="String"
-            default="Attached Videos"
-            label="Title"
-            placeholder="Enter title for the component"
-            description="Title for the component"
-         />
-         <property
-            name="muted"
-            type="Boolean"
-            label="Muted"
-            default="true"
-            description="Should the video start without sound (Recommended)"
-         />
-         <property
-            name="showVideoCountInTitle"
-            type="Boolean"
-            label="Show Supported Video Count in Title"
-            default="true"
-            description="Displays a count of the number of available videos attached to the record when used on a record detail page"
-         />
-         <property
-            name="showVideoName"
-            type="Boolean"
-            label="Show Video Title"
-            default="true"
-            description="Displays the title of the current video, when the component is present on a record detail page"
-         />
-         <property
-            name="showVideoDescription"
-            type="Boolean"
-            label="Show Video Description"
-            default="true"
-            description="Displays the description for the current video, when the component is present on a record detail page"
-         />
-         <property
-            name="desktopWidth"
-            type="String"
-            label=" Desktop Width"
-            default="400"
-            description="The width of the video's display area for desktop, in CSS pixels (absolute values only; no percentages.)"
-         />
-         <property
-            name="desktopHeight"
-            type="String"
-            label="Desktop Height"
-            default="300"
-            description="The height of the video's display area for desktop, in CSS pixels (absolute values only; no percentages.)"
-         />
-         <property
-            name="tabletWidth"
-            type="String"
-            label="Tablet Width"
-            default="200"
-            description="The width of the video's display area for tablets, in CSS pixels (absolute values only; no percentages.)"
-         />
-         <property
-            name="tabletHeight"
-            type="String"
-            label="Tablet Height"
-            default="150"
-            description="The height of the video's display area for tablets, in CSS pixels (absolute values only; no percentages.)"
-         />
-         <property
-            name="mobileWidth"
-            type="String"
-            label="Mobile Width"
-            default="300"
-            description="The width of the video's display area for mobile devices, in CSS pixels (absolute values only; no percentages.)"
-         />
-         <property
-            name="mobileHeight"
-            type="String"
-            label="Mobile Height"
-            default="225"
-            description="The height of the video's display area for mobile devices, in CSS pixels (absolute values only; no percentages.)"
-         />
-         <property
-            name="noVideoMessage"
-            type="String"
-            default="There are no supported videos (mp4, webm, mov, m4v) attached with this record."
-            label="No Supported Videos Message"
-            description="The message to be dispalyed to the users when no supported video is attached to the record. This message is also displayed when viewing unsupported file formats on file details page"
-         />
-         <property
-            name="errorMessage"
-            type="String"
-            default="There was an error playing the video."
-            label="Error Message"
-            description="The error message to be dispalyed to the users when there is an error playing the video."
-         />
-         <supportedFormFactors>
-            <supportedFormFactor type="Large" />
-            <supportedFormFactor type="Small" />
-        </supportedFormFactors>
-      </targetConfig>
-   </targetConfigs>
-</LightningComponentBundle>
+<?xml version="1.0" encoding="UTF-8" ?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+   <apiVersion>52.0</apiVersion>
+   <masterLabel>Video Viewer</masterLabel>
+   <description>View videos attached to record detail pages, chatter or file detail pages.</description>
+   <isExposed>true</isExposed>
+   <targets>
+      <target>lightning__RecordPage</target>
+      <target>lightningCommunity__Page</target>
+      <target>lightningCommunity__Default</target>
+  </targets>
+   <targetConfigs>
+      <targetConfig targets="lightning__RecordPage">
+         <property
+            name="title"
+            type="String"
+            default="Attached Videos"
+            label="Title"
+            placeholder="Enter title for the component"
+            description="Title for the component"
+         />
+         <property
+            name="muted"
+            type="Boolean"
+            label="Muted"
+            default="true"
+            description="Should the video start without sound (Recommended)"
+         />
+         <property
+            name="showVideoCountInTitle"
+            type="Boolean"
+            label="Show Supported Video Count in Title"
+            default="true"
+            description="Displays a count of the number of available videos attached to the record when used on a record detail page"
+         />
+         <property
+            name="showVideoName"
+            type="Boolean"
+            label="Show Video Title"
+            default="true"
+            description="Displays the title of the current video, when the component is present on a record detail page"
+         />
+         <property
+            name="showVideoDescription"
+            type="Boolean"
+            label="Show Video Description"
+            default="true"
+            description="Displays the description for the current video, when the component is present on a record detail page"
+         />
+         <property
+            name="desktopWidth"
+            type="String"
+            label=" Desktop Width"
+            default="400"
+            description="The width of the video's display area for desktop, in CSS pixels (absolute values only; no percentages.)"
+         />
+         <property
+            name="desktopHeight"
+            type="String"
+            label="Desktop Height"
+            default="300"
+            description="The height of the video's display area for desktop, in CSS pixels (absolute values only; no percentages.)"
+         />
+         <property
+            name="tabletWidth"
+            type="String"
+            label="Tablet Width"
+            default="200"
+            description="The width of the video's display area for tablets, in CSS pixels (absolute values only; no percentages.)"
+         />
+         <property
+            name="tabletHeight"
+            type="String"
+            label="Tablet Height"
+            default="150"
+            description="The height of the video's display area for tablets, in CSS pixels (absolute values only; no percentages.)"
+         />
+         <property
+            name="mobileWidth"
+            type="String"
+            label="Mobile Width"
+            default="300"
+            description="The width of the video's display area for mobile devices, in CSS pixels (absolute values only; no percentages.)"
+         />
+         <property
+            name="mobileHeight"
+            type="String"
+            label="Mobile Height"
+            default="225"
+            description="The height of the video's display area for mobile devices, in CSS pixels (absolute values only; no percentages.)"
+         />
+         <property
+            name="noVideoMessage"
+            type="String"
+            default="There are no supported videos (mp4, webm, mov, m4v) attached with this record."
+            label="No Supported Videos Message"
+            description="The message to be dispalyed to the users when no supported video is attached to the record. This message is also displayed when viewing unsupported file formats on file details page"
+         />
+         <property
+            name="errorMessage"
+            type="String"
+            default="There was an error playing the video."
+            label="Error Message"
+            description="The error message to be dispalyed to the users when there is an error playing the video."
+         />
+         <supportedFormFactors>
+            <supportedFormFactor type="Large" />
+            <supportedFormFactor type="Small" />
+        </supportedFormFactors>
+      </targetConfig>
+      <targetConfig targets="lightningCommunity__Default">
+         <property
+            name="recordId"
+            type="String"
+            label="Record ID"
+            description="Automatically bind the page's record id to the component variable"
+            default="{!recordId}"
+         />
+         <property
+            name="title"
+            type="String"
+            default="Attached Videos"
+            label="Title"
+            placeholder="Enter title for the component"
+            description="Title for the component"
+         />
+         <property
+            name="muted"
+            type="Boolean"
+            label="Muted"
+            default="true"
+            description="Should the video start without sound (Recommended)"
+         />
+         <property
+            name="showVideoCountInTitle"
+            type="Boolean"
+            label="Show Supported Video Count in Title"
+            default="true"
+            description="Displays a count of the number of available videos attached to the record when used on a record detail page"
+         />
+         <property
+            name="showVideoName"
+            type="Boolean"
+            label="Show Video Title"
+            default="true"
+            description="Displays the title of the current video, when the component is present on a record detail page"
+         />
+         <property
+            name="showVideoDescription"
+            type="Boolean"
+            label="Show Video Description"
+            default="true"
+            description="Displays the description for the current video, when the component is present on a record detail page"
+         />
+         <property
+            name="desktopWidth"
+            type="String"
+            label=" Desktop Width"
+            default="400"
+            description="The width of the video's display area for desktop, in CSS pixels (absolute values only; no percentages.)"
+         />
+         <property
+            name="desktopHeight"
+            type="String"
+            label="Desktop Height"
+            default="300"
+            description="The height of the video's display area for desktop, in CSS pixels (absolute values only; no percentages.)"
+         />
+         <property
+            name="tabletWidth"
+            type="String"
+            label="Tablet Width"
+            default="200"
+            description="The width of the video's display area for tablets, in CSS pixels (absolute values only; no percentages.)"
+         />
+         <property
+            name="tabletHeight"
+            type="String"
+            label="Tablet Height"
+            default="150"
+            description="The height of the video's display area for tablets, in CSS pixels (absolute values only; no percentages.)"
+         />
+         <property
+            name="mobileWidth"
+            type="String"
+            label="Mobile Width"
+            default="300"
+            description="The width of the video's display area for mobile devices, in CSS pixels (absolute values only; no percentages.)"
+         />
+         <property
+            name="mobileHeight"
+            type="String"
+            label="Mobile Height"
+            default="225"
+            description="The height of the video's display area for mobile devices, in CSS pixels (absolute values only; no percentages.)"
+         />
+         <property
+            name="noVideoMessage"
+            type="String"
+            default="There are no supported videos (mp4, webm, mov, m4v) attached with this record."
+            label="No Supported Videos Message"
+            description="The message to be dispalyed to the users when no supported video is attached to the record. This message is also displayed when viewing unsupported file formats on file details page"
+         />
+         <property
+            name="errorMessage"
+            type="String"
+            default="There was an error playing the video."
+            label="Error Message"
+            description="The error message to be dispalyed to the users when there is an error playing the video."
+         />
+      </targetConfig>
+   </targetConfigs>
+</LightningComponentBundle>
\ No newline at end of file

From d82acf160136851a6220c559b00e30e52d0ebe49 Mon Sep 17 00:00:00 2001
From: James Sullivan <jsullivan@cloudanswers.com>
Date: Tue, 13 Jul 2021 17:02:43 +0200
Subject: [PATCH 2/3] add option to component to show or hide the no-videos
 error

---
 .../default/lwc/videoViewer/videoViewer.html  | 160 ++++---
 .../default/lwc/videoViewer/videoViewer.js    |   4 +
 .../lwc/videoViewer/videoViewer.js-meta.xml   | 441 +++++++++---------
 3 files changed, 315 insertions(+), 290 deletions(-)
 mode change 100755 => 100644 force-app/main/default/lwc/videoViewer/videoViewer.html
 mode change 100755 => 100644 force-app/main/default/lwc/videoViewer/videoViewer.js

diff --git a/force-app/main/default/lwc/videoViewer/videoViewer.html b/force-app/main/default/lwc/videoViewer/videoViewer.html
old mode 100755
new mode 100644
index 2d207ef..6e6468f
--- a/force-app/main/default/lwc/videoViewer/videoViewer.html
+++ b/force-app/main/default/lwc/videoViewer/videoViewer.html
@@ -1,88 +1,94 @@
 <template>
-  <lightning-card icon-name="custom:custom21" class="forceBaseCard">
-    <span
-      slot="title"
-      class="header-title-container slds-card__header slds-p-left_none slds-card__header-title slds-truncate"
-      title={computedTitle}
-      >{computedTitle}
-    </span>
-    <div class="video-container" if:false={hasNoVideos}>
-      <h3 class="slds-text-align_center slds-p-top_small">
-        <span class="slds-text-heading_medium" if:true={showVideoName}
-          >{currentVideoTitle}</span
-        >
-      </h3>
-      <div class="slds-align_absolute-center" if:false={hasError}>
-        <template if:true={hasLoadingCompleted}>
-          <video
-            controls
-            preload="auto"
-            width={width}
-            height={height}
-            src={currentVideoUrl}
-            muted={muted}
+  <template if:false={hideIfNoVideoAvailable}>
+    <lightning-card icon-name="custom:custom21" class="forceBaseCard">
+      <span
+        slot="title"
+        class="
+          header-title-container
+          slds-card__header
+          slds-p-left_none
+          slds-card__header-title
+          slds-truncate
+        "
+        title={computedTitle}
+        >{computedTitle}
+      </span>
+      <div class="video-container" if:false={hasNoVideos}>
+        <h3 class="slds-text-align_center slds-p-top_small">
+          <span class="slds-text-heading_medium" if:true={showVideoName}
+            >{currentVideoTitle}</span
           >
-            <p>
-              {errorMessage}
-            </p>
-          </video>
-        </template>
-        <template if:false={hasLoadingCompleted}>
-          <lightning-spinner
-            alternative-text="Loading Video"
-          ></lightning-spinner>
+        </h3>
+        <div class="slds-align_absolute-center" if:false={hasError}>
+          <template if:true={hasLoadingCompleted}>
+            <video
+              controls
+              preload="auto"
+              width={width}
+              height={height}
+              src={currentVideoUrl}
+              muted={muted}
+            >
+              <p>{errorMessage}</p>
+            </video>
+          </template>
+          <template if:false={hasLoadingCompleted}>
+            <lightning-spinner
+              alternative-text="Loading Video"
+            ></lightning-spinner>
+          </template>
+        </div>
+        <template if:true={hasError}>
+          <div class="slds-align_absolute-center error-message">
+            <div class="empty-state-container slds-text-align_center">
+              <img
+                src="/_slds/images/illustrations/empty-states/desertSmall.svg"
+                aria-hidden="true"
+                alt=""
+              />
+              <div class="empty-state-message slds-m-top_medium">
+                {errorMessage}
+              </div>
+            </div>
+          </div>
         </template>
+        <p
+          class="slds-text-body_regular slds-p-around_medium video-description"
+          if:true={showVideoDescription}
+        >
+          {currentVideoDescription}
+        </p>
       </div>
-      <template if:true={hasError}>
-        <div class="slds-align_absolute-center error-message">
+
+      <template if:true={hasNoVideos}>
+        <div class="slds-align_absolute-center">
           <div class="empty-state-container slds-text-align_center">
-            <img
-              src="/_slds/images/illustrations/empty-states/desertSmall.svg"
-              aria-hidden="true"
-              alt=""
-            />
-            <div class="empty-state-message slds-m-top_medium">
-              {errorMessage}
+            <img src="/img/lbpm/empty.svg" aria-hidden="true" alt="" />
+            <div class="empty-state-message slds-m-top_medium no-video-message">
+              {noVideoMessage}
             </div>
           </div>
         </div>
       </template>
-      <p
-        class="slds-text-body_regular slds-p-around_medium video-description"
-        if:true={showVideoDescription}
-      >
-        {currentVideoDescription}
+      <p slot="footer" if:true={showNavigation}>
+        <lightning-button-icon
+          icon-name="utility:chevronleft"
+          variant="border-filled"
+          alternative-text="Previous Video"
+          title="Previous"
+          disabled={previousButtonDisabled}
+          onclick={handlePreviousClick}
+        ></lightning-button-icon>
+        <lightning-button-icon
+          icon-name="utility:chevronright"
+          variant="border-filled"
+          alternative-text="Next Video"
+          class="slds-m-left_xx-small"
+          title="Next"
+          disabled={forwardButtonDisabled}
+          onclick={handleNextClick}
+        ></lightning-button-icon>
       </p>
-    </div>
-
-    <template if:true={hasNoVideos}>
-      <div class="slds-align_absolute-center">
-        <div class="empty-state-container slds-text-align_center">
-          <img src="/img/lbpm/empty.svg" aria-hidden="true" alt="" />
-          <div class="empty-state-message slds-m-top_medium no-video-message">
-            {noVideoMessage}
-          </div>
-        </div>
-      </div>
-    </template>
-    <p slot="footer" if:true={showNavigation}>
-      <lightning-button-icon
-        icon-name="utility:chevronleft"
-        variant="border-filled"
-        alternative-text="Previous Video"
-        title="Previous"
-        disabled={previousButtonDisabled}
-        onclick={handlePreviousClick}
-      ></lightning-button-icon>
-      <lightning-button-icon
-        icon-name="utility:chevronright"
-        variant="border-filled"
-        alternative-text="Next Video"
-        class="slds-m-left_xx-small"
-        title="Next"
-        disabled={forwardButtonDisabled}
-        onclick={handleNextClick}
-      ></lightning-button-icon>
-    </p>
-  </lightning-card>
+    </lightning-card>
+  </template>
 </template>
diff --git a/force-app/main/default/lwc/videoViewer/videoViewer.js b/force-app/main/default/lwc/videoViewer/videoViewer.js
old mode 100755
new mode 100644
index 70b5b97..ac8e69f
--- a/force-app/main/default/lwc/videoViewer/videoViewer.js
+++ b/force-app/main/default/lwc/videoViewer/videoViewer.js
@@ -63,6 +63,10 @@ export default class VideoViewer extends LightningElement {
   @api
   showVideoDescription;
 
+  // Hide if no video is available ?
+  @api
+  hideIfNoVideoAvailable;
+
   // Message when there is no supported video attached to the record
   @api
   noVideoMessage;
diff --git a/force-app/main/default/lwc/videoViewer/videoViewer.js-meta.xml b/force-app/main/default/lwc/videoViewer/videoViewer.js-meta.xml
index 90437d9..8add1a9 100644
--- a/force-app/main/default/lwc/videoViewer/videoViewer.js-meta.xml
+++ b/force-app/main/default/lwc/videoViewer/videoViewer.js-meta.xml
@@ -1,213 +1,228 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
-   <apiVersion>52.0</apiVersion>
-   <masterLabel>Video Viewer</masterLabel>
-   <description>View videos attached to record detail pages, chatter or file detail pages.</description>
-   <isExposed>true</isExposed>
-   <targets>
-      <target>lightning__RecordPage</target>
-      <target>lightningCommunity__Page</target>
-      <target>lightningCommunity__Default</target>
-  </targets>
-   <targetConfigs>
-      <targetConfig targets="lightning__RecordPage">
-         <property
-            name="title"
-            type="String"
-            default="Attached Videos"
-            label="Title"
-            placeholder="Enter title for the component"
-            description="Title for the component"
-         />
-         <property
-            name="muted"
-            type="Boolean"
-            label="Muted"
-            default="true"
-            description="Should the video start without sound (Recommended)"
-         />
-         <property
-            name="showVideoCountInTitle"
-            type="Boolean"
-            label="Show Supported Video Count in Title"
-            default="true"
-            description="Displays a count of the number of available videos attached to the record when used on a record detail page"
-         />
-         <property
-            name="showVideoName"
-            type="Boolean"
-            label="Show Video Title"
-            default="true"
-            description="Displays the title of the current video, when the component is present on a record detail page"
-         />
-         <property
-            name="showVideoDescription"
-            type="Boolean"
-            label="Show Video Description"
-            default="true"
-            description="Displays the description for the current video, when the component is present on a record detail page"
-         />
-         <property
-            name="desktopWidth"
-            type="String"
-            label=" Desktop Width"
-            default="400"
-            description="The width of the video's display area for desktop, in CSS pixels (absolute values only; no percentages.)"
-         />
-         <property
-            name="desktopHeight"
-            type="String"
-            label="Desktop Height"
-            default="300"
-            description="The height of the video's display area for desktop, in CSS pixels (absolute values only; no percentages.)"
-         />
-         <property
-            name="tabletWidth"
-            type="String"
-            label="Tablet Width"
-            default="200"
-            description="The width of the video's display area for tablets, in CSS pixels (absolute values only; no percentages.)"
-         />
-         <property
-            name="tabletHeight"
-            type="String"
-            label="Tablet Height"
-            default="150"
-            description="The height of the video's display area for tablets, in CSS pixels (absolute values only; no percentages.)"
-         />
-         <property
-            name="mobileWidth"
-            type="String"
-            label="Mobile Width"
-            default="300"
-            description="The width of the video's display area for mobile devices, in CSS pixels (absolute values only; no percentages.)"
-         />
-         <property
-            name="mobileHeight"
-            type="String"
-            label="Mobile Height"
-            default="225"
-            description="The height of the video's display area for mobile devices, in CSS pixels (absolute values only; no percentages.)"
-         />
-         <property
-            name="noVideoMessage"
-            type="String"
-            default="There are no supported videos (mp4, webm, mov, m4v) attached with this record."
-            label="No Supported Videos Message"
-            description="The message to be dispalyed to the users when no supported video is attached to the record. This message is also displayed when viewing unsupported file formats on file details page"
-         />
-         <property
-            name="errorMessage"
-            type="String"
-            default="There was an error playing the video."
-            label="Error Message"
-            description="The error message to be dispalyed to the users when there is an error playing the video."
-         />
-         <supportedFormFactors>
-            <supportedFormFactor type="Large" />
-            <supportedFormFactor type="Small" />
-        </supportedFormFactors>
-      </targetConfig>
-      <targetConfig targets="lightningCommunity__Default">
-         <property
-            name="recordId"
-            type="String"
-            label="Record ID"
-            description="Automatically bind the page's record id to the component variable"
-            default="{!recordId}"
-         />
-         <property
-            name="title"
-            type="String"
-            default="Attached Videos"
-            label="Title"
-            placeholder="Enter title for the component"
-            description="Title for the component"
-         />
-         <property
-            name="muted"
-            type="Boolean"
-            label="Muted"
-            default="true"
-            description="Should the video start without sound (Recommended)"
-         />
-         <property
-            name="showVideoCountInTitle"
-            type="Boolean"
-            label="Show Supported Video Count in Title"
-            default="true"
-            description="Displays a count of the number of available videos attached to the record when used on a record detail page"
-         />
-         <property
-            name="showVideoName"
-            type="Boolean"
-            label="Show Video Title"
-            default="true"
-            description="Displays the title of the current video, when the component is present on a record detail page"
-         />
-         <property
-            name="showVideoDescription"
-            type="Boolean"
-            label="Show Video Description"
-            default="true"
-            description="Displays the description for the current video, when the component is present on a record detail page"
-         />
-         <property
-            name="desktopWidth"
-            type="String"
-            label=" Desktop Width"
-            default="400"
-            description="The width of the video's display area for desktop, in CSS pixels (absolute values only; no percentages.)"
-         />
-         <property
-            name="desktopHeight"
-            type="String"
-            label="Desktop Height"
-            default="300"
-            description="The height of the video's display area for desktop, in CSS pixels (absolute values only; no percentages.)"
-         />
-         <property
-            name="tabletWidth"
-            type="String"
-            label="Tablet Width"
-            default="200"
-            description="The width of the video's display area for tablets, in CSS pixels (absolute values only; no percentages.)"
-         />
-         <property
-            name="tabletHeight"
-            type="String"
-            label="Tablet Height"
-            default="150"
-            description="The height of the video's display area for tablets, in CSS pixels (absolute values only; no percentages.)"
-         />
-         <property
-            name="mobileWidth"
-            type="String"
-            label="Mobile Width"
-            default="300"
-            description="The width of the video's display area for mobile devices, in CSS pixels (absolute values only; no percentages.)"
-         />
-         <property
-            name="mobileHeight"
-            type="String"
-            label="Mobile Height"
-            default="225"
-            description="The height of the video's display area for mobile devices, in CSS pixels (absolute values only; no percentages.)"
-         />
-         <property
-            name="noVideoMessage"
-            type="String"
-            default="There are no supported videos (mp4, webm, mov, m4v) attached with this record."
-            label="No Supported Videos Message"
-            description="The message to be dispalyed to the users when no supported video is attached to the record. This message is also displayed when viewing unsupported file formats on file details page"
-         />
-         <property
-            name="errorMessage"
-            type="String"
-            default="There was an error playing the video."
-            label="Error Message"
-            description="The error message to be dispalyed to the users when there is an error playing the video."
-         />
-      </targetConfig>
-   </targetConfigs>
-</LightningComponentBundle>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" ?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+   <apiVersion>52.0</apiVersion>
+   <masterLabel>Video Viewer</masterLabel>
+   <description
+  >View videos attached to record detail pages, chatter or file detail pages.</description>
+   <isExposed>true</isExposed>
+   <targets>
+      <target>lightning__RecordPage</target>
+      <target>lightningCommunity__Page</target>
+      <target>lightningCommunity__Default</target>
+  </targets>
+   <targetConfigs>
+      <targetConfig targets="lightning__RecordPage">
+         <property
+        name="title"
+        type="String"
+        default="Attached Videos"
+        label="Title"
+        placeholder="Enter title for the component"
+        description="Title for the component"
+      />
+         <property
+        name="muted"
+        type="Boolean"
+        label="Muted"
+        default="true"
+        description="Should the video start without sound (Recommended)"
+      />
+      <property
+        name="hideIfNoVideoAvailable"
+        type="Boolean"
+        label="Hide Component If No Video Available"
+        default="true"
+        description="Hide video Viewer component if no video is available"
+      />
+         <property
+        name="showVideoCountInTitle"
+        type="Boolean"
+        label="Show Supported Video Count in Title"
+        default="true"
+        description="Displays a count of the number of available videos attached to the record when used on a record detail page"
+      />
+         <property
+        name="showVideoName"
+        type="Boolean"
+        label="Show Video Title"
+        default="true"
+        description="Displays the title of the current video, when the component is present on a record detail page"
+      />
+         <property
+        name="showVideoDescription"
+        type="Boolean"
+        label="Show Video Description"
+        default="true"
+        description="Displays the description for the current video, when the component is present on a record detail page"
+      />
+         <property
+        name="desktopWidth"
+        type="String"
+        label=" Desktop Width"
+        default="400"
+        description="The width of the video's display area for desktop, in CSS pixels (absolute values only; no percentages.)"
+      />
+         <property
+        name="desktopHeight"
+        type="String"
+        label="Desktop Height"
+        default="300"
+        description="The height of the video's display area for desktop, in CSS pixels (absolute values only; no percentages.)"
+      />
+         <property
+        name="tabletWidth"
+        type="String"
+        label="Tablet Width"
+        default="200"
+        description="The width of the video's display area for tablets, in CSS pixels (absolute values only; no percentages.)"
+      />
+         <property
+        name="tabletHeight"
+        type="String"
+        label="Tablet Height"
+        default="150"
+        description="The height of the video's display area for tablets, in CSS pixels (absolute values only; no percentages.)"
+      />
+         <property
+        name="mobileWidth"
+        type="String"
+        label="Mobile Width"
+        default="300"
+        description="The width of the video's display area for mobile devices, in CSS pixels (absolute values only; no percentages.)"
+      />
+         <property
+        name="mobileHeight"
+        type="String"
+        label="Mobile Height"
+        default="225"
+        description="The height of the video's display area for mobile devices, in CSS pixels (absolute values only; no percentages.)"
+      />
+         <property
+        name="noVideoMessage"
+        type="String"
+        default="There are no supported videos (mp4, webm, mov, m4v) attached with this record."
+        label="No Supported Videos Message"
+        description="The message to be dispalyed to the users when no supported video is attached to the record. This message is also displayed when viewing unsupported file formats on file details page"
+      />
+         <property
+        name="errorMessage"
+        type="String"
+        default="There was an error playing the video."
+        label="Error Message"
+        description="The error message to be dispalyed to the users when there is an error playing the video."
+      />
+         <supportedFormFactors>
+            <supportedFormFactor type="Large" />
+            <supportedFormFactor type="Small" />
+        </supportedFormFactors>
+      </targetConfig>
+      <targetConfig targets="lightningCommunity__Default">
+         <property
+        name="recordId"
+        type="String"
+        label="Record ID"
+        description="Automatically bind the page's record id to the component variable"
+        default="{!recordId}"
+      />
+         <property
+        name="title"
+        type="String"
+        default="Attached Videos"
+        label="Title"
+        placeholder="Enter title for the component"
+        description="Title for the component"
+      />
+         <property
+        name="muted"
+        type="Boolean"
+        label="Muted"
+        default="true"
+        description="Should the video start without sound (Recommended)"
+      />
+      <property
+        name="hideIfNoVideoAvailable"
+        type="Boolean"
+        label="Hide If No Video Available"
+        default="true"
+        description="Hide if no video is available"
+      />
+         <property
+        name="showVideoCountInTitle"
+        type="Boolean"
+        label="Show Supported Video Count in Title"
+        default="true"
+        description="Displays a count of the number of available videos attached to the record when used on a record detail page"
+      />
+         <property
+        name="showVideoName"
+        type="Boolean"
+        label="Show Video Title"
+        default="true"
+        description="Displays the title of the current video, when the component is present on a record detail page"
+      />
+         <property
+        name="showVideoDescription"
+        type="Boolean"
+        label="Show Video Description"
+        default="true"
+        description="Displays the description for the current video, when the component is present on a record detail page"
+      />
+         <property
+        name="desktopWidth"
+        type="String"
+        label=" Desktop Width"
+        default="400"
+        description="The width of the video's display area for desktop, in CSS pixels (absolute values only; no percentages.)"
+      />
+         <property
+        name="desktopHeight"
+        type="String"
+        label="Desktop Height"
+        default="300"
+        description="The height of the video's display area for desktop, in CSS pixels (absolute values only; no percentages.)"
+      />
+         <property
+        name="tabletWidth"
+        type="String"
+        label="Tablet Width"
+        default="200"
+        description="The width of the video's display area for tablets, in CSS pixels (absolute values only; no percentages.)"
+      />
+         <property
+        name="tabletHeight"
+        type="String"
+        label="Tablet Height"
+        default="150"
+        description="The height of the video's display area for tablets, in CSS pixels (absolute values only; no percentages.)"
+      />
+         <property
+        name="mobileWidth"
+        type="String"
+        label="Mobile Width"
+        default="300"
+        description="The width of the video's display area for mobile devices, in CSS pixels (absolute values only; no percentages.)"
+      />
+         <property
+        name="mobileHeight"
+        type="String"
+        label="Mobile Height"
+        default="225"
+        description="The height of the video's display area for mobile devices, in CSS pixels (absolute values only; no percentages.)"
+      />
+         <property
+        name="noVideoMessage"
+        type="String"
+        default="There are no supported videos (mp4, webm, mov, m4v) attached with this record."
+        label="No Supported Videos Message"
+        description="The message to be dispalyed to the users when no supported video is attached to the record. This message is also displayed when viewing unsupported file formats on file details page"
+      />
+         <property
+        name="errorMessage"
+        type="String"
+        default="There was an error playing the video."
+        label="Error Message"
+        description="The error message to be dispalyed to the users when there is an error playing the video."
+      />
+      </targetConfig>
+   </targetConfigs>
+</LightningComponentBundle>

From 0cb1397753b18fbfcdedb1c1c6dc038f45474ab9 Mon Sep 17 00:00:00 2001
From: James Sullivan <jsullivan@cloudanswers.com>
Date: Tue, 27 Jul 2021 18:13:14 +0200
Subject: [PATCH 3/3] fix incorrect variable, use reactive property tracking

---
 force-app/main/default/lwc/videoViewer/videoViewer.html | 2 +-
 force-app/main/default/lwc/videoViewer/videoViewer.js   | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/force-app/main/default/lwc/videoViewer/videoViewer.html b/force-app/main/default/lwc/videoViewer/videoViewer.html
index 6e6468f..ecccfbd 100644
--- a/force-app/main/default/lwc/videoViewer/videoViewer.html
+++ b/force-app/main/default/lwc/videoViewer/videoViewer.html
@@ -1,5 +1,5 @@
 <template>
-  <template if:false={hideIfNoVideoAvailable}>
+  <template if:true={computedShowComponent}>
     <lightning-card icon-name="custom:custom21" class="forceBaseCard">
       <span
         slot="title"
diff --git a/force-app/main/default/lwc/videoViewer/videoViewer.js b/force-app/main/default/lwc/videoViewer/videoViewer.js
index ac8e69f..f5801f3 100644
--- a/force-app/main/default/lwc/videoViewer/videoViewer.js
+++ b/force-app/main/default/lwc/videoViewer/videoViewer.js
@@ -5,7 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-import { LightningElement, api, wire } from "lwc";
+import { LightningElement, api, wire, track } from "lwc";
 import getAttachedDocuments from "@salesforce/apex/VideoViewerController.getAttachedDocuments";
 import getBaseUrl from "@salesforce/apex/VideoViewerController.getBaseUrl";
 import CONTENTDOCUMENT_OBJECT from "@salesforce/schema/ContentDocument";
@@ -87,6 +87,7 @@ export default class VideoViewer extends LightningElement {
   videoMap = {};
 
   // private variable to keep count of the video the user is on
+  @track
   _currentVideoCount = 0;
 
   // Title for the current video
@@ -96,6 +97,7 @@ export default class VideoViewer extends LightningElement {
   currentVideoDescription;
 
   // Total number of videos
+  @track
   totalVideos = 0;
 
   // Flag to enable/disable navigation's forward button
@@ -182,6 +184,10 @@ export default class VideoViewer extends LightningElement {
     this._currentVideoCount = count;
   }
 
+  get computedShowComponent() {
+    return this.totalVideos > 0 || !this.hideIfNoVideoAvailable;
+  }
+
   // Event handler for previous button click
   handlePreviousClick() {
     if (this.currentVideoCount > 0) {