[B] Ensure video/audio stop playing on dialog close and slide change

Author: 1aurend

client/src/frontend/components/resource-list/SlideShow/index.js

@@ -196,6 +196,7 @@ class ResourceSlideshow extends PureComponent {
           resource={slide}
           aspectRatio="16 / 9"
           loading={!this.isLoaded(index)}
+          active={index === position - 1}
         />
       </Styled.Slide>
     ));

client/src/frontend/components/resource/media/Factory.js

@@ -9,7 +9,8 @@ function ResourceMediaFactory({
   loading = false,
   aspectRatio,
   roundedCorners,
-  enableZoom: enableZoomProp = false
+  enableZoom: enableZoomProp = false,
+  active
 }) {
   if (loading)
     return (
@@ -33,7 +34,11 @@ function ResourceMediaFactory({
   return (
     <Styled.Wrapper $aspectRatio={aspectRatio} $roundedCorners={roundedCorners}>
       {enableZoom && <Zoom resource={resource} />}
-      <KindComponent resource={resource} fixedAspectRatio={!!aspectRatio} />
+      <KindComponent
+        resource={resource}
+        fixedAspectRatio={!!aspectRatio}
+        active={active}
+      />
     </Styled.Wrapper>
   );
 }
@@ -45,7 +50,8 @@ ResourceMediaFactory.propTypes = {
   loading: PropTypes.bool,
   aspectRatio: PropTypes.string,
   roundedCorners: PropTypes.bool,
-  enableZoom: PropTypes.bool
+  enableZoom: PropTypes.bool,
+  active: PropTypes.bool
 };
 
 export default ResourceMediaFactory;

client/src/frontend/components/resource/media/kinds/Audio/index.js

@@ -11,7 +11,7 @@ function urlToRelativePath(url) {
   return trackUrl.pathname;
 }
 
-function ResourcePlayerAudio({ resource }) {
+function ResourcePlayerAudio({ resource, active = true }) {
   const {
     attachmentStyles,
     title,
@@ -22,7 +22,7 @@ function ResourcePlayerAudio({ resource }) {
 
   const src = attachmentStyles.original;
 
-  if (!src) return null;
+  if (!src || !active) return null;
 
   const tracks =
     resource.relationships?.textTracks

client/src/frontend/components/resource/media/kinds/Video/ExternalVideo/index.js

@@ -22,10 +22,10 @@ function getSrc(resource) {
   }
 }
 
-export default function ExternalVideo({ resource }) {
+export default function ExternalVideo({ resource, active = true }) {
   const src = getSrc(resource);
 
-  if (!src) return null;
+  if (!src || !active) return null;
 
   const { title, externalType } = resource.attributes;
 

client/src/frontend/components/resource/media/kinds/Video/InternalVideo/index.js

@@ -8,7 +8,7 @@ function urlToRelativePath(url) {
   return trackUrl.pathname;
 }
 
-function ResourceMediaVideoInternal({ resource }) {
+function ResourceMediaVideoInternal({ resource, active = true }) {
   const {
     variantPosterStyles,
     variantThumbnailStyles,
@@ -19,7 +19,7 @@ function ResourceMediaVideoInternal({ resource }) {
 
   const src = attachmentStyles.original;
 
-  if (!src) return null;
+  if (!src || !active) return null;
 
   const poster =
     variantPosterStyles.mediumLandscape ??

client/src/frontend/components/resource/media/kinds/Video/index.js

@@ -2,13 +2,13 @@ import PropTypes from "prop-types";
 import ExternalVideo from "./ExternalVideo";
 import InternalVideo from "./InternalVideo";
 
-function ResourceMediaVideo({ resource }) {
+function ResourceMediaVideo({ resource, active }) {
   const VideoComponent =
     resource.attributes.subKind === "external_video"
       ? ExternalVideo
       : InternalVideo;
 
-  return <VideoComponent resource={resource} />;
+  return <VideoComponent resource={resource} active={active} />;
 }
 
 ResourceMediaVideo.displayName = "Resource.Media.Video";

client/src/reader/components/resource-annotation/Dialog/index.js

@@ -7,6 +7,7 @@ export default function ResourceAnnotationDialog({
   resource,
   textId,
   destroyAnnotation,
+  open,
   ...dialog
 }) {
   const resourceEntity = useFromStore({
@@ -30,8 +31,8 @@ export default function ResourceAnnotationDialog({
     );
 
   return (
-    <Dialog title={resourceEntity?.attributes.title} {...dialog}>
-      {resourceEntity ? renderPreview : null}
+    <Dialog title={resourceEntity?.attributes.title} open={open} {...dialog}>
+      {open && renderPreview}
     </Dialog>
   );
 }