UT-206: Adding soft-delete of thumbnails

.gitignore

@@ -56,3 +56,4 @@ ehthumbs.db
 # Windows shortcuts #
 #####################
 *.lnk
+/storage/hiddenFiles.json

src/client/components/App.tsx

@@ -2,15 +2,16 @@ import React from 'react'
 import { Tabs } from 'rmc-tabs'
 import { reduxStore, reduxState } from '../../model/reducers/store'
 import { useSelector } from 'react-redux'
+import { setActiveTab } from '../../model/reducers/appNavAction'
 
 // Components:
 import { Thumbnail } from './Thumbnail'
+import { RenderFullHeader } from './Header'
 
 //CSS files:
 import '../css/Rmc-tabs.css'
 import '../css/App.css'
-import { setActiveTab } from '../../model/reducers/appNavAction'
-import { RenderFullHeader } from './Header'
+import { OperationModeFooter } from './Footer/OperationModeFooter'
 
 const channel = new URLSearchParams(window.location.search).get('channel')
 const specificChannel = parseInt(channel) || 0
@@ -29,6 +30,7 @@ export const App = () => {
                         <Thumbnail />
                     </div>
                 </div>
+                <OperationModeFooter />
             </div>
         )
     } else {
@@ -44,6 +46,7 @@ export const App = () => {
                         {renderTabData()}
                     </Tabs>
                 </div>
+                <OperationModeFooter />
             </div>
         )
     }

src/client/components/Footer/Footer.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import '../../css/Footer.css'
+
+
+
+interface FooterProps {
+  children: React.ReactNode
+}
+
+export function Footer({ children }: FooterProps): JSX.Element {
+  return (
+    <footer className='Footer'>
+      { children }
+    </footer>
+  )
+}

src/client/components/Footer/OperationModeEditVisibilityFooter.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import { OperationMode } from "../../../model/reducers/mediaReducer"
+import { reduxState } from "../../../model/reducers/store"
+import * as IO from '../../../model/SocketIoConstants'
+import { socket } from '../../util/SocketClientHandlers'
+import { Footer } from "./Footer"
+import "../../css/Operation-mode-edit-visibility-footer.css"
+
+const BUTTON_TEXT = 'Exit Edit Visibility'
+const DESCRIPTION_TEXT = 'You are currently editing the visibility of files.'.toUpperCase()
+
+function resetOperationMode(): void {
+  socket.emit(
+    IO.SET_OPERATION_MODE, 
+    reduxState.appNav[0].activeTab, 
+    OperationMode.CONTROL
+  )
+}
+
+export function OperationModeEditVisibilityFooter(): JSX.Element {
+  return (        
+      <Footer>
+        <div className="operation-mode-edit-visibility-footer">
+          <div className="operation-mode-edit-visibility-footer__text">
+            { DESCRIPTION_TEXT }
+          </div>
+          <div className="operation-mode-edit-visibility-footer__controls">
+            <button onClick={ resetOperationMode }>{ BUTTON_TEXT }</button>
+          </div>
+        </div>
+      </Footer>
+  )
+}

src/client/components/Footer/OperationModeFooter.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { OperationMode } from '../../../model/reducers/mediaReducer'
+import { reduxState } from '../../../model/reducers/store'
+import { OperationModeEditVisibilityFooter } from './OperationModeEditVisibilityFooter'
+
+export function OperationModeFooter(): JSX.Element {
+  const operationMode: OperationMode = useSelector((storeUpdate: any) =>
+  storeUpdate.media[0].output[reduxState.appNav[0].activeTab]?.operationMode)
+
+  switch (operationMode) {
+    case OperationMode.EDIT_VISIBILITY: {
+      return <OperationModeEditVisibilityFooter />
+    }
+    case OperationMode.CONTROL:
+    default: {
+      return <></>
+    }
+  }
+}

src/client/components/Header.tsx

@@ -13,7 +13,7 @@ import { secondsToTimeCode } from '../util/TimeCodeToString'
 import { TOGGLE_SHOW_SETTINGS } from '../../model/reducers/appNavAction'
 
 import * as IO from '../../model/SocketIoConstants'
-import { findThumbPix } from './Thumbnail'
+import { findThumbnail } from './Thumbnail'
 import { SettingsPage } from './Settings'
 
 const OFF_COLOR = { backgroundColor: 'grey' }
@@ -30,7 +30,7 @@ const RenderTime = () => {
                 )}
             </button>
             <img
