Readme; support drag n drop

Author: zfox23

README.md

@@ -1,2 +1,21 @@
-# spatial-photo-webxr-viewer
-View Apple's Spatial Photos in 3D VR with your browser via WebXR.
+# Apple Spatial Photo WebXR Viewer
+
+[**Try it here.**](https://zachfox.github.io/spatial-photo-webxr-viewer) Spatial photos are processed locally and never leave your device.
+
+With the launch of the iPhone 16 Pro, more phones than ever before are now capable of capturing 3D photographs. Apple calls these "Spatial Photos".
+
+This small Web application allows you to view these spatial photos in 3D VR using WebXR.
+
+## Why?
+
+Spatial photography and spatial audio capture are untapped tools for human connection and recollection. This is mainly because experiencing spatial computing is still cumbersome and socially isolating, requiring use of expensive, uncomfortable headsets.
+
+But those limitations are slowly disappearing, and XR technology is more accessible than it's ever been. As more people experience *meaningful* spatial content, more people are going to want to be able to capture and view that content.
+
+I don't think Apple Spatial Photos should only be viewable on Apple devices. So, I built this viewer!
+
+## Multidimensional Memories
+
+Apple's hardware isn't yet capable of producing the truly immersive spatial content. For that, the photo's field of view must be wider, and the photos must be paired with spatial audio.
+
+For the past few years, I have been experimenting with a new media format I'm calling "Multidimensional Memories". MDMs are wide-angle (180°) photographs paired with 30-second spatial audio clips. If Apple's Spatial Photos and Videos interest you, [**try out my Multidimensional Memories via WebXR here**](https://zachfox.photography/portfolio/immersive/).

src/components/Viewer.jsx

@@ -17,6 +17,7 @@ cameraLayers.enable(1);
 export default function Viewer() {
     const [imageSrc, setImageSrc] = useState("");
     const [isInXR, setIsInXR] = useState(false);
+    const [isDraggingOver, setIsDraggingOver] = useState(false);
     const cameraRef = useRef();
 
     const processBrowsedFile = (e) => {
@@ -53,8 +54,27 @@ export default function Viewer() {
         }
     }
 
+    const handleDrop = (e) => {
+        e.preventDefault();
+
+        setIsDraggingOver(false);
+
+        if (!(e.dataTransfer.files && e.dataTransfer.files.length)) return;
+
+        setImageSrc(URL.createObjectURL(e.dataTransfer.files[0]));
+    }
+
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        setIsDraggingOver(true);
+    };
+
+    const handleDragLeave = (e) => {
+        setIsDraggingOver(false);
+    };
+
     return (
-        <div className='w-full h-full min-h-screen bg-black absolute flex items-center'>
+        <div className='w-full h-full min-h-screen bg-black absolute flex items-center' onDragOver={handleDragOver} onDrop={handleDrop} onDragLeave={handleDragLeave}>
             <Canvas
                 gl={{ toneMapping: THREE.LinearToneMapping }}>
                 <PerspectiveCamera
@@ -70,14 +90,19 @@ export default function Viewer() {
                 </XR>
             </Canvas>
 
-            <div className='fixed left-1/2 -translate-x-1/2 bottom-0 bg-white/80 flex justify-center gap-4 p-4 rounded-t-md'>
+            <div className='fixed left-1/2 -translate-x-1/2 bottom-0 bg-white/80 flex justify-center gap-4 md:gap-12 p-4 rounded-t-md'>
                 <div className='flex flex-col gap-1'>
-                    <p className='font-semibold'>Select an Apple Spatial Photo <span className='font-mono'>(.heic)</span></p>
-                    <input type="file" accept=".heic" onChange={processBrowsedFile} />
+                    <p className='font-semibold'>Drop or select an Apple Spatial Photo <span className='font-mono'>(.heic)</span></p>
+                    <input className='cursor-pointer' type="file" accept=".heic" onChange={processBrowsedFile} />
                     <p className='text-xs italic'>Your photo is processed on your device.</p>
                 </div>
 
-                <button className='bg-amber-600 border-0 hover:border-2 active:border-4 focus:border-2 border-solid text-white px-8 py-1 font-semibold text-xl rounded-md transition-all duration-[25ms]' onClick={onXRButtonClicked}>{isInXR ? 'Exit' : 'Enter'} VR</button>
+                <button className='bg-amber-600 outline-double outline-0 hover:outline-2 active:outline-4 focus:outline-2 outline-white text-white px-8 py-2 font-semibold text-xl rounded-md transition-all duration-[25ms]' onClick={onXRButtonClicked}>{isInXR ? 'Exit' : 'Enter'} VR</button>
+            </div>
+
+            <div className={`absolute inset-0 rounded-md border-dashed border-2 border-white bg-neutral-800/90 text-amber-500 font-semibold text-xl md:text-2xl flex-col gap-2 justify-center items-center ${isDraggingOver ? "flex" : "hidden"} pointer-events-none`}>
+                <p className='pointer-events-none select-none'>Drop your Apple Spatial Photo</p>
+                <p className='font-mono text-sm pointer-events-none select-none'>.heic</p>
             </div>
         </div>
     )