change encrypted repo rotate image (#6969)

frontend/src/components/dialog/image-dialog.js

@@ -12,6 +12,7 @@ const propTypes = {
   moveToNextImage: PropTypes.func.isRequired,
   onDeleteImage: PropTypes.func,
   onRotateImage: PropTypes.func,
+  enableRotate: PropTypes.bool,
 };
 
 class ImageDialog extends React.Component {
@@ -32,6 +33,12 @@ class ImageDialog extends React.Component {
     const mainImg = imageItems[imageIndex];
     const nextImg = imageItems[(imageIndex + 1) % imageItemsLength];
     const prevImg = imageItems[(imageIndex + imageItemsLength - 1) % imageItemsLength];
+    // The backend server does not support rotating HEIC images
+    let enableRotate = this.props.enableRotate;
+    const suffix = mainImg.src.slice(mainImg.src.lastIndexOf('.') + 1, mainImg.src.lastIndexOf('?')).toLowerCase();
+    if (suffix === 'heic') {
+      enableRotate = false;
+    }
     return (
       <Lightbox
         wrapperClassName='custom-image-previewer'
@@ -49,12 +56,12 @@ class ImageDialog extends React.Component {
         closeLabel={gettext('Close (Esc)')}
         zoomInLabel={gettext('Zoom in')}
         zoomOutLabel={gettext('Zoom out')}
-        enableRotate={true}
+        enableRotate={enableRotate}
         onClickDownload={() => this.downloadImage(imageItems[imageIndex].downloadURL)}
         onClickDelete={onDeleteImage ? () => onDeleteImage(name) : null}
         onViewOriginal={this.onViewOriginal}
         viewOriginalImageLabel={gettext('View original image')}
-        onRotateImage={onRotateImage ? (angle) => onRotateImage(imageIndex, angle) : null}
+        onRotateImage={(onRotateImage && enableRotate) ? (angle) => onRotateImage(imageIndex, angle) : null}
       />
     );
   }
@@ -62,4 +69,8 @@ class ImageDialog extends React.Component {
 
 ImageDialog.propTypes = propTypes;
 
+ImageDialog.defaultProps = {
+  enableRotate: true,
+};
+
 export default ImageDialog;

frontend/src/components/dir-view-mode/dir-column-nav.js

@@ -420,6 +420,7 @@ class DirColumnNav extends React.Component {
   render() {
     let flex = this.props.navRate ? '0 0 ' + this.props.navRate * 100 + '%' : '0 0 25%';
     const select = this.props.inResizing ? 'none' : '';
+    const repoEncrypted = this.props.currentRepoInfo.encrypted;
     return (
       <Fragment>
         <div className="dir-content-nav" role="navigation" style={{ flex: (flex), userSelect: select }} onScroll={this.stopTreeScrollPropagation}>
@@ -462,7 +463,7 @@ class DirColumnNav extends React.Component {
               repoID={this.props.repoID}
               dirent={this.state.opNode.object}
               onItemCopy={this.props.onItemCopy}
-              repoEncrypted={this.props.currentRepoInfo.encrypted}
+              repoEncrypted={repoEncrypted}
               onCancelCopy={this.onCopyToggle}
               isMultipleOperation={this.state.isMultipleOperation}
             />
@@ -475,7 +476,7 @@ class DirColumnNav extends React.Component {
               repoID={this.props.repoID}
               dirent={this.state.opNode.object}
               onItemMove={this.props.onItemMove}
-              repoEncrypted={this.props.currentRepoInfo.encrypted}
+              repoEncrypted={repoEncrypted}
               onCancelMove={this.onMoveToggle}
               isMultipleOperation={this.state.isMultipleOperation}
             />
@@ -491,6 +492,7 @@ class DirColumnNav extends React.Component {
               moveToNextImage={this.moveToNextImage}
               onDeleteImage={this.deleteImage}
               onRotateImage={this.rotateImage}
+              enableRotate={!repoEncrypted}
             />
           </ModalPortal>
         )}

frontend/src/components/dirent-grid-view/dirent-grid-view.js

@@ -833,6 +833,7 @@ class DirentGridView extends React.Component {
     if (this.props.isDirentListLoading) {
       return (<Loading />);
     }
+    const repoEncrypted = this.props.currentRepoInfo.encrypted;
 
     return (
       <Fragment>
@@ -861,7 +862,7 @@ class DirentGridView extends React.Component {
                   onGridItemMouseDown={this.onGridItemMouseDown}
                   onGridItemClick={this.onGridItemClick}
                   selectedDirentList={selectedDirentList}
-                  repoEncrypted={this.props.currentRepoInfo.encrypted}
+                  repoEncrypted={repoEncrypted}
                 />
               );
             })}
@@ -919,7 +920,7 @@ class DirentGridView extends React.Component {
           <MoveDirentDialog
             path={this.props.path}
             repoID={this.props.repoID}
-            repoEncrypted={this.props.currentRepoInfo.encrypted}
+            repoEncrypted={repoEncrypted}
             isMultipleOperation={this.state.isMultipleOperation}
             selectedDirentList={selectedDirentList}
             onItemMove={this.props.onItemMove}
@@ -942,7 +943,7 @@ class DirentGridView extends React.Component {
           <CopyDirentDialog
             path={this.props.path}
             repoID={this.props.repoID}
-            repoEncrypted={this.props.currentRepoInfo.encrypted}
+            repoEncrypted={repoEncrypted}
             isMultipleOperation={this.state.isMultipleOperation}
             selectedDirentList={selectedDirentList}
             onItemsCopy={this.props.onItemsCopy}
@@ -1005,6 +1006,7 @@ class DirentGridView extends React.Component {
               moveToNextImage={this.moveToNextImage}
               onDeleteImage={this.deleteImage}
               onRotateImage={this.rotateImage}
+              enableRotate={!repoEncrypted}
             />
           </ModalPortal>
         )}

frontend/src/components/dirent-list-view/dirent-list-view.js

@@ -684,6 +684,7 @@ class DirentListView extends React.Component {
     const sortIcon = sortOrder == 'asc' ? <span className="sf3-font sf3-font-down rotate-180 d-inline-block"></span> : <span className="sf3-font sf3-font-down"></span>;
 
     const isDesktop = Utils.isDesktop();
+    const repoEncrypted = this.props.currentRepoInfo.encrypted;
 
     return (
       <div
@@ -816,6 +817,7 @@ class DirentListView extends React.Component {
                 moveToNextImage={this.moveToNextImage}
                 onDeleteImage={this.deleteImage}
                 onRotateImage={this.rotateImage}
+                enableRotate={!repoEncrypted}
               />
             </ModalPortal>
           )}
@@ -844,7 +846,7 @@ class DirentListView extends React.Component {
             <MoveDirentDialog
               path={this.props.path}
               repoID={this.props.repoID}
-              repoEncrypted={this.props.currentRepoInfo.encrypted}
+              repoEncrypted={repoEncrypted}
               isMultipleOperation={this.state.isMultipleOperation}
               selectedDirentList={this.props.selectedDirentList}
               onItemsMove={this.props.onItemsMove}
@@ -855,7 +857,7 @@ class DirentListView extends React.Component {
             <CopyDirentDialog
               path={this.props.path}
               repoID={this.props.repoID}
-              repoEncrypted={this.props.currentRepoInfo.encrypted}
+              repoEncrypted={repoEncrypted}
               selectedDirentList={this.props.selectedDirentList}
               isMultipleOperation={this.state.isMultipleOperation}
               onItemsCopy={this.props.onItemsCopy}

frontend/src/shared-dir-view.js

@@ -575,6 +575,7 @@ class SharedDirView extends React.Component {
             closeImagePopup={this.closeImagePopup}
             moveToPrevImage={this.moveToPrevImage}
             moveToNextImage={this.moveToNextImage}
+            enableRotate={false}
           />
         </ModalPortal>
         }