Merge pull request #6924 from topcoder-platform/PROD-4251

PROD-4251 -> develop
topcoder-platform · Oct 17, 2023 · 8056220 · 8056220
2 parents 3a9a745 + eed2118
commit 8056220
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 11 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -358,7 +358,7 @@ workflows:
           filters:
             branches:
               only:
-                - free
+                - PROD-4251
       # This is alternate dev env for parallel testing
       - "build-qa":
           context : org-global

diff --git a/src/shared/components/GUIKit/PhotoVideoItem/index.jsx b/src/shared/components/GUIKit/PhotoVideoItem/index.jsx
@@ -98,7 +98,13 @@ function PhotoVideoItem({
       })}
       type="button"
     >
-      {imageUrl ? (<img styleName="img-container" src={imageUrl} alt="" />) : null}
+      {imageUrl && !isThisVideo ? (<img styleName="img-container" src={imageUrl} alt="" />) : null}
+      {isThisVideo && (
+        <video styleName="video-container">
+          <source src={imageUrl} />
+          <track kind="captions" />
+        </video>
+      )}
       {isThisVideo ? (<BtnPlay styleName="btn-play" width="25" height="25" />) : null}
     </button>
   );

diff --git a/src/shared/components/GUIKit/PhotoVideoItem/styles.scss b/src/shared/components/GUIKit/PhotoVideoItem/styles.scss
@@ -23,6 +23,10 @@
   object-fit: cover;
 }
 
+.video-container {
+  max-width: 100%;
+}
+
 .btn-play {
   position: absolute;
   top: calc(50% - 12px);

diff --git a/src/shared/containers/timeline-wall/modal-photo-viewer/index.jsx b/src/shared/containers/timeline-wall/modal-photo-viewer/index.jsx
@@ -72,8 +72,8 @@ function ModalPhotoViewer({ onClose, selectedPhoto, photos }) {
               selected: photo.id === localSelectedPhoto,
             })}
             url={photo.previewUrl || photo.url}
-            videoThumnailUrl={photo.videoThumnailUrl}
-            isUrlPhoto={!photo.videoThumnailUrl}
+            videoThumnailUrl={photo.previewUrl || photo.url}
+            isUrlPhoto={!photo.isVideo}
             onClick={() => setLocalSelectedPhoto(photo.id)}
             key={uuidv4()}
           />

diff --git a/src/shared/containers/timeline-wall/pending-approvals/approval-item/index.jsx b/src/shared/containers/timeline-wall/pending-approvals/approval-item/index.jsx
@@ -74,8 +74,8 @@ function ApprovalItem({
               key={photo.id}
               styleName="photo-item"
               url={photo.previewUrl || photo.url}
-              videoThumnailUrl={photo.videoThumnailUrl}
-              isUrlPhoto={!photo.videoThumnailUrl}
+              videoThumnailUrl={photo.previewUrl || photo.url}
+              isUrlPhoto={!photo.isVideo}
               onClick={() => {
                 setShowModalPhoto(true);
                 setSelectedPhoto(photo.id);

diff --git a/src/shared/containers/timeline-wall/photo-items-mobile/index.jsx b/src/shared/containers/timeline-wall/photo-items-mobile/index.jsx
@@ -33,10 +33,13 @@ function PhotoItemsMobile({ photos, className }) {
         role="button"
         tabIndex={0}
       >
-        {selectedPhotoObject && !selectedPhotoObject.videoThumnailUrl ? (<img src={selectedPhotoObject.previewUrl || selectedPhotoObject.url} alt="main" />) : null}
-        {selectedPhotoObject && !!selectedPhotoObject.videoThumnailUrl ? (
+        {selectedPhotoObject && !selectedPhotoObject.isVideo ? (<img src={selectedPhotoObject.previewUrl || selectedPhotoObject.url} alt="main" />) : null}
+        {selectedPhotoObject && selectedPhotoObject.isVideo ? (
           <React.Fragment>
-            <img src={selectedPhotoObject.videoThumnailUrl} alt="main" />
+            <video styleName="video-container">
+              <source src={selectedPhotoObject.url} />
+              <track kind="captions" />
+            </video>
             <BtnPlay styleName="img-play" />
           </React.Fragment>
         ) : null}

diff --git a/src/shared/containers/timeline-wall/photo-items-mobile/styles.scss b/src/shared/containers/timeline-wall/photo-items-mobile/styles.scss
@@ -25,6 +25,10 @@
     top: calc(50% - 25px);
   }
 
+  .video-container {
+    max-width: 100%;
+  }
+
   .btn-left,
   .btn-right {
     position: absolute;

diff --git a/src/shared/containers/timeline-wall/timeline-events/events/event-item/index.jsx b/src/shared/containers/timeline-wall/timeline-events/events/event-item/index.jsx
@@ -69,8 +69,8 @@ function EventItem({
               <PhotoVideoItem
                 styleName="photo-item hide-mobile"
                 url={photo.previewUrl || photo.url}
-                videoThumnailUrl={photo.videoThumnailUrl}
-                isUrlPhoto={!photo.videoThumnailUrl}
+                videoThumnailUrl={photo.url}
+                isUrlPhoto={!photo.isVideo}
                 key={photo.id}
                 onClick={() => {
                   setShowModalPhoto(true);