Merge branch 'spacedriveapp:main' into main

README.md

@@ -3,7 +3,7 @@
 
   </a>
   <p align="center">
-   <img width="150" height="150" src="https://github.com/spacedriveapp/spacedrive/blob/main/packages/assets/images/AppLogo.png" alt="Logo">
+   <img width="150" height="150" src="packages/assets/images/AppLogo.png" alt="Logo">
   </p>
   <h1 align="center"><b>Spacedrive</b></h1>
   <p align="center">
@@ -32,14 +32,14 @@ Spacedrive is an open source cross-platform file manager, powered by a virtual d
 <br/>
 <br/>
 
-> NOTE: Spacedrive is under active development, most of the listed features are still experimental and subject to change.
+> UPDATE: Spacedrive is under active development, we are in the pre-alpha stage, with builds occasionally released via GitHub actions, official alpha coming soon.
 
 Organize files across many devices in one place. From cloud services to offline hard drives, Spacedrive combines the storage capacity and processing power of your devices into one personal distributed cloud, that is both secure and intuitive to use.
 
 For independent creatives, hoarders and those that want to own their digital footprint, Spacedrive provides a free file management experience like no other.
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/spacedriveapp/spacedrive/main/apps/landing/public/app.png" alt="App screenshot">
+  <img src="apps/landing/public/github.webp" alt="App screenshot">
   <br />
   <br />
   <a href="https://discord.gg/gTaF2Z44f5">

interface/app/$libraryId/Explorer/FilePath/Thumb.tsx

