diff --git a/components/pages/posts/post/PostMedia.vue b/components/pages/posts/post/PostMedia.vue index ac543f1b..624667fe 100644 --- a/components/pages/posts/post/PostMedia.vue +++ b/components/pages/posts/post/PostMedia.vue @@ -45,8 +45,10 @@ () => props.mediaType === 'animated' || (props.mediaType === 'image' && props.mediaSrc.endsWith('.gif')) ) - const triedToLoadWithProxy = shallowRef(false) - const triedToLoadPosterWithProxy = shallowRef(false) + const maxProxyRetryAttempts = 3 + const mediaProxyRetryAttempts = shallowRef(0) + const posterProxyRetryAttempts = shallowRef(0) + const proxyRetryNonce = shallowRef(0) let videoPlayer: FluidPlayerInstance | undefined @@ -270,6 +272,15 @@ }) } + function buildProxyRetryUrl(url: string) { + const proxiedUrl = new URL(proxyUrl(url)) + + proxyRetryNonce.value++ + proxiedUrl.searchParams.set('retry', proxyRetryNonce.value.toString()) + + return proxiedUrl.toString() + } + function startPlayingAnimatedMedia() { isAnimatedMediaLoading.value = true isAnimatedMediaPlaying.value = true @@ -291,13 +302,13 @@ isVideo.value && isPremium.value && // - !triedToLoadWithProxy.value + mediaProxyRetryAttempts.value < maxProxyRetryAttempts ) { - localSrc.value = proxyUrl(props.mediaSrc) + mediaProxyRetryAttempts.value++ + localSrc.value = buildProxyRetryUrl(props.mediaSrc) reloadVideoPlayer(true) - triedToLoadWithProxy.value = true return } @@ -315,11 +326,11 @@ !isAnimatedMediaPlaying.value && target.src === localPosterSrc.value && // - !triedToLoadPosterWithProxy.value + posterProxyRetryAttempts.value < maxProxyRetryAttempts ) { - localPosterSrc.value = proxyUrl(props.mediaPosterSrc) + posterProxyRetryAttempts.value++ + localPosterSrc.value = buildProxyRetryUrl(props.mediaPosterSrc) - triedToLoadPosterWithProxy.value = true return } @@ -327,11 +338,11 @@ if ( isAnimatedMediaPlaying.value && // - !triedToLoadWithProxy.value + mediaProxyRetryAttempts.value < maxProxyRetryAttempts ) { - localSrc.value = proxyUrl(props.mediaSrc) + mediaProxyRetryAttempts.value++ + localSrc.value = buildProxyRetryUrl(props.mediaSrc) - triedToLoadWithProxy.value = true return } } @@ -341,8 +352,8 @@ function manuallyReloadMedia() { // Reset state - triedToLoadWithProxy.value = false - triedToLoadPosterWithProxy.value = false + mediaProxyRetryAttempts.value = 0 + posterProxyRetryAttempts.value = 0 error.value = null // Reload media