wip: refactor(client): migrate components to composition api

This commit is contained in:
syuilo 2022-01-16 08:24:53 +09:00
parent bf51450647
commit ed5c918d70
3 changed files with 86 additions and 123 deletions

View file

@ -36,7 +36,8 @@ const active = $computed(() => {
}); });
function onContextmenu(ev) { function onContextmenu(ev) {
if (window.getSelection().toString() !== '') return; const selection = window.getSelection();
if (selection && selection.toString() !== '') return;
os.contextMenu([{ os.contextMenu([{
type: 'label', type: 'label',
text: props.to, text: props.to,
@ -73,7 +74,7 @@ function onContextmenu(ev) {
}], ev); }], ev);
} }
function window() { function openWindow() {
os.pageWindow(props.to); os.pageWindow(props.to);
} }
@ -93,7 +94,7 @@ function nav() {
if (props.behavior) { if (props.behavior) {
if (props.behavior === 'window') { if (props.behavior === 'window') {
return window(); return openWindow();
} else if (props.behavior === 'modalWindow') { } else if (props.behavior === 'modalWindow') {
return modalWindow(); return modalWindow();
} }

View file

@ -6,7 +6,7 @@
<span>{{ $ts.clickToShow }}</span> <span>{{ $ts.clickToShow }}</span>
</div> </div>
<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio"> <div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
<audio ref="audio" <audio ref="audioEl"
class="audio" class="audio"
:src="media.url" :src="media.url"
:title="media.name" :title="media.name"
@ -25,34 +25,26 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { onMounted } from 'vue';
import * as os from '@/os'; import * as misskey from 'misskey-js';
import { ColdDeviceStorage } from '@/store'; import { ColdDeviceStorage } from '@/store';
export default defineComponent({ const props = withDefaults(defineProps<{
props: { media: misskey.entities.DriveFile;
media: { }>(), {
type: Object, });
required: true
const audioEl = $ref<HTMLAudioElement | null>();
let hide = $ref(true);
function volumechange() {
if (audioEl) ColdDeviceStorage.set('mediaVolume', audioEl.volume);
} }
},
data() { onMounted(() => {
return { if (audioEl) audioEl.volume = ColdDeviceStorage.get('mediaVolume');
hide: true, });
};
},
mounted() {
const audioTag = this.$refs.audio as HTMLAudioElement;
if (audioTag) audioTag.volume = ColdDeviceStorage.get('mediaVolume');
},
methods: {
volumechange() {
const audioTag = this.$refs.audio as HTMLAudioElement;
ColdDeviceStorage.set('mediaVolume', audioTag.volume);
},
},
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View file

@ -4,7 +4,7 @@
<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 /> <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>
<div v-else-if="tweetId && tweetExpanded" ref="twitter" class="twitter"> <div v-else-if="tweetId && tweetExpanded" ref="twitter" class="twitter">
<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', left: `${tweetLeft}px`, width: `${tweetLeft < 0 ? 'auto' : '100%'}`, height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${$store.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe> <iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${$store.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
</div> </div>
<div v-else v-size="{ max: [400, 350] }" class="mk-url-preview"> <div v-else v-size="{ max: [400, 350] }" class="mk-url-preview">
<transition name="zoom" mode="out-in"> <transition name="zoom" mode="out-in">
@ -32,64 +32,44 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { onMounted, onUnmounted } from 'vue';
import { url as local, lang } from '@/config'; import { url as local, lang } from '@/config';
import * as os from '@/os';
export default defineComponent({ const props = withDefaults(defineProps<{
props: { url: string;
url: { detail?: boolean;
type: String, compact?: boolean;
require: true }>(), {
}, detail: false,
compact: false,
});
detail: { const self = props.url.startsWith(local);
type: Boolean, const attr = self ? 'to' : 'href';
required: false, const target = self ? null : '_blank';
default: false let fetching = $ref(true);
}, let title = $ref<string | null>(null);
let description = $ref<string | null>(null);
compact: { let thumbnail = $ref<string | null>(null);
type: Boolean, let icon = $ref<string | null>(null);
required: false, let sitename = $ref<string | null>(null);
default: false let player = $ref({
},
},
data() {
const self = this.url.startsWith(local);
return {
local,
fetching: true,
title: null,
description: null,
thumbnail: null,
icon: null,
sitename: null,
player: {
url: null, url: null,
width: null, width: null,
height: null height: null
}, });
tweetId: null, let playerEnabled = $ref(false);
tweetExpanded: this.detail, let tweetId = $ref<string | null>(null);
embedId: `embed${Math.random().toString().replace(/\D/,'')}`, let tweetExpanded = $ref(props.detail);
tweetHeight: 150, const embedId = `embed${Math.random().toString().replace(/\D/,'')}`;
tweetLeft: 0, let tweetHeight = $ref(150);
playerEnabled: false,
self: self,
attr: self ? 'to' : 'href',
target: self ? null : '_blank',
};
},
created() { const requestUrl = new URL(props.url);
const requestUrl = new URL(this.url);
if (requestUrl.hostname == 'twitter.com') { if (requestUrl.hostname == 'twitter.com') {
const m = requestUrl.pathname.match(/^\/.+\/status(?:es)?\/(\d+)/); const m = requestUrl.pathname.match(/^\/.+\/status(?:es)?\/(\d+)/);
if (m) this.tweetId = m[1]; if (m) tweetId = m[1];
} }
if (requestUrl.hostname === 'music.youtube.com' && requestUrl.pathname.match('^/(?:watch|channel)')) { if (requestUrl.hostname === 'music.youtube.com' && requestUrl.pathname.match('^/(?:watch|channel)')) {
@ -103,39 +83,29 @@ export default defineComponent({
fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => { fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => {
res.json().then(info => { res.json().then(info => {
if (info.url == null) return; if (info.url == null) return;
this.title = info.title; title = info.title;
this.description = info.description; description = info.description;
this.thumbnail = info.thumbnail; thumbnail = info.thumbnail;
this.icon = info.icon; icon = info.icon;
this.sitename = info.sitename; sitename = info.sitename;
this.fetching = false; fetching = false;
this.player = info.player; player = info.player;
}) })
}); });
(window as any).addEventListener('message', this.adjustTweetHeight); function adjustTweetHeight(message: any) {
},
mounted() {
// 300px
const areaWidth = (this.$el as any)?.clientWidth;
if (areaWidth && areaWidth < 300) this.tweetLeft = areaWidth - 241;
},
beforeUnmount() {
(window as any).removeEventListener('message', this.adjustTweetHeight);
},
methods: {
adjustTweetHeight(message: any) {
if (message.origin !== 'https://platform.twitter.com') return; if (message.origin !== 'https://platform.twitter.com') return;
const embed = message.data?.['twttr.embed']; const embed = message.data?.['twttr.embed'];
if (embed?.method !== 'twttr.private.resize') return; if (embed?.method !== 'twttr.private.resize') return;
if (embed?.id !== this.embedId) return; if (embed?.id !== embedId) return;
const height = embed?.params[0]?.height; const height = embed?.params[0]?.height;
if (height) this.tweetHeight = height; if (height) tweetHeight = height;
}, }
},
(window as any).addEventListener('message', adjustTweetHeight);
onUnmounted(() => {
(window as any).removeEventListener('message', adjustTweetHeight);
}); });
</script> </script>