OSSForks/daedalOS
1
0
Fork 0
mirror of https://github.com/DustinBrett/daedalOS.git synced 2025-12-06 00:20:05 +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/)
- [Matrix](https://rezmason.github.io/matrix/)
- [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
- [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_VIDEO_SELECTOR = ":scope > video";

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

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

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

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