@@ -109,6 +109,7 @@ export interface ThumbProps {
 	className?: string;
 	loadOriginal?: boolean;
 	mediaControls?: boolean;
+	pauseVideo?: boolean;
 }
 
 function FileThumb({ size, cover, ...props }: ThumbProps) {
@@ -244,36 +245,18 @@ function FileThumb({ size, cover, ...props }: ThumbProps) {
 								);
 							case 'Video':
 								return (
-									<video
-										// Order matter for crossOrigin attr
-										crossOrigin="anonymous"
+									<Video
 										src={src}
+										onLoad={onLoad}
 										onError={onError}
-										autoPlay
-										onVolumeChange={(e) => {
-											const video = e.target as HTMLVideoElement;
-											getExplorerStore().mediaPlayerVolume = video.volume;
-										}}
+										paused={props.pauseVideo}
 										controls={props.mediaControls}
-										onCanPlay={(e) => {
-											const video = e.target as HTMLVideoElement;
-											// Why not use the element's attribute? Because React...
-											// https://github.com/facebook/react/issues/10389
-											video.loop = !props.mediaControls;
-											video.muted = !props.mediaControls;
-											video.volume = getExplorerStore().mediaPlayerVolume;
-										}}
 										className={clsx(
 											childClassName,
 											size && 'rounded border-x-0 border-black',
 											props.className
 										)}
-										playsInline
-										onLoadedData={onLoad}
-										draggable={false}
-									>
-										<p>Video preview is not supported.</p>
-									</video>
+									/>
 								);
 							case 'Audio':
 								return (
@@ -355,3 +338,52 @@ function FileThumb({ size, cover, ...props }: ThumbProps) {
 }
 
 export default memo(FileThumb);
+
+interface VideoProps {
+	src: string;
+	paused?: boolean;
+	controls?: boolean;
+	className?: string;
+	onLoad?: () => void;
+	onError?: () => void;
+}
+
+const Video = memo(({ src, paused, controls, className, onLoad, onError }: VideoProps) => {
+	const video = useRef<HTMLVideoElement>(null);
+
+	useEffect(() => {
+		if (video.current) {
+			paused ? video.current.pause() : video.current.play();
+		}
+	}, [paused]);
+
+	return (
+		<video
+			// Order matter for crossOrigin attr
+			crossOrigin="anonymous"
+			ref={video}
+			src={src}
+			onError={onError}
+			autoPlay={!paused}
+			onVolumeChange={(e) => {
+				const video = e.target as HTMLVideoElement;
+				getExplorerStore().mediaPlayerVolume = video.volume;
+			}}
+			controls={controls}
+			onCanPlay={(e) => {
+				const video = e.target as HTMLVideoElement;
+				// Why not use the element's attribute? Because React...
+				// https://github.com/facebook/react/issues/10389
+				video.loop = !controls;
+				video.muted = !controls;
+				video.volume = getExplorerStore().mediaPlayerVolume;
+			}}
+			className={className}
+			playsInline
+			onLoadedData={onLoad}
+			draggable={false}
+		>
+			<p>Video preview is not supported.</p>
+		</video>
+	);
+});

interface/app/$libraryId/Explorer/Inspector/index.tsx

@@ -2,7 +2,17 @@
 import { Image, Image_Light } from '@sd/assets/icons';
 import clsx from 'clsx';
 import dayjs from 'dayjs';
-import { Barcode, CircleWavyCheck, Clock, Cube, Hash, Link, Lock, Path, Snowflake } from 'phosphor-react';
+import {
+	Barcode,
+	CircleWavyCheck,
+	Clock,
+	Cube,
+	Hash,
+	Link,
+	Lock,
+	Path,
+	Snowflake
+} from 'phosphor-react';
 import { HTMLAttributes, useEffect, useState } from 'react';
 import {
 	ExplorerItem,
@@ -19,6 +29,7 @@ import { Button, Divider, DropdownMenu, Tooltip, tw } from '@sd/ui';
 import { useIsDark } from '~/hooks';
 import AssignTagMenuItems from '../ContextMenu/Object/AssignTagMenuItems';
 import FileThumb from '../FilePath/Thumb';
+import { useExplorerStore } from '../store.js';
 import FavoriteButton from './FavoriteButton';
 import Note from './Note';
 
@@ -46,6 +57,7 @@ export const Inspector = ({ data, context, showThumbnail = true, ...props }: Pro
 	const isDark = useIsDark();
 	const objectData = data ? getItemObject(data) : null;
 	const filePathData = data ? getItemFilePath(data) : null;
+	const explorerStore = useExplorerStore();
 
 	const isDir = data?.type === 'Path' ? data.item.is_dir : false;
 
@@ -80,7 +92,13 @@ export const Inspector = ({ data, context, showThumbnail = true, ...props }: Pro
 				<>
 					{showThumbnail && (
 						<div className="mb-2 aspect-square">
-							<FileThumb loadOriginal size={null} data={data} className="mx-auto" />
+							<FileThumb
+								pauseVideo={!!explorerStore.quickViewObject}
+								loadOriginal
+								size={null}
+								data={data}
+								className="mx-auto"
+							/>
 						</div>
 					)}
 					<div className="flex w-full select-text flex-col overflow-hidden rounded-lg border border-app-line bg-app-box py-0.5 shadow-app-shade/10">
@@ -203,9 +221,7 @@ export const Inspector = ({ data, context, showThumbnail = true, ...props }: Pro
 									<MetaTextLine>
 										<InspectorIcon component={Path} />
 										<MetaKeyName className="mr-1.5">Path</MetaKeyName>
-										<MetaValue>
-											{fileFullPath}
-										</MetaValue>
+										<MetaValue>{fileFullPath}</MetaValue>
 									</MetaTextLine>
 								</Tooltip>
 							)}

packages/config/vite/relativeAliasResolver.ts

@@ -2,6 +2,7 @@ import fs from 'fs/promises';
 import path from 'path';
 import { Alias } from 'vite';
 
+const projectPath = path.resolve(__dirname, '../../../');
 const pkgJsonCache = new Map();
 
 const resolver: Alias = {
@@ -12,10 +13,12 @@ const resolver: Alias = {
 
 		const [_, sourcePath] = source.split('~/');
 
-		if (importer!.includes('/src/')) {
-			const [pkg] = importer!.split('/src/');
+		const relativeImporter = importer!.replace(projectPath, '');
 
-			root = `${pkg!}/src`;
+		if (relativeImporter.includes('/src/')) {
+			const [pkg] = relativeImporter.split('/src/');
+
+			root = `${projectPath}${pkg}/src`;
 		} else {
 			let parent = importer!;