mirror of
https://github.com/elk-zone/elk.git
synced 2024-09-06 12:19:08 +01:00
feat(ui): improve gif support (#2752)
This commit is contained in:
parent
7dcafa3fe0
commit
8f04ea8eee
5 changed files with 31 additions and 5 deletions
|
@ -36,6 +36,8 @@ const isPinching = ref(false)
|
|||
const maxZoomOut = ref(1)
|
||||
const isZoomedIn = computed(() => scale.value > 1)
|
||||
|
||||
const enableAutoplay = usePreferences('enableAutoplay')
|
||||
|
||||
function goToFocusedSlide() {
|
||||
scale.value = 1
|
||||
x.value = slide.value[modelValue.value].offsetLeft * scale.value
|
||||
|
@ -264,8 +266,12 @@ const imageStyle = computed(() => ({
|
|||
items-center
|
||||
justify-center
|
||||
>
|
||||
<img
|
||||
<component
|
||||
:is="item.type === 'gifv' ? 'video' : 'img'"
|
||||
ref="image"
|
||||
:autoplay="enableAutoplay"
|
||||
controls
|
||||
loop
|
||||
select-none
|
||||
max-w-full
|
||||
max-h-full
|
||||
|
@ -273,7 +279,7 @@ const imageStyle = computed(() => ({
|
|||
:draggable="false"
|
||||
:src="item.url || item.previewUrl"
|
||||
:alt="item.description || ''"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -68,6 +68,7 @@ const video = ref<HTMLVideoElement | undefined>()
|
|||
const prefersReducedMotion = usePreferredReducedMotion()
|
||||
const isAudio = computed(() => attachment.type === 'audio')
|
||||
const isVideo = computed(() => attachment.type === 'video')
|
||||
const isGif = computed(() => attachment.type === 'gifv')
|
||||
|
||||
const enableAutoplay = usePreferences('enableAutoplay')
|
||||
|
||||
|
@ -164,7 +165,7 @@ watch(shouldLoadAttachment, () => {
|
|||
<button
|
||||
type="button"
|
||||
relative
|
||||
@click="!shouldLoadAttachment ? loadAttachment() : null"
|
||||
@click="!shouldLoadAttachment ? loadAttachment() : openMediaPreview(attachments ? attachments : [attachment], attachments?.indexOf(attachment) || 0)"
|
||||
>
|
||||
<video
|
||||
ref="video"
|
||||
|
@ -248,12 +249,13 @@ watch(shouldLoadAttachment, () => {
|
|||
</button>
|
||||
</template>
|
||||
<div
|
||||
v-if="attachment.description && !getPreferences(userSettings, 'hideAltIndicatorOnPosts')" :class="isAudio ? [] : [
|
||||
:class="isAudio ? [] : [
|
||||
'absolute left-2',
|
||||
isVideo ? 'top-2' : 'bottom-2',
|
||||
]"
|
||||
flex gap-col-2
|
||||
>
|
||||
<VDropdown :distance="6" placement="bottom-start">
|
||||
<VDropdown v-if="attachment.description && !getPreferences(userSettings, 'hideAltIndicatorOnPosts')" :distance="6" placement="bottom-start">
|
||||
<button
|
||||
font-bold text-sm
|
||||
:class="isAudio
|
||||
|
@ -281,6 +283,14 @@ watch(shouldLoadAttachment, () => {
|
|||
</div>
|
||||
</template>
|
||||
</VDropdown>
|
||||
<div v-if="isGif && !getPreferences(userSettings, 'hideGifIndicatorOnPosts')">
|
||||
<button
|
||||
aria-hidden font-bold text-sm
|
||||
rounded-1 bg-black:65 text-white px1.2 py0.2 pointer-events-none
|
||||
>
|
||||
{{ $t('status.gif') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -9,6 +9,7 @@ export type ColorMode = 'light' | 'dark' | 'system'
|
|||
|
||||
export interface PreferencesSettings {
|
||||
hideAltIndicatorOnPosts: boolean
|
||||
hideGifIndicatorOnPosts: boolean
|
||||
hideBoostCount: boolean
|
||||
hideReplyCount: boolean
|
||||
hideFavoriteCount: boolean
|
||||
|
@ -64,6 +65,7 @@ export function getDefaultLanguage(languages: string[]) {
|
|||
|
||||
export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
|
||||
hideAltIndicatorOnPosts: false,
|
||||
hideGifIndicatorOnPosts: false,
|
||||
hideBoostCount: false,
|
||||
hideReplyCount: false,
|
||||
hideFavoriteCount: false,
|
||||
|
|
|
@ -542,6 +542,7 @@
|
|||
"hide_boost_count": "Hide boost count",
|
||||
"hide_favorite_count": "Hide favorite count",
|
||||
"hide_follower_count": "Hide following/follower count",
|
||||
"hide_gif_indi_on_posts": "Hide gif indicator on posts",
|
||||
"hide_news": "Hide news",
|
||||
"hide_reply_count": "Hide reply count",
|
||||
"hide_tag_hover_card": "Hide tag hover card",
|
||||
|
@ -614,6 +615,7 @@
|
|||
"favourited_by": "Favorited By",
|
||||
"filter_hidden_phrase": "Filtered by",
|
||||
"filter_show_anyway": "Show anyway",
|
||||
"gif": "GIF",
|
||||
"img_alt": {
|
||||
"ALT": "ALT",
|
||||
"desc": "Description",
|
||||
|
|
|
@ -21,6 +21,12 @@ const userSettings = useUserSettings()
|
|||
>
|
||||
{{ $t('settings.preferences.hide_alt_indi_on_posts') }}
|
||||
</SettingsToggleItem>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'hideGifIndicatorOnPosts')"
|
||||
@click="togglePreferences('hideGifIndicatorOnPosts')"
|
||||
>
|
||||
{{ $t('settings.preferences.hide_gif_indi_on_posts') }}
|
||||
</SettingsToggleItem>
|
||||
<SettingsToggleItem
|
||||
:checked="getPreferences(userSettings, 'hideAccountHoverCard')"
|
||||
@click="togglePreferences('hideAccountHoverCard')"
|
||||
|
|
Loading…
Reference in a new issue