diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 88394c2ab..23a606366 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -334,6 +334,7 @@ common/views/pages/explore.vue: common/views/components/url-preview.vue: enable-player: "プレイヤーを開く" + disable-player: "プレイヤーを閉じる" common/views/components/user-list.vue: no-users: "ユーザーがいません" diff --git a/src/client/app/common/views/components/url-preview.vue b/src/client/app/common/views/components/url-preview.vue index af629c4b0..af5f3e4eb 100644 --- a/src/client/app/common/views/components/url-preview.vue +++ b/src/client/app/common/views/components/url-preview.vue @@ -1,5 +1,6 @@ <template> <div v-if="playerEnabled" class="player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`"> + <button class="disablePlayer" @click="playerEnabled = false" :title="$t('disable-player')"><fa icon="times"/></button> <iframe :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen /> </div> <div v-else-if="tweetUrl && detail" class="twitter"> @@ -126,6 +127,22 @@ export default Vue.extend({ position relative width 100% + > button + position absolute + top -1.5em + right 0 + font-size 1em + width 1.5em + height 1.5em + padding 0 + margin 0 + color var(--text) + background rgba(128, 128, 128, 0.2) + opacity 0.7 + + &:hover + opacity 0.9 + > iframe height 100% left 0