From 6e6d9f3029dffeba71a7498467edcf8795f33832 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 28 Dec 2022 18:22:46 +0900
Subject: [PATCH] :art:

---
 packages/frontend/src/components/MkButton.vue | 10 ++++--
 .../frontend/src/components/MkUrlPreview.vue  | 33 +++++++++++--------
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue
index 891645bb2a..20bce2104b 100644
--- a/packages/frontend/src/components/MkButton.vue
+++ b/packages/frontend/src/components/MkButton.vue
@@ -2,7 +2,7 @@
 <button
 	v-if="!link"
 	ref="el" class="bghgjjyj _button"
-	:class="{ inline, primary, gradate, danger, rounded, full }"
+	:class="{ inline, primary, gradate, danger, rounded, full, small }"
 	:type="type"
 	@click="emit('click', $event)"
 	@mousedown="onMousedown"
@@ -14,7 +14,7 @@
 </button>
 <MkA
 	v-else class="bghgjjyj _button"
-	:class="{ inline, primary, gradate, danger, rounded, full }"
+	:class="{ inline, primary, gradate, danger, rounded, full, small }"
 	:to="to"
 	@mousedown="onMousedown"
 >
@@ -40,6 +40,7 @@ const props = defineProps<{
 	wait?: boolean;
 	danger?: boolean;
 	full?: boolean;
+	small?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -125,6 +126,11 @@ function onMousedown(evt: MouseEvent): void {
 		background: var(--buttonHoverBg);
 	}
 
+	&.small {
+		font-size: 90%;
+		padding: 6px 12px;
+	}
+
 	&.full {
 		width: 100%;
 	}
diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index 4635537f9a..eb96b729b8 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -10,7 +10,6 @@
 	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
 		<component :is="self ? 'MkA' : 'a'" v-if="!fetching" class="link" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
 			<div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`">
-				<button v-if="!playerEnabled && player.url" class="_button" :title="i18n.ts.enablePlayer" @click.prevent="isMobile? playerEnabled = true : openPlayer()"><i class="ti ti-player-play"></i></button>
 			</div>
 			<article>
 				<header>
@@ -24,10 +23,18 @@
 			</article>
 		</component>
 	</transition>
-	<div v-if="tweetId" class="expandTweet">
-		<a @click="tweetExpanded = true">
+	<div v-if="tweetId" class="action">
+		<MkButton :small="true" inline @click="tweetExpanded = true">
 			<i class="ti ti-brand-twitter"></i> {{ i18n.ts.expandTweet }}
-		</a>
+		</MkButton>
+	</div>
+	<div v-if="!playerEnabled && player.url" class="action">
+		<MkButton :small="true" inline @click="playerEnabled = true">
+			<i class="ti ti-player-play"></i> {{ i18n.ts.enablePlayer }}
+		</MkButton>
+		<MkButton v-if="!isMobile" :small="true" inline @click="openPlayer()">
+			<i class="ti ti-picture-in-picture"></i> {{ i18n.ts.openInWindow }}
+		</MkButton>
 	</div>
 </div>
 </template>
@@ -38,6 +45,7 @@ import { url as local, lang } from '@/config';
 import { i18n } from '@/i18n';
 import * as os from '@/os';
 import { deviceKind } from '@/scripts/device-kind';
+import MkButton from '@/components/MkButton.vue';
 
 const props = withDefaults(defineProps<{
 	url: string;
@@ -181,16 +189,6 @@ onUnmounted(() => {
 			justify-content: center;
 			align-items: center;
 
-			> button {
-				font-size: 3.5em;
-				opacity: 0.7;
-
-				&:hover {
-					font-size: 4em;
-					opacity: 0.9;
-				}
-			}
-
 			& + article {
 				left: 100px;
 				width: calc(100% - 100px);
@@ -249,6 +247,13 @@ onUnmounted(() => {
 			}
 		}
 	}
+
+	> .action {
+		display: flex;
+		gap: 6px;
+		flex-wrap: wrap;
+		margin-top: 6px;
+	}
 }
 
 @container (max-width: 400px) {