Christoph/LockScreenWallpaper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat(wallpapers): add Immich integration with caching and rotation

Browse Source 
This patch adds Immich integration for remote images with local
caching and pruning.
It adds image rotation to the crop flow and stores rotation
with the crop state.
It adds progress tracking and size checks during image
download to avoid oversized assets.

- Add Immich caching with size limits and automatic pruning
- Extend crop handling to support rotation and persist it
- Improve download progress and error messaging
This commit is contained in:
Christoph
2026-08-21 22:01:42 +02:00
parent 789b58398a
commit e494b17117
11 changed files with 343 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles.css
+7 -2
View File
@@ -153,10 +153,12 @@ nav svg { width: 21px; }
.save-crop { background: var(--green); color: white; }
.crop-editor { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
.phone-preview { position: relative; width: min(72vw, 270px); aspect-ratio: 9 / 19.5; margin: 0 auto 22px; overflow: hidden; border: 7px solid #202621; border-radius: 34px; background: #090b09; box-shadow: 0 18px 38px rgba(20,35,24,.22); }
.phone-preview > img { width: 100%; height: 100%; display: block; transition: transform .16s ease, object-position .16s ease; }
.preview-image-frame { position: absolute; inset: 0; transform-origin: center; transition: transform .16s ease; }
.preview-image-frame.quarter-turn { inset: 26.923% -58.333%; }
.preview-image-frame > img { width: 100%; height: 100%; display: block; transition: object-position .16s ease; }
.phone-preview.interactive { touch-action: none; user-select: none; cursor: grab; }
.phone-preview.interactive:active { cursor: grabbing; }
.phone-preview.interactive > img { pointer-events: none; user-select: none; transition: none; }
.phone-preview.interactive .preview-image-frame, .phone-preview.interactive img { pointer-events: none; user-select: none; transition: none; }
.crop-grid { position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: .48; }
.crop-grid i { position: absolute; display: block; background: rgba(255,255,255,.72); box-shadow: 0 0 2px rgba(0,0,0,.38); }
.crop-grid i:nth-child(1), .crop-grid i:nth-child(2) { top: 0; bottom: 0; width: 1px; }
@@ -171,6 +173,9 @@ nav svg { width: 21px; }
.fit-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 17px; border-radius: 13px; background: #edf2eb; }
.fit-toggle button { height: 38px; border: 0; border-radius: 10px; color: #68736b; background: transparent; font-size: 13px; font-weight: 750; }
.fit-toggle button.active { color: white; background: var(--green); box-shadow: 0 3px 9px rgba(20,93,50,.18); }
.rotate-image { width: 100%; height: 42px; margin-bottom: 15px; padding: 0 13px; border: 0; border-radius: 12px; color: var(--green); background: var(--sage); display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 750; }
.rotate-image svg { width: 17px; }
.rotate-image strong { margin-left: auto; }
.crop-controls label { display: block; margin-top: 13px; color: #58635b; font-size: 12px; font-weight: 700; }
.crop-controls label span { display: flex; justify-content: space-between; }
.crop-controls label strong { color: var(--green); }