Enable image viewer for public viewing page

Conditionally render the image viewer only if an image exists for the selected object.
utlib · May 15, 2021 · 56a3360 · 56a3360
1 parent 2c9da68
commit 56a3360
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 9 deletions.
diff --git a/viscoll-app/src/components/collationManager/ViewingMode.js b/viscoll-app/src/components/collationManager/ViewingMode.js
@@ -129,13 +129,17 @@ export default class ViewingMode extends React.Component {
     isVersoDIY = verso!==undefined && verso.image.manifestID!==undefined && verso.image.manifestID.includes("DIY");
     rectoURL = recto!==undefined && recto.image.url!==undefined? recto.image.url : null;
     versoURL = verso!==undefined && verso.image.url!==undefined? verso.image.url : null;
+
+    // conditionally render image viewer only if an Image exists for the selected object
+    const hasImage = isRectoDIY || isVersoDIY || rectoURL || versoURL
+
     return (
     <div className="viewingMode">
-      <div style={this.props.imageViewerEnabled?{width: "40%"}:{}}>
+        <div style={this.props.imageViewerEnabled && hasImage ? { width: "40%" } : {}}>
 
         <canvas id="myCanvas" {...canvasAttr}></canvas>
       </div>
-      {this.props.imageViewerEnabled?
+      {this.props.imageViewerEnabled && hasImage?
         <ImageViewer isRectoDIY={isRectoDIY} isVersoDIY={isVersoDIY} rectoURL={rectoURL} versoURL={versoURL} fixed={true} />
         :""
       }

diff --git a/viscoll-app/src/components/infoBox/LeafInfoBox.js b/viscoll-app/src/components/infoBox/LeafInfoBox.js
@@ -437,7 +437,7 @@ export default class LeafInfoBox extends React.Component {
 
     let imageModalContent;
     let imageThumbnails = [];
-    if (this.props.viewMode!=="VIEWING") {
+    // if (this.props.viewMode!=="VIEWING") {
       // Show the side image if available
       if (this.props.selectedLeaves.length===1) {
         const leaf = this.props.Leafs[this.props.selectedLeaves[0]]
@@ -497,7 +497,7 @@ export default class LeafInfoBox extends React.Component {
           )
         }
       }
-    }
+    // }
 
     const notes = this.renderNotes();
     return (

diff --git a/viscoll-app/src/components/infoBox/SideInfoBox.js b/viscoll-app/src/components/infoBox/SideInfoBox.js
@@ -424,10 +424,11 @@ export default class SideInfoBox extends React.Component {
 
     let imageModalContent;
     let imageThumbnail = [];
-    if (this.props.viewMode!=="VIEWING") {
+    // if (this.props.viewMode!=="VIEWING") {
       // Show the side image if available
       if (this.props.selectedSides.length===1){
         const side = this.props.Sides[this.props.selectedSides[0]];
+
         // replace imageModalContent view OSD component
         const rectoURL = side.memberType==="Recto" ? side.image.url : null;
         const versoURL = side.memberType==="Verso" ? side.image.url : null;
@@ -454,7 +455,7 @@ export default class SideInfoBox extends React.Component {
           )
         }
       }
-    }
+    // }
 
     return (
       <div className="inner">

diff --git a/viscoll-app/src/containers/CollationManagerViewOnly.js b/viscoll-app/src/containers/CollationManagerViewOnly.js
@@ -89,10 +89,29 @@ class CollationManagerViewOnly extends Component {
       containerStyle["width"] = "30%";
     }
 
+    // conditionally render image viewer only if an Image exists for the selected object
+    let leafID, leaf, recto, verso, isRectoDIY, isVersoDIY, rectoURL, versoURL;
+    if (this.props.selectedObjects.type === "Leaf") {
+      leafID = this.props.selectedObjects.members[0];
+      leaf = this.props.project.Leafs[leafID];
+      recto = this.props.project.Rectos[leaf.rectoID];
+      verso = this.props.project.Versos[leaf.versoID];
+    } else if (this.props.selectedObjects.type === "Recto") {
+      recto = this.props.project.Rectos[this.props.selectedObjects.members[0]];
+    } else if (this.props.selectedObjects.type === "Verso") {
+      verso = this.props.project.Versos[this.props.selectedObjects.members[0]];
+    }
+    isRectoDIY = recto !== undefined && recto.image.manifestID !== undefined && recto.image.manifestID.includes("DIY");
+    isVersoDIY = verso !== undefined && verso.image.manifestID !== undefined && verso.image.manifestID.includes("DIY");
+    rectoURL = recto !== undefined && recto.image.url !== undefined ? recto.image.url : null;
+    versoURL = verso !== undefined && verso.image.url !== undefined ? verso.image.url : null;
+
+    const hasImage = isRectoDIY || isVersoDIY || rectoURL || versoURL
+
     const infobox = (
       <div
         className="infoBox"
-        style={{ ...this.state.contentStyle, ...this.state.infoBoxStyle, right: "8%"}}
+        style={{ ...this.state.contentStyle, ...this.state.infoBoxStyle, right: hasImage ? 0 : "8%"}}
       >
         <InfoBox
           type={this.props.selectedObjects.type}
@@ -116,14 +135,14 @@ class CollationManagerViewOnly extends Component {
     if (this.props.project.groupIDs.length > 0) {
       workspace = (
         <div role="main">
-          <div className="projectWorkspace" style={{ ...this.state.contentStyle, left: "8%", width: "inherit" }}>
+          <div className="projectWorkspace" style={{ ...this.state.contentStyle, left: hasImage ? 0 : '8%', width: "inherit" }}>
             <h1>{this.props.project.title}</h1>
             <ViewingMode
               project={this.props.project}
               collationManager={this.props.collationManager}
               handleObjectClick={this.handleObjectClick}
               selectedObjects={this.props.selectedObjects}
-              imageViewerEnabled={false}
+              imageViewerEnabled={hasImage}
             />
           </div>
           {infobox}