Fixes "Videos not loading when going consecutively" (LycheeOrg#2879)

yonasBSD · Jan 5, 2025 · 99b463b · 99b463b
1 parent dde9b5a
commit 99b463b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/resources/js/composables/photo/basePhoto.ts b/resources/js/composables/photo/basePhoto.ts
@@ -1,6 +1,6 @@
 import { computed, Ref, ref } from "vue";
 
-export function usePhotoBaseFunction(photoId: Ref<string>) {
+export function usePhotoBaseFunction(photoId: Ref<string>, videoElement: Ref<HTMLVideoElement | null>) {
 	const photo = ref<App.Http.Resources.Models.PhotoResource | undefined>(undefined);
 	const album = ref<App.Http.Resources.Models.AbstractAlbumResource | null>(null);
 	const photos = ref<App.Http.Resources.Models.PhotoResource[]>([]);
@@ -87,6 +87,13 @@ export function usePhotoBaseFunction(photoId: Ref<string>) {
 
 	function refresh(): void {
 		photo.value = photos.value.find((p: App.Http.Resources.Models.PhotoResource) => p.id === photoId.value);
+
+		// handle videos.
+		const videoElementValue = videoElement.value;
+		if (photo.value?.precomputed?.is_video && videoElementValue) {
+			videoElementValue.src = photo.value?.size_variants?.original?.url ?? "";
+			videoElementValue.load();
+		}
 	}
 
 	return {

diff --git a/resources/js/views/gallery-panels/Photo.vue b/resources/js/views/gallery-panels/Photo.vue
@@ -19,6 +19,7 @@
 					width="auto"
 					height="auto"
 					id="image"
+					ref="videoElement"
 					controls
 					class="absolute m-auto w-auto h-auto"
 					:class="is_full_screen || is_slideshow_active ? 'max-w-full max-h-full' : 'max-wh-full-56'"
@@ -169,7 +170,7 @@ import { useImageHelpers } from "@/utils/Helpers";
 import { useTogglablesStateStore } from "@/stores/ModalsState";
 
 const swipe = ref<HTMLElement | null>(null);
-
+const videoElement = ref<HTMLVideoElement | null>(null);
 const props = defineProps<{
 	albumid: string;
 	photoid: string;
@@ -186,8 +187,10 @@ const { is_full_screen, is_edit_open, are_details_open, is_slideshow_active } =
 const { isDeleteVisible, toggleDelete, isMoveVisible, toggleMove } = useGalleryModals(togglableStore);
 
 const photoId = ref(props.photoid);
-const { photo, album, photos, previousStyle, nextStyle, srcSetMedium, style, imageViewMode, refresh, hasPrevious, hasNext } =
-	usePhotoBaseFunction(photoId);
+const { photo, album, photos, previousStyle, nextStyle, srcSetMedium, style, imageViewMode, refresh, hasPrevious, hasNext } = usePhotoBaseFunction(
+	photoId,
+	videoElement,
+);
 const { getPlaceholderIcon } = useImageHelpers();
 
 const { slideshow_timeout } = storeToRefs(lycheeStore);