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 ( + dispatch(setImgModal({ ...misc.imgModal, show: false }))}> + + + + + ); + } + + 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) => { + 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;