Add separate center image modal

src/__tests__/App.test.tsx

@@ -78,6 +78,10 @@ const miscState: General = {
     currentPageIndex: undefined,
     show: false,
   },
+  imgModal: {
+    src: '',
+    show: false,
+  },
   modalPages: [],
   isProcessingPlaylist: [],
   dynamicBackground: false,

src/components/modal/ImageModal.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useAppDispatch, useAppSelector } from '../../redux/hooks';
+import { setImgModal } from '../../redux/miscSlice';
+
+const BackgroundOverlay = styled.div`
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  user-select: none;
+
+  padding: 7rem 2rem 7rem 2rem;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  background: rgba(10, 10, 10, 0.5);
+`;
+
+const ImageContainer = styled.div`
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: relative;
+`;
+
+const Image = styled.img`
+  max-height: 100%;
+  max-width: 100%;
+  height: auto;
+  display: block;
+  vertical-align: middle;
+  border-style: solid;
+  z-index: 1;
+  user-drag: none;
+`;
+
+const ImageModal = () => {
+  const dispatch = useAppDispatch();
+  const misc = useAppSelector((state) => state.misc);
+
+  if (misc.imgModal.show) {
+    return (
+      <BackgroundOverlay onClick={() => dispatch(setImgModal({ ...misc.imgModal, show: false }))}>
+        <ImageContainer>
+          <Image src={misc.imgModal.src} />
+        </ImageContainer>
+      </BackgroundOverlay>
+    );
+  }
+
+  return <></>;
+};
+
+export default ImageModal;

src/redux/miscSlice.ts

@@ -16,6 +16,11 @@ export interface Modal {
   currentPageIndex: number | undefined;
 }
 
+export interface ImgModal {
+  show: boolean;
+  src?: string;
+}
+
 type ContextMenuOptions =
   | 'play'
   | 'addToQueueNext'
@@ -44,6 +49,7 @@ export interface General {
   font: string;
   modal: Modal;
   modalPages: ModalPage[];
+  imgModal: ImgModal;
   expandSidebar: boolean;
   isProcessingPlaylist: string[];
   contextMenu: ContextMenu;
@@ -63,6 +69,10 @@ const initialState: General = {
     currentPageIndex: undefined,
   },
   modalPages: [],
+  imgModal: {
+    show: false,
+    src: undefined,
+  },
   expandSidebar: false,
   isProcessingPlaylist: [],
   contextMenu: {
@@ -138,6 +148,10 @@ const miscSlice = createSlice({
       state.font = action.payload;
     },
 
+    setImgModal: (state, action: PayloadAction<ImgModal>) => {
+      state.imgModal = action.payload;
+    },
+
     hideModal: (state) => {
       state.modal.show = false;
       state.modal.currentPageIndex = undefined;
@@ -197,5 +211,6 @@ export const {
   setExpandSidebar,
   setDynamicBackground,
   setMiscSetting,
+  setImgModal,
 } = miscSlice.actions;
 export default miscSlice.reducer;