wip
This commit is contained in:
parent
538bba080f
commit
979f91bd34
5 changed files with 138 additions and 35 deletions
|
@ -104,11 +104,19 @@ export default defineComponent({
|
||||||
type: String,
|
type: String,
|
||||||
required: false
|
required: false
|
||||||
},
|
},
|
||||||
|
initialVisibility: {
|
||||||
|
type: String,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
initialFiles: {
|
||||||
|
type: Array,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
initialNote: {
|
initialNote: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: false
|
required: false
|
||||||
},
|
},
|
||||||
instant: {
|
share: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: false,
|
required: false,
|
||||||
default: false
|
default: false
|
||||||
|
@ -136,7 +144,7 @@ export default defineComponent({
|
||||||
useCw: false,
|
useCw: false,
|
||||||
cw: null,
|
cw: null,
|
||||||
localOnly: this.$store.state.rememberNoteVisibility ? this.$store.state.localOnly : this.$store.state.defaultNoteLocalOnly,
|
localOnly: this.$store.state.rememberNoteVisibility ? this.$store.state.localOnly : this.$store.state.defaultNoteLocalOnly,
|
||||||
visibility: this.$store.state.rememberNoteVisibility ? this.$store.state.visibility : this.$store.state.defaultNoteVisibility,
|
visibility: (this.$store.state.rememberNoteVisibility ? this.$store.state.visibility : this.$store.state.defaultNoteVisibility) as typeof noteVisibilities[number],
|
||||||
visibleUsers: [],
|
visibleUsers: [],
|
||||||
autocomplete: null,
|
autocomplete: null,
|
||||||
draghover: false,
|
draghover: false,
|
||||||
|
@ -212,6 +220,14 @@ export default defineComponent({
|
||||||
this.text = this.initialText;
|
this.text = this.initialText;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.initialVisibility) {
|
||||||
|
this.visibility = this.initialVisibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.initialFiles) {
|
||||||
|
this.files = this.initialFiles;
|
||||||
|
}
|
||||||
|
|
||||||
if (this.mention) {
|
if (this.mention) {
|
||||||
this.text = this.mention.host ? `@${this.mention.username}@${toASCII(this.mention.host)}` : `@${this.mention.username}`;
|
this.text = this.mention.host ? `@${this.mention.username}@${toASCII(this.mention.host)}` : `@${this.mention.username}`;
|
||||||
this.text += ' ';
|
this.text += ' ';
|
||||||
|
@ -286,7 +302,7 @@ export default defineComponent({
|
||||||
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
// 書きかけの投稿を復元
|
// 書きかけの投稿を復元
|
||||||
if (!this.instant && !this.mention && !this.specified) {
|
if (!this.share && !this.mention && !this.specified) {
|
||||||
const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftKey];
|
const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftKey];
|
||||||
if (draft) {
|
if (draft) {
|
||||||
this.text = draft.data.text;
|
this.text = draft.data.text;
|
||||||
|
@ -514,8 +530,6 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
|
|
||||||
saveDraft() {
|
saveDraft() {
|
||||||
if (this.instant) return;
|
|
||||||
|
|
||||||
const data = JSON.parse(localStorage.getItem('drafts') || '{}');
|
const data = JSON.parse(localStorage.getItem('drafts') || '{}');
|
||||||
|
|
||||||
data[this.draftKey] = {
|
data[this.draftKey] = {
|
||||||
|
|
|
@ -3,10 +3,21 @@
|
||||||
<section class="_section">
|
<section class="_section">
|
||||||
<div class="_title" v-if="title">{{ title }}</div>
|
<div class="_title" v-if="title">{{ title }}</div>
|
||||||
<div class="_content">
|
<div class="_content">
|
||||||
<XPostForm v-if="!posted" fixed :instant="true" :initial-text="initialText" @posted="posted = true" class="_panel"/>
|
<XPostForm
|
||||||
<MkButton v-else primary @click="close()">{{ $ts.close }}</MkButton>
|
v-if="state === 'writing'"
|
||||||
|
fixed
|
||||||
|
:share="true"
|
||||||
|
:initial-text="initialText"
|
||||||
|
:initial-visibility="visibility"
|
||||||
|
:initial-files="files"
|
||||||
|
:reply="reply"
|
||||||
|
:renote="renote"
|
||||||
|
:specified="specified"
|
||||||
|
@posted="state = 'posted'"
|
||||||
|
class="_panel"
|
||||||
|
/>
|
||||||
|
<MkButton v-else-if="state === 'posted'" primary @click="close()">{{ $ts.close }}</MkButton>
|
||||||
</div>
|
</div>
|
||||||
<div class="_footer" v-if="url">{{ url }}</div>
|
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -17,6 +28,7 @@ import { faShareAlt } from '@fortawesome/free-solid-svg-icons';
|
||||||
import MkButton from '@/components/ui/button.vue';
|
import MkButton from '@/components/ui/button.vue';
|
||||||
import XPostForm from '@/components/post-form.vue';
|
import XPostForm from '@/components/post-form.vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
|
import { noteVisibilities } from '../../types';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
|
@ -30,27 +42,88 @@ export default defineComponent({
|
||||||
title: this.$ts.share,
|
title: this.$ts.share,
|
||||||
icon: faShareAlt
|
icon: faShareAlt
|
||||||
},
|
},
|
||||||
title: null,
|
state: 'fetching' as 'fetching' | 'writing' | 'posted',
|
||||||
text: null,
|
|
||||||
url: null,
|
title: null as string | null,
|
||||||
initialText: null,
|
initialText: null as string | null,
|
||||||
posted: false,
|
reply: null as any,
|
||||||
|
renote: null as any,
|
||||||
|
specified: null as any,
|
||||||
|
visibility: null as string | null,
|
||||||
|
files: null as any[] | null,
|
||||||
|
|
||||||
faShareAlt
|
faShareAlt
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
created() {
|
async created() {
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
this.title = urlParams.get('title');
|
|
||||||
this.text = urlParams.get('text');
|
|
||||||
this.url = urlParams.get('url');
|
|
||||||
|
|
||||||
let text = '';
|
this.title = urlParams.get('title');
|
||||||
if (this.title) text += `【${this.title}】\n`;
|
const text = urlParams.get('text');
|
||||||
if (this.text) text += `${this.text}\n`;
|
const url = urlParams.get('url');
|
||||||
if (this.url) text += `${this.url}`;
|
|
||||||
this.initialText = text.trim();
|
let noteText = '';
|
||||||
|
if (this.title) noteText += `【${this.title}】\n`;
|
||||||
|
// titleとtext(またはtext. Googleニュースがこれを吐く)が同一であればtextを省略
|
||||||
|
if (text && this.title !== text && this.title !== `${text}.`) noteText += `${text}\n`;
|
||||||
|
if (url) noteText += `${url}`;
|
||||||
|
this.initialText = noteText.trim();
|
||||||
|
|
||||||
|
this.visibility = urlParams.get('visibility');
|
||||||
|
if (!noteVisibilities.includes(this.visibility)) this.visibility = null;
|
||||||
|
|
||||||
|
await Promise.all([(async () => {
|
||||||
|
const replyId = urlParams.get('replyId');
|
||||||
|
const replyUri = urlParams.get('replyUri');
|
||||||
|
if (replyId) {
|
||||||
|
this.reply = await os.api('notes/show', {
|
||||||
|
noteId: replyId
|
||||||
|
});
|
||||||
|
} else if (replyUri) {
|
||||||
|
const obj = await os.api('ap/show', {
|
||||||
|
uri: replyUri
|
||||||
|
}) as any;
|
||||||
|
if (obj.type === 'Note') {
|
||||||
|
this.reply = obj.object;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})(),(async () => {
|
||||||
|
const renoteId = urlParams.get('replyId');
|
||||||
|
const renoteUri = urlParams.get('replyUri');
|
||||||
|
if (renoteId) {
|
||||||
|
this.renote = await os.api('notes/show', {
|
||||||
|
noteId: renoteId
|
||||||
|
});
|
||||||
|
} else if (renoteUri) {
|
||||||
|
const obj = await os.api('ap/show', {
|
||||||
|
uri: renoteUri
|
||||||
|
}) as any;
|
||||||
|
if (obj.type === 'Note') {
|
||||||
|
this.renote = obj.object;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})(),(async () => {
|
||||||
|
const specifiedId = urlParams.get('specifiedId');
|
||||||
|
const specifiedUsername = urlParams.get('specifiedUsername');
|
||||||
|
if (specifiedId) {
|
||||||
|
this.specified = await os.api('users/show', {
|
||||||
|
userId: specifiedId
|
||||||
|
});
|
||||||
|
} else if (specifiedUsername) {
|
||||||
|
this.specified = await os.api('users/show', {
|
||||||
|
username: specifiedUsername
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})(),(async () => {
|
||||||
|
const fileIds = urlParams.get('fileIds');
|
||||||
|
if (fileIds) {
|
||||||
|
const promises = Promise.all(fileIds.split(',').map(fileId => os.api('drive/files/show', { fileId })));
|
||||||
|
promises.then(files => this.files = files).catch(() => console.error('invalid fileIds'));
|
||||||
|
}
|
||||||
|
})(),]);
|
||||||
|
|
||||||
|
this.state = 'writing';
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
|
|
@ -17,7 +17,7 @@ export async function initializeSw() {
|
||||||
});
|
});
|
||||||
// SEE: https://developer.mozilla.org/en-US/docs/Web/API/PushManager/subscribe#Parameters
|
// SEE: https://developer.mozilla.org/en-US/docs/Web/API/PushManager/subscribe#Parameters
|
||||||
registration.pushManager.subscribe({
|
registration.pushManager.subscribe({
|
||||||
userVisibleOnly: true,
|
userVisibleOnly: false,
|
||||||
applicationServerKey: urlBase64ToUint8Array(instance.swPublickey)
|
applicationServerKey: urlBase64ToUint8Array(instance.swPublickey)
|
||||||
}).then(subscription => {
|
}).then(subscription => {
|
||||||
function encode(buffer: ArrayBuffer | null) {
|
function encode(buffer: ArrayBuffer | null) {
|
||||||
|
|
|
@ -46,54 +46,63 @@ async function composeNotification(data: pushNotificationData): Promise<[string,
|
||||||
case 'reply':
|
case 'reply':
|
||||||
return [t('_notification.youGotReply', { name: getUserName(data.body.user) }), {
|
return [t('_notification.youGotReply', { name: getUserName(data.body.user) }), {
|
||||||
body: getNoteSummary(data.body.note, i18n.locale),
|
body: getNoteSummary(data.body.note, i18n.locale),
|
||||||
icon: data.body.user.avatarUrl
|
icon: data.body.user.avatarUrl,
|
||||||
|
data,
|
||||||
}];
|
}];
|
||||||
|
|
||||||
case 'renote':
|
case 'renote':
|
||||||
return [t('_notification.youRenoted', { name: getUserName(data.body.user) }), {
|
return [t('_notification.youRenoted', { name: getUserName(data.body.user) }), {
|
||||||
body: getNoteSummary(data.body.note, i18n.locale),
|
body: getNoteSummary(data.body.note, i18n.locale),
|
||||||
icon: data.body.user.avatarUrl
|
icon: data.body.user.avatarUrl,
|
||||||
|
data,
|
||||||
}];
|
}];
|
||||||
|
|
||||||
case 'quote':
|
case 'quote':
|
||||||
return [t('_notification.youGotQuote', { name: getUserName(data.body.user) }), {
|
return [t('_notification.youGotQuote', { name: getUserName(data.body.user) }), {
|
||||||
body: getNoteSummary(data.body.note, i18n.locale),
|
body: getNoteSummary(data.body.note, i18n.locale),
|
||||||
icon: data.body.user.avatarUrl
|
icon: data.body.user.avatarUrl,
|
||||||
|
data,
|
||||||
}];
|
}];
|
||||||
|
|
||||||
case 'reaction':
|
case 'reaction':
|
||||||
return [`${data.body.reaction} ${getUserName(data.body.user)}`, {
|
return [`${data.body.reaction} ${getUserName(data.body.user)}`, {
|
||||||
body: getNoteSummary(data.body.note, i18n.locale),
|
body: getNoteSummary(data.body.note, i18n.locale),
|
||||||
icon: data.body.user.avatarUrl
|
icon: data.body.user.avatarUrl,
|
||||||
|
data,
|
||||||
}];
|
}];
|
||||||
|
|
||||||
case 'pollVote':
|
case 'pollVote':
|
||||||
return [t('_notification.youGotPoll', { name: getUserName(data.body.user) }), {
|
return [t('_notification.youGotPoll', { name: getUserName(data.body.user) }), {
|
||||||
body: getNoteSummary(data.body.note, i18n.locale),
|
body: getNoteSummary(data.body.note, i18n.locale),
|
||||||
icon: data.body.user.avatarUrl
|
icon: data.body.user.avatarUrl,
|
||||||
|
data,
|
||||||
}];
|
}];
|
||||||
|
|
||||||
case 'follow':
|
case 'follow':
|
||||||
return [t('_notification.youWereFollowed'), {
|
return [t('_notification.youWereFollowed'), {
|
||||||
body: getUserName(data.body.user),
|
body: getUserName(data.body.user),
|
||||||
icon: data.body.user.avatarUrl
|
icon: data.body.user.avatarUrl,
|
||||||
|
data,
|
||||||
}];
|
}];
|
||||||
|
|
||||||
case 'receiveFollowRequest':
|
case 'receiveFollowRequest':
|
||||||
return [t('_notification.youReceivedFollowRequest'), {
|
return [t('_notification.youReceivedFollowRequest'), {
|
||||||
body: getUserName(data.body.user),
|
body: getUserName(data.body.user),
|
||||||
icon: data.body.user.avatarUrl
|
icon: data.body.user.avatarUrl,
|
||||||
|
data,
|
||||||
}];
|
}];
|
||||||
|
|
||||||
case 'followRequestAccepted':
|
case 'followRequestAccepted':
|
||||||
return [t('_notification.yourFollowRequestAccepted'), {
|
return [t('_notification.yourFollowRequestAccepted'), {
|
||||||
body: getUserName(data.body.user),
|
body: getUserName(data.body.user),
|
||||||
icon: data.body.user.avatarUrl
|
icon: data.body.user.avatarUrl,
|
||||||
|
data,
|
||||||
}];
|
}];
|
||||||
|
|
||||||
case 'groupInvited':
|
case 'groupInvited':
|
||||||
return [t('_notification.youWereInvitedToGroup'), {
|
return [t('_notification.youWereInvitedToGroup'), {
|
||||||
body: data.body.group.name
|
body: data.body.group.name,
|
||||||
|
data,
|
||||||
}];
|
}];
|
||||||
|
|
||||||
default:
|
default:
|
||||||
|
@ -103,12 +112,14 @@ async function composeNotification(data: pushNotificationData): Promise<[string,
|
||||||
if (data.body.groupId === null) {
|
if (data.body.groupId === null) {
|
||||||
return [t('_notification.youGotMessagingMessageFromUser', { name: getUserName(data.body.user) }), {
|
return [t('_notification.youGotMessagingMessageFromUser', { name: getUserName(data.body.user) }), {
|
||||||
icon: data.body.user.avatarUrl,
|
icon: data.body.user.avatarUrl,
|
||||||
tag: `messaging:user:${data.body.user.id}`
|
tag: `messaging:user:${data.body.user.id}`,
|
||||||
|
data,
|
||||||
}];
|
}];
|
||||||
}
|
}
|
||||||
return [t('_notification.youGotMessagingMessageFromGroup', { name: data.body.group.name }), {
|
return [t('_notification.youGotMessagingMessageFromGroup', { name: data.body.group.name }), {
|
||||||
icon: data.body.user.avatarUrl,
|
icon: data.body.user.avatarUrl,
|
||||||
tag: `messaging:group:${data.body.group.id}`
|
tag: `messaging:group:${data.body.group.id}`,
|
||||||
|
data,
|
||||||
}];
|
}];
|
||||||
default:
|
default:
|
||||||
return null;
|
return null;
|
||||||
|
|
|
@ -58,9 +58,11 @@ self.addEventListener('push', ev => {
|
||||||
|
|
||||||
const data: pushNotificationData = ev.data?.json();
|
const data: pushNotificationData = ev.data?.json();
|
||||||
|
|
||||||
|
console.log('push', data)
|
||||||
|
|
||||||
switch (data.type) {
|
switch (data.type) {
|
||||||
case 'notification':
|
|
||||||
// case 'driveFileCreated':
|
// case 'driveFileCreated':
|
||||||
|
case 'notification':
|
||||||
case 'unreadMessagingMessage':
|
case 'unreadMessagingMessage':
|
||||||
return createNotification(data);
|
return createNotification(data);
|
||||||
case 'readAllNotifications':
|
case 'readAllNotifications':
|
||||||
|
@ -83,6 +85,7 @@ self.addEventListener('push', ev => {
|
||||||
//#region Notification
|
//#region Notification
|
||||||
self.addEventListener('notificationclick', ev => {
|
self.addEventListener('notificationclick', ev => {
|
||||||
const { action, notification } = ev;
|
const { action, notification } = ev;
|
||||||
|
console.log('click', action, notification)
|
||||||
const data: pushNotificationData = notification.data;
|
const data: pushNotificationData = notification.data;
|
||||||
const { origin } = location;
|
const { origin } = location;
|
||||||
|
|
||||||
|
@ -110,6 +113,8 @@ self.addEventListener('notificationclick', ev => {
|
||||||
self.addEventListener('notificationclose', ev => {
|
self.addEventListener('notificationclose', ev => {
|
||||||
const { notification } = ev;
|
const { notification } = ev;
|
||||||
|
|
||||||
|
console.log('close', notification)
|
||||||
|
|
||||||
if (notification.title !== 'notificationclose') {
|
if (notification.title !== 'notificationclose') {
|
||||||
self.registration.showNotification('notificationclose', { body: `${notification?.data?.body?.id}` });
|
self.registration.showNotification('notificationclose', { body: `${notification?.data?.body?.id}` });
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue