natty
/
misskey-awawa
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/client/src/components/global/a.vue
View File

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

46
packages/client/src/components/media-banner.vue
View File

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

136
packages/client/src/components/url-preview.vue
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 />
</div>
<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 v-else v-size="{ max: [400, 350] }" class="mk-url-preview">
<transition name="zoom" mode="out-in">
@ -32,110 +32,80 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { onMounted, onUnmounted } from 'vue';
import { url as local, lang } from '@/config';
import * as os from '@/os';
export default defineComponent({
props: {
url: {
type: String,
require: true
},
const props = withDefaults(defineProps<{
url: string;
detail?: boolean;
compact?: boolean;
}>(), {
detail: false,
compact: false,
});
detail: {
type: Boolean,
required: false,
default: false
},
compact: {
type: Boolean,
required: false,
default: false
},
},
data() {
const self = this.url.startsWith(local);
return {
local,
fetching: true,
title: null,
description: null,
thumbnail: null,
icon: null,
sitename: null,
player: {
const self = props.url.startsWith(local);
const attr = self ? 'to' : 'href';
const target = self ? null : '_blank';
let fetching = $ref(true);
let title = $ref<string | null>(null);
let description = $ref<string | null>(null);
let thumbnail = $ref<string | null>(null);
let icon = $ref<string | null>(null);
let sitename = $ref<string | null>(null);
let player = $ref({
url: null,
width: null,
height: null
},
tweetId: null,
tweetExpanded: this.detail,
embedId: `embed${Math.random().toString().replace(/\D/,'')}`,
tweetHeight: 150,
tweetLeft: 0,
playerEnabled: false,
self: self,
attr: self ? 'to' : 'href',
target: self ? null : '_blank',
};
},
});
let playerEnabled = $ref(false);
let tweetId = $ref<string | null>(null);
let tweetExpanded = $ref(props.detail);
const embedId = `embed${Math.random().toString().replace(/\D/,'')}`;
let tweetHeight = $ref(150);
created() {
const requestUrl = new URL(this.url);
const requestUrl = new URL(props.url);
if (requestUrl.hostname == 'twitter.com') {
if (requestUrl.hostname == 'twitter.com') {
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)')) {
requestUrl.hostname = 'www.youtube.com';
}
}
const requestLang = (lang || 'ja-JP').replace('ja-KS', 'ja-JP');
const requestLang = (lang || 'ja-JP').replace('ja-KS', 'ja-JP');
requestUrl.hash = '';
requestUrl.hash = '';
fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => {
fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => {
res.json().then(info => {
if (info.url == null) return;
this.title = info.title;
this.description = info.description;
this.thumbnail = info.thumbnail;
this.icon = info.icon;
this.sitename = info.sitename;
this.fetching = false;
this.player = info.player;
title = info.title;
description = info.description;
thumbnail = info.thumbnail;
icon = info.icon;
sitename = info.sitename;
fetching = false;
player = info.player;
})
});
});
(window as any).addEventListener('message', this.adjustTweetHeight);
},
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) {
function adjustTweetHeight(message: any) {
if (message.origin !== 'https://platform.twitter.com') return;
const embed = message.data?.['twttr.embed'];
if (embed?.method !== 'twttr.private.resize') return;
if (embed?.id !== this.embedId) return;
if (embed?.id !== embedId) return;
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>