mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
Added sharing page to web (#355)
* Added shared album * Added list tile * Show info of shared album owner
This commit is contained in:
parent
5d03e9bda8
commit
c6ecfb679a
38 changed files with 403 additions and 63 deletions
|
|
@ -1,72 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { session } from '$app/stores';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import LoadingSpinner from '../shared/loading-spinner.svelte';
|
||||
import { api, AssetResponseDto } from '@api';
|
||||
|
||||
export let assetId: string;
|
||||
|
||||
let asset: AssetResponseDto;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let videoPlayerNode: HTMLVideoElement;
|
||||
let isVideoLoading = true;
|
||||
|
||||
onMount(async () => {
|
||||
if ($session.user) {
|
||||
const { data: assetInfo } = await api.assetApi.getAssetById(assetId);
|
||||
|
||||
asset = assetInfo;
|
||||
|
||||
await loadVideoData();
|
||||
}
|
||||
});
|
||||
|
||||
const loadVideoData = async () => {
|
||||
isVideoLoading = true;
|
||||
|
||||
if ($session.user) {
|
||||
try {
|
||||
const { data } = await api.assetApi.serveFile(asset.deviceAssetId, asset.deviceId, false, true, {
|
||||
responseType: 'blob',
|
||||
});
|
||||
|
||||
if (!(data instanceof Blob)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const videoData = URL.createObjectURL(data);
|
||||
videoPlayerNode.src = videoData;
|
||||
|
||||
videoPlayerNode.load();
|
||||
|
||||
videoPlayerNode.oncanplay = () => {
|
||||
videoPlayerNode.muted = true;
|
||||
videoPlayerNode.play();
|
||||
videoPlayerNode.muted = false;
|
||||
|
||||
isVideoLoading = false;
|
||||
};
|
||||
|
||||
return videoData;
|
||||
} catch (e) {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div transition:fade={{ duration: 150 }} class="flex place-items-center place-content-center h-full select-none">
|
||||
{#if asset}
|
||||
<video controls class="h-full object-contain" bind:this={videoPlayerNode}>
|
||||
<track kind="captions" />
|
||||
</video>
|
||||
|
||||
{#if isVideoLoading}
|
||||
<div class="absolute flex place-items-center place-content-center">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue