feat(ui): improve gif support (#2752)

This commit is contained in:
lazzzis 2024-04-04 03:27:52 -07:00 committed by GitHub
parent 7dcafa3fe0
commit 8f04ea8eee
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 31 additions and 5 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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,

View file

@ -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",

View file

@ -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')"