diff --git a/locales/en-US.yml b/locales/en-US.yml index 03ec9284ba..e9580b9d51 100644 --- a/locales/en-US.yml +++ b/locales/en-US.yml @@ -941,6 +941,7 @@ deleteAccountConfirm: "This will irreversibly delete your account. Proceed?" incorrectPassword: "Incorrect password." voteConfirm: "Confirm your vote for \"{choice}\"?" hide: "Hide" +alt: "ALT" leaveGroup: "Leave group" leaveGroupConfirm: "Are you sure you want to leave \"{name}\"?" useDrawerReactionPickerForMobile: "Display reaction picker as drawer on mobile" diff --git a/packages/client/src/components/MkMediaImage.vue b/packages/client/src/components/MkMediaImage.vue index 9097a4771c..df2c75e14c 100644 --- a/packages/client/src/components/MkMediaImage.vue +++ b/packages/client/src/components/MkMediaImage.vue @@ -16,24 +16,33 @@
- +
GIF
- +
+ + +
@@ -44,6 +53,8 @@ import { getStaticImageUrl } from "@/scripts/get-static-image-url"; import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue"; import { defaultStore } from "@/store"; import { i18n } from "@/i18n"; +import * as os from "@/os"; + const props = defineProps<{ image: misskey.entities.DriveFile; @@ -59,6 +70,13 @@ const url = ? getStaticImageUrl(props.image.thumbnailUrl) : props.image.thumbnailUrl; +function captionPopup() { + os.alert({ + type: "info", + text: props.image.comment + }) +} + // Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする watch( () => props.image, @@ -110,22 +128,22 @@ watch( position: relative; background: var(--bg); - > .hide { - display: block; + > .buttons { + display: flex; + gap: 4px; position: absolute; border-radius: 6px; - background-color: var(--accentedBg); - -webkit-backdrop-filter: var(--blur, blur(15px)); - backdrop-filter: var(--blur, blur(15px)); - color: var(--accent); - font-size: 0.8em; - padding: 6px 8px; - text-align: center; + overflow: hidden; top: 12px; right: 12px; - - > i { - display: block; + > * { + background-color: var(--accentedBg); + -webkit-backdrop-filter: var(--blur, blur(15px)); + backdrop-filter: var(--blur, blur(15px)); + color: var(--accent); + font-size: 0.8em; + padding: 6px 8px; + text-align: center; } } diff --git a/packages/client/src/components/MkMediaVideo.vue b/packages/client/src/components/MkMediaVideo.vue index 21f8aceddf..f743b1359b 100644 --- a/packages/client/src/components/MkMediaVideo.vue +++ b/packages/client/src/components/MkMediaVideo.vue @@ -32,7 +32,6 @@ > - +
+ + +
@@ -58,6 +67,7 @@ import type * as misskey from "calckey-js"; import { defaultStore } from "@/store"; import "vue-plyr/dist/vue-plyr.css"; import { i18n } from "@/i18n"; +import * as os from "@/os"; const props = defineProps<{ video: misskey.entities.DriveFile; @@ -72,6 +82,13 @@ const hide = ref( : props.video.isSensitive && defaultStore.state.nsfw !== "ignore" ); +function captionPopup() { + os.alert({ + type: "info", + text: props.video.comment + }) +} + onMounted(() => { mini.value = plyr.value.player.media.scrollWidth < 300; if (mini.value) { @@ -87,22 +104,22 @@ onMounted(() => { position: relative; --plyr-color-main: var(--accent); - > .hide { - display: block; + > .buttons { + display: flex; + gap: 4px; position: absolute; border-radius: 6px; - background-color: var(--accentedBg); - -webkit-backdrop-filter: var(--blur, blur(15px)); - backdrop-filter: var(--blur, blur(15px)); - color: var(--accent); - font-size: 0.8em; - padding: 6px 8px; - text-align: center; + overflow: hidden; top: 12px; right: 12px; - - > i { - display: block; + > * { + background-color: var(--accentedBg); + -webkit-backdrop-filter: var(--blur, blur(15px)); + backdrop-filter: var(--blur, blur(15px)); + color: var(--accent); + font-size: 0.8em; + padding: 6px 8px; + text-align: center; } }