WIP

kyleawayan · Feb 10, 2021 · 3fbeb76 · 3fbeb76
1 parent fd1956a
commit 3fbeb76
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 12 deletions.
diff --git a/components/AlbumArt.tsx b/components/AlbumArt.tsx
@@ -4,6 +4,7 @@ import { useDropzone } from "react-dropzone";
 import Center from "./Center";
 import { useRouter } from "next/router";
 import { useTranslation } from "react-i18next";
+import ScrollContainer from "react-indiana-drag-scroll";
 import "../utils/i18n";
 
 export default function AlbumArt() {
@@ -37,22 +38,26 @@ export default function AlbumArt() {
     <div className={styles.palette}>
       <img src="frame.png" className={styles.frame}></img>
       {imageBase64 && (
-        <div className={styles.pictureContainer}>
+        <ScrollContainer
+          className={styles.pictureContainer}
+          hideScrollbars={false}
+        >
           <img src={imageBase64} className={styles.picture} />
-        </div>
+        </ScrollContainer>
       )}
-      <div {...getRootProps()} className={styles.upload}>
-        <input {...getInputProps()} />
-        {!imageBase64 && (
+      {!imageBase64 && (
+        <div {...getRootProps()} className={styles.upload}>
+          <input {...getInputProps()} />
+
           <Center>
             {isDragActive ? (
               <p>{t("Drop Files (Hover)")}</p>
             ) : (
               <p>{t("Drop Files Here")}</p>
             )}
           </Center>
-        )}
-      </div>
+        </div>
+      )}
       <div className={styles.captionContainer}>
         <div className={styles.caption}>
           <span className={styles.captionPink} contentEditable="true">

diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
     "react-device-detect": "^1.15.0",
     "react-dom": "17.0.1",
     "react-dropzone": "^11.3.1",
-    "react-i18next": "^11.8.6"
+    "react-i18next": "^11.8.6",
+    "react-indiana-drag-scroll": "^1.8.0"
   },
   "devDependencies": {
     "@types/node": "^14.14.25",

diff --git a/styles/albumArt.module.css b/styles/albumArt.module.css
@@ -16,6 +16,12 @@
   position: relative;
   z-index: 2;
   width: 50vh;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-drag: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  pointer-events: none;
 }
 
 .pictureContainer {
@@ -24,16 +30,16 @@
   height: 56.9%;
   top: 14.2%;
   left: 21.7%;
-  overflow: hidden;
   transform: rotate(-0.02deg);
 }
 
 .picture {
-  height: 100%;
   width: 100%;
+  height: 100%;
   z-index: 1;
   object-fit: cover;
   object-position: center;
+  cursor: grab;
 }
 
 .caption {

diff --git a/yarn.lock b/yarn.lock
@@ -499,7 +499,7 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
-classnames@2.2.6:
+classnames@2.2.6, classnames@^2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -693,6 +693,11 @@ data-uri-to-buffer@3.0.1:
   resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz#594b8973938c5bc2c33046535785341abc4f3636"
   integrity sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==
 
+debounce@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
+  integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==
+
 debug@4:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
@@ -816,6 +821,11 @@ domutils@^2.4.2:
     domelementtype "^2.0.1"
     domhandler "^4.0.0"
 
+easy-bem@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/easy-bem/-/easy-bem-1.0.2.tgz#3f759158c045465744900aa26ba8bd7d88d7a969"
+  integrity sha512-tHtLDhcEHZIMKdiiZElQoR8TcZ/6rvcNp7//93Vx/mqNLah9BOFGhhzTUfWLJs7uxZiKMdP/KzGOtzq14DrrqQ==
+
 electron-to-chromium@^1.3.634:
   version "1.3.657"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.657.tgz#a9c307f2612681245738bb8d36d997cbb568d481"
@@ -1617,7 +1627,7 @@ process@0.11.10, process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
 
-prop-types@15.7.2, prop-types@^15.7.2:
+prop-types@15.7.2, prop-types@^15.7.0, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -1739,6 +1749,16 @@ react-i18next@^11.8.6:
     "@babel/runtime" "^7.3.1"
     html-parse-stringify2 "2.0.1"
 
+react-indiana-drag-scroll@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/react-indiana-drag-scroll/-/react-indiana-drag-scroll-1.8.0.tgz#d82237c1b3aefd3c0bb47d9380abfde130d68ecf"
+  integrity sha512-Kv67vpvNocFvSKKOF3+f8hupeyp//yxAQDfz07hJtjegzmu5rt7DzCj6JUBRcMAVfifID/+heaihFmuTAvNSTw==
+  dependencies:
+    classnames "^2.2.6"
+    debounce "^1.2.0"
+    easy-bem "^1.0.0"
+    prop-types "^15.7.0"
+
 react-is@16.13.1, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"