{#if $slideshowState === SlideshowState.None && !isShowEditor}

($slideshowState = SlideshowState.PlaySlideshow)} onShowDetail={toggleDetailPanel} onClose={closeViewer} > {#snippet motionPhoto()} (shouldPlayMotionPhoto = shouldPlay)} /> {/snippet}

{/if} {#if $slideshowState === SlideshowState.None && showNavigation && !isShowEditor}

navigateAsset('previous')} />

{/if}

{#if $slideshowState != SlideshowState.None}

assetViewerHtmlElement?.requestFullscreen?.()} onPrevious={() => navigateAsset('previous')} onNext={() => navigateAsset('next')} onClose={() => ($slideshowState = SlideshowState.StopSlideshow)} />

{/if} {#if previewStackedAsset} {#key previewStackedAsset.id} {#if previewStackedAsset.type === AssetTypeEnum.Image} navigateAsset('previous')} onNextAsset={() => navigateAsset('next')} onClose={closeViewer} haveFadeTransition={false} {sharedLink} /> {:else} navigateAsset('previous')} onNextAsset={() => navigateAsset('next')} onClose={closeViewer} onVideoEnded={() => navigateAsset()} onVideoStarted={handleVideoStarted} /> {/if} {/key} {:else} {#key asset.id} {#if asset.type === AssetTypeEnum.Image} {#if shouldPlayMotionPhoto && asset.livePhotoVideoId} navigateAsset('previous')} onNextAsset={() => navigateAsset('next')} onVideoEnded={() => (shouldPlayMotionPhoto = false)} /> {:else if asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR || (asset.originalPath && asset.originalPath .toLowerCase() .endsWith('.insp'))} {:else if isShowEditor && selectedEditType === 'crop'} {:else} navigateAsset('previous')} onNextAsset={() => navigateAsset('next')} onClose={closeViewer} {sharedLink} haveFadeTransition={$slideshowState === SlideshowState.None || $slideshowTransition} /> {/if} {:else} navigateAsset('previous')} onNextAsset={() => navigateAsset('next')} onClose={closeViewer} onVideoEnded={() => navigateAsset()} onVideoStarted={handleVideoStarted} /> {/if} {#if $slideshowState === SlideshowState.None && isShared && ((album && album.isActivityEnabled) || numberOfComments > 0)}

{/if} {/key} {/if}

{#if $slideshowState === SlideshowState.None && showNavigation && !isShowEditor}

navigateAsset('next')} />

{/if} {#if enableDetailPanel && $slideshowState === SlideshowState.None && $isShowDetail && !isShowEditor}

($isShowDetail = false)} />

{/if} {#if isShowEditor}

{/if} {#if stack && withStacked} {@const stackedAssets = stack.assets}

{#each stackedAssets as stackedAsset (stackedAsset.id)}

{ asset = stackedAsset; }} onMouseEvent={({ isMouseOver }) => handleStackedAssetMouseEvent(isMouseOver, stackedAsset)} disableMouseOver readonly thumbnailSize={stackedAsset.id == asset.id ? 65 : 60} showStackedIcon={false} /> {#if stackedAsset.id == asset.id}

{/if}

{/each}

{/if} {#if isShared && album && isShowActivity && $user}

(isLiked = null)} onClose={() => (isShowActivity = false)} />

{/if}