#ugoira-viewer
canvas.media(
:height='illust?.height',
:width='illust.width'
ref='canvasRef'
v-if='firstLoaded'
)
LazyLoad.media(
:height='illust.height',
:src='illust.urls.regular',
:style='{ cursor: isLoading ? "wait" : "pointer" }',
:width='illust.width'
@click='handleInit(false)'
loading='lazy'
v-else
)
NProgress(
:height='6',
:percentage='+downloadProgress.toFixed(2)',
:processing='isLoading',
:style='{ left: 0, right: 0, position: "absolute", ...(isLoading ? { top: "calc(100% + 4px)", opacity: "1", transitionDuration: "0.25s" } : { top: "calc(100% - 4px)", opacity: "0", transitionDelay: "3s", transitionDuration: "0.5s" }) }'
show-value
status='default'
transition='all ease-in-out'
type='line'
)
NFloatButton(
:bottom='20',
:menu-trigger='"hover"',
:right='20',
:style='{ cursor: isLoading ? "wait" : "pointer", opacity: 0.75 }'
shape='circle'
)
//- button
template(v-if='!firstLoaded')
NSpin(size='small' v-if='isLoading')
NIcon(v-else): IPlay
template(v-else)
NIcon: IDownload
//- menu
template(#menu v-if='!firstLoaded')
NFloatButton(@click='handleInit(true)' title='加载原画' v-if='!isLoading')
IconPhotoSpark
NFloatButton(@click='handleInit(false)' title='加载普通画质')
NSpin(size='small' v-if='isLoading')
IconPhotoScan(v-else)
template(#menu v-if='firstLoaded')
NFloatButton(@click='handleJumpToCover' title='查看封面'): IconPhotoDown
NFloatButton(@click='handleDownloadGif' title='下载GIF')
NSpin(size='small' v-if='isLoadingGif || isLoading')
template(v-else): IconGif
NFloatButton(@click='handleDownloadMp4' title='下载MP4')
NSpin(size='small' v-if='isLoadingMp4 || isLoading')
template(v-else): IconMovie
NFloatButton(@click='handleInit(true)' title='加载原画' v-if='!isHQLoaded')
NSpin(size='small' v-if='isLoading')
template(v-else): IconPhotoSpark
.badge {{ firstLoaded ? (isHQLoaded ? 'HQ' : 'NQ') : 'Cover' }}