-                src={findThumbPix(
+                src={findThumbnail(
                     reduxState.media[0].output[reduxState.appNav[0].activeTab]
                         ?.tallyFile,
                     reduxState.appNav[0].activeTab
@@ -98,6 +98,7 @@ const handleManualStartStatus = () => {
             .manualstartState
     )
 }
+
 export const RenderFullHeader = () => {
     // Redux hook:
     useSelector((storeUpdate) => storeUpdate, shallowEqual)
@@ -123,9 +124,7 @@ export const RenderFullHeader = () => {
                     <div className="App-button-background">
                         <button
                             className="App-switch-button"
-                            onClick={() => {
-                                handleLoopStatus()
-                            }}
+                            onClick={handleLoopStatus}
                             style={loopStateStyle()}
                         >
                             LOOP
@@ -134,7 +133,7 @@ export const RenderFullHeader = () => {
                     <div className="App-button-background">
                         <button
                             className="App-switch-button"
-                            onClick={() => handleMixStatus()}
+                            onClick={handleMixStatus}
                             style={mixStateStyle()}
                         >
                             MIX
@@ -143,7 +142,7 @@ export const RenderFullHeader = () => {
                     <div className="App-button-background">
                         <button
                             className="App-switch-button"
-                            onClick={() => handleWebState()}
+                            onClick={handleWebState}
                             style={webStateStyle()}
                         >
                             OVERLAY
@@ -157,7 +156,7 @@ export const RenderFullHeader = () => {
             <div className="App-button-background">
                 <button
                     className="App-switch-button"
-                    onClick={() => handleManualStartStatus()}
+                    onClick={handleManualStartStatus}
                     style={
                         reduxState.media[0].output[
                             reduxState.appNav[0].activeTab

src/client/components/Settings.tsx

@@ -5,11 +5,15 @@ import { setGenerics } from '../../model/reducers/settingsAction'
 import { socket } from '../util/SocketClientHandlers'
 import * as IO from '../../model/SocketIoConstants'
 import { TOGGLE_SHOW_SETTINGS } from '../../model/reducers/appNavAction'
+import { OperationMode } from '../../model/reducers/mediaReducer'
 
 // Check if URL has specifiet a channel:
 const channel = new URLSearchParams(window.location.search).get('channel')
 const specificChannel = parseInt(channel) || 0
 
+const OFF_COLOR = { backgroundColor: 'rgb(41, 41, 41)' }
+const ON_COLOR = { backgroundColor: 'rgb(28, 115, 165)' }
+
 //Set style for Select dropdown component:
 const selectorColorStyles = {
     control: (styles) => ({
@@ -27,6 +31,23 @@ const selectorColorStyles = {
     singleValue: (styles) => ({ ...styles, color: 'white' }),
 }
 
+function emitSetOperationMode() {
+    socket.emit(
+        IO.SET_OPERATION_MODE, 
+        reduxState.appNav[0].activeTab, 
+        reduxState.media[0].output[reduxState.appNav[0].activeTab]
+            .operationMode !== OperationMode.EDIT_VISIBILITY 
+            ? OperationMode.EDIT_VISIBILITY 
+            : OperationMode.CONTROL
+    )
+}
+
+function getEditVisibilityStyle(): { backgroundColor: string } {
+    return reduxState.media[0].output[reduxState.appNav[0].activeTab]?.operationMode === OperationMode.EDIT_VISIBILITY
+        ? ON_COLOR
+        : OFF_COLOR
+}
+
 export const SettingsPage = () => {
     const handleSettingsPage = () => {
         reduxStore.dispatch({
@@ -132,16 +153,14 @@ export const SettingsPage = () => {
             <div className="Settings-channel-form">
                 <button
                     className="save-button"
-                    onClick={() => {
-                        handleSave()
-                    }}
+                    onClick={handleSave}
                 >
                     UPDATE CLIPTOOL SETTINGS
                 </button>
                 {!specificChannel ? (
                     <button
                         className="save-button"
-                        onClick={() => handleRestart()}
+                        onClick={handleRestart}
                     >
                         RESTART CLIPTOOL
                     </button>
@@ -150,10 +169,17 @@ export const SettingsPage = () => {
                 )}
                 <button
                     className="save-button"
-                    onClick={() => handleSettingsPage()}
+                    onClick={handleSettingsPage}
                 >
                     EXIT
                 </button>
+                <button
+                    className="save-button"
+                    onClick={emitSetOperationMode}
+                    style={getEditVisibilityStyle()}
+                >
+                    EDIT VISIBILITY
+                </button>
             </div>
         </div>
     )