From 762e540da9138a44b53924437603567e2e8d764f Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 26 Jan 2022 15:34:06 -0800
Subject: [PATCH] Add separate center image modal

---
 src/__tests__/App.test.tsx          |  4 ++
 src/components/modal/ImageModal.tsx | 59 +++++++++++++++++++++++++++++
 src/redux/miscSlice.ts              | 15 ++++++++
 3 files changed, 78 insertions(+)
 create mode 100644 src/components/modal/ImageModal.tsx

diff --git a/src/__tests__/App.test.tsx b/src/__tests__/App.test.tsx
index d8f1d1d..f4a7778 100644
--- a/src/__tests__/App.test.tsx
+++ b/src/__tests__/App.test.tsx
@@ -78,6 +78,10 @@ const miscState: General = {
     currentPageIndex: undefined,
     show: false,
   },
+  imgModal: {
+    src: '',
+    show: false,
+  },
   modalPages: [],
   isProcessingPlaylist: [],
   dynamicBackground: false,
diff --git a/src/components/modal/ImageModal.tsx b/src/components/modal/ImageModal.tsx
new file mode 100644
index 0000000..5610e04
--- /dev/null
+++ b/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;
diff --git a/src/redux/miscSlice.ts b/src/redux/miscSlice.ts
index 0a50624..f93816f 100644
--- a/src/redux/miscSlice.ts
+++ b/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;