OSSForks/daedalOS
1
0
Fork 0
mirror of https://github.com/DustinBrett/daedalOS.git synced 2025-12-06 12:20:20 +01:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Video wallpapers

Browse Source
This commit is contained in:
Dustin Brett 2023-04-07 13:21:49 -07:00
parent aa7a71272f
commit a3ea91348d
4 changed files with 91 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -119,7 +119,7 @@ docker run -dp 3000:3000 --rm --name daedalos daedalos
- [Hexells](https://znah.net/hexells/) - [Hexells](https://znah.net/hexells/)
- [Matrix](https://rezmason.github.io/matrix/) - [Matrix](https://rezmason.github.io/matrix/)
- [Coastal Landscape](https://www.shadertoy.com/view/fstyD4) - [Coastal Landscape](https://www.shadertoy.com/view/fstyD4)
- Set via images (Fill, Fit, Stretch, Tile, Center) - Set via image/video (Fill, Fit, Stretch, Tile, Center)
- Picture Slideshow - Picture Slideshow
- [Astronomy Picture of the Day](https://api.nasa.gov/#apod) - [Astronomy Picture of the Day](https://api.nasa.gov/#apod)

2
components/system/Desktop/Wallpapers/constants.ts
View File

@ -86,3 +86,5 @@ export const WALLPAPER_MENU: WallpaperMenuItem[] = [
]; ];
export const BASE_CANVAS_SELECTOR = ":scope > canvas"; export const BASE_CANVAS_SELECTOR = ":scope > canvas";
export const BASE_VIDEO_SELECTOR = ":scope > video";

79
components/system/Desktop/Wallpapers/useWallpaper.ts
View File

@ -1,5 +1,6 @@
import { import {
BASE_CANVAS_SELECTOR, BASE_CANVAS_SELECTOR,
BASE_VIDEO_SELECTOR,
bgPositionSize, bgPositionSize,
WALLPAPER_PATHS, WALLPAPER_PATHS,
WALLPAPER_WORKERS, WALLPAPER_WORKERS,
@ -21,6 +22,7 @@ import {
PICTURES_FOLDER, PICTURES_FOLDER,
SLIDESHOW_FILE, SLIDESHOW_FILE,
UNSUPPORTED_BACKGROUND_EXTENSIONS, UNSUPPORTED_BACKGROUND_EXTENSIONS,
VIDEO_FILE_EXTENSIONS,
} from "utils/constants"; } from "utils/constants";
import { import {
bufferToUrl, bufferToUrl,
@ -150,6 +152,7 @@ const useWallpaper = (
} }
desktopRef.current?.querySelector(BASE_CANVAS_SELECTOR)?.remove(); desktopRef.current?.querySelector(BASE_CANVAS_SELECTOR)?.remove();
desktopRef.current?.querySelector(BASE_VIDEO_SELECTOR)?.remove();
let wallpaperUrl = ""; let wallpaperUrl = "";
let fallbackBackground = ""; let fallbackBackground = "";
@ -243,37 +246,61 @@ const useWallpaper = (
} }
if (wallpaperUrl) { if (wallpaperUrl) {
const applyWallpaper = (url: string): void => { if (VIDEO_FILE_EXTENSIONS.has(getExtension(wallpaperImage))) {
const repeat = newWallpaperFit === "tile" ? "repeat" : "no-repeat"; const video = document.createElement("video");
const positionSize = bgPositionSize[newWallpaperFit];
document.documentElement.style.setProperty( video.src = wallpaperUrl;
"background",
`url(${CSS.escape(
url
)}) ${positionSize} ${repeat} fixed border-box border-box ${
colors.background
}`
);
};
if (fallbackBackground) { video.autoplay = true;
fetch(wallpaperUrl, { video.controls = false;
...HIGH_PRIORITY_REQUEST, video.disablePictureInPicture = true;
mode: "no-cors", video.disableRemotePlayback = true;
}) video.loop = true;
.then(({ ok }) => { video.muted = true;
if (!ok) throw new Error("Failed to load url"); video.playsInline = true;
})
.catch(() => applyWallpaper(fallbackBackground)); video.style.position = "absolute";
video.style.inset = "0";
video.style.width = "100%";
video.style.height = "100%";
video.style.objectFit = "cover";
video.style.objectPosition = "center center";
video.style.zIndex = "-1";
desktopRef.current?.appendChild(video);
} else { } else {
applyWallpaper(wallpaperUrl); const applyWallpaper = (url: string): void => {
const repeat = newWallpaperFit === "tile" ? "repeat" : "no-repeat";
const positionSize = bgPositionSize[newWallpaperFit];
if (isSlideshow) { document.documentElement.style.setProperty(
slideshowTimerRef.current = window.setTimeout( "background",
loadFileWallpaper, `url(${CSS.escape(
MILLISECONDS_IN_MINUTE url
)}) ${positionSize} ${repeat} fixed border-box border-box ${
colors.background
}`
); );
};
if (fallbackBackground) {
fetch(wallpaperUrl, {
...HIGH_PRIORITY_REQUEST,
mode: "no-cors",
})
.then(({ ok }) => {
if (!ok) throw new Error("Failed to load url");
})
.catch(() => applyWallpaper(fallbackBackground));
} else {
applyWallpaper(wallpaperUrl);
if (isSlideshow) {
slideshowTimerRef.current = window.setTimeout(
loadFileWallpaper,
MILLISECONDS_IN_MINUTE
);
}
} }
} }
} else { } else {

59
components/system/Files/FileEntry/useFileContextMenu.ts
View File

@ -28,6 +28,7 @@ import {
SHORTCUT_EXTENSION, SHORTCUT_EXTENSION,
SPREADSHEET_FORMATS, SPREADSHEET_FORMATS,
UNSUPPORTED_BACKGROUND_EXTENSIONS, UNSUPPORTED_BACKGROUND_EXTENSIONS,
VIDEO_FILE_EXTENSIONS,
} from "utils/constants"; } from "utils/constants";
import { import {
AUDIO_DECODE_FORMATS, AUDIO_DECODE_FORMATS,
@ -399,34 +400,44 @@ const useFileContextMenu = (
}); });
} }
const hasBackgroundVideoExtension =
VIDEO_FILE_EXTENSIONS.has(pathExtension);
if ( if (
IMAGE_FILE_EXTENSIONS.has(pathExtension) && hasBackgroundVideoExtension ||
!UNSUPPORTED_BACKGROUND_EXTENSIONS.has(pathExtension) (IMAGE_FILE_EXTENSIONS.has(pathExtension) &&
!UNSUPPORTED_BACKGROUND_EXTENSIONS.has(pathExtension))
) { ) {
menuItems.unshift({ menuItems.unshift({
label: "Set as desktop background", label: "Set as desktop background",
menu: [ ...(hasBackgroundVideoExtension
{ ? {
action: () => setWallpaper(path, "fill"), action: () => setWallpaper(path),
label: "Fill", }
}, : {
{ menu: [
action: () => setWallpaper(path, "fit"), {
label: "Fit", action: () => setWallpaper(path, "fill"),
}, label: "Fill",
{ },
action: () => setWallpaper(path, "stretch"), {
label: "Stretch", action: () => setWallpaper(path, "fit"),
}, label: "Fit",
{ },
action: () => setWallpaper(path, "tile"), {
label: "Tile", action: () => setWallpaper(path, "stretch"),
}, label: "Stretch",
{ },
action: () => setWallpaper(path, "center"), {
label: "Center", action: () => setWallpaper(path, "tile"),
}, label: "Tile",
], },
{
action: () => setWallpaper(path, "center"),
label: "Center",
},
],
}),
}); });
} }