feat: ALT button (#9265)
This commit is contained in:
freeplay
parent
a61054e3f5
commit
88f435015d
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -16,24 +16,33 @@
|
|||
</div>
|
||||
</button>
|
||||
<div v-else class="gqnyydlz">
|
||||
<a :href="image.url" :title="image.name">
|
||||
<a :href="image.url">
|
||||
<ImgWithBlurhash
|
||||
:hash="image.blurhash"
|
||||
:src="url"
|
||||
:alt="image.comment"
|
||||
:type="image.type"
|
||||
:title="image.comment"
|
||||
:cover="false"
|
||||
/>
|
||||
<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
|
||||
</a>
|
||||
<button
|
||||
v-tooltip="i18n.ts.hide"
|
||||
class="_button hide"
|
||||
@click="hide = true"
|
||||
>
|
||||
<i class="ph-eye-slash ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<div class="buttons">
|
||||
<button
|
||||
v-if="image.comment"
|
||||
v-tooltip="i18n.ts.alt"
|
||||
class="_button"
|
||||
@click.stop="captionPopup"
|
||||
>
|
||||
<i class="ph-subtitles ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<button
|
||||
v-tooltip="i18n.ts.hide"
|
||||
class="_button"
|
||||
@click="hide = true"
|
||||
>
|
||||
<i class="ph-eye-slash ph-bold ph-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,6 @@
|
|||
>
|
||||
<video
|
||||
:poster="video.thumbnailUrl"
|
||||
:title="video.comment"
|
||||
:aria-label="video.comment"
|
||||
preload="none"
|
||||
controls
|
||||
|
|
@ -41,13 +40,23 @@
|
|||
<source :src="video.url" :type="video.type" />
|
||||
</video>
|
||||
</VuePlyr>
|
||||
<button
|
||||
v-tooltip="i18n.ts.hide"
|
||||
class="_button hide"
|
||||
@click="hide = true"
|
||||
>
|
||||
<i class="ph-eye-slash ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<div class="buttons">
|
||||
<button
|
||||
v-if="video.comment"
|
||||
v-tooltip="i18n.ts.alt"
|
||||
class="_button"
|
||||
@click.stop="captionPopup"
|
||||
>
|
||||
<i class="ph-subtitles ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<button
|
||||
v-tooltip="i18n.ts.hide"
|
||||
class="_button"
|
||||
@click="hide = true"
|
||||
>
|
||||
<i class="ph-eye-slash ph-bold ph-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue