feat(client): status bar (experimental)
This commit is contained in:
syuilo
103
packages/client/src/ui/_common_/statusbar-federation.vue
Normal file
103
packages/client/src/ui/_common_/statusbar-federation.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<span v-if="!fetching" class="nmidsaqw">
|
||||
<template v-if="display === 'marquee'">
|
||||
<transition name="change" mode="default">
|
||||
<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
|
||||
<span v-for="instance in instances" :key="instance.id" class="item" :class="{ colored }" :style="{ background: colored ? instance.themeColor : null }">
|
||||
<img v-if="instance.iconUrl" class="icon" :src="instance.iconUrl" alt=""/>
|
||||
<MkA :to="`/instance-info/${instance.host}`" class="host _monospace">
|
||||
{{ instance.host }}
|
||||
</MkA>
|
||||
<span class="divider"></span>
|
||||
</span>
|
||||
</MarqueeText>
|
||||
</transition>
|
||||
</template>
|
||||
<template v-else-if="display === 'oneByOne'">
|
||||
<!-- TODO -->
|
||||
</template>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
|
||||
import * as misskey from 'misskey-js';
|
||||
import MarqueeText from '@/components/marquee.vue';
|
||||
import * as os from '@/os';
|
||||
import { useInterval } from '@/scripts/use-interval';
|
||||
import { getNoteSummary } from '@/scripts/get-note-summary';
|
||||
import { notePage } from '@/filters/note';
|
||||
|
||||
const props = defineProps<{
|
||||
display?: 'marquee' | 'oneByOne';
|
||||
colored?: boolean;
|
||||
marqueeDuration?: number;
|
||||
marqueeReverse?: boolean;
|
||||
oneByOneInterval?: number;
|
||||
refreshIntervalSec?: number;
|
||||
}>();
|
||||
|
||||
const instances = ref<misskey.entities.Instance[]>([]);
|
||||
const fetching = ref(true);
|
||||
let key = $ref(0);
|
||||
|
||||
const tick = () => {
|
||||
os.api('federation/instances', {
|
||||
sort: '+lastCommunicatedAt',
|
||||
limit: 30,
|
||||
}).then(res => {
|
||||
instances.value = res;
|
||||
fetching.value = false;
|
||||
key++;
|
||||
});
|
||||
};
|
||||
|
||||
useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
|
||||
immediate: true,
|
||||
afterMounted: true,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.change-enter-active, .change-leave-active {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
.change-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.change-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.nmidsaqw {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
::v-deep(.item) {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
margin-right: 3em;
|
||||
|
||||
> .icon {
|
||||
display: inline-block;
|
||||
height: var(--height);
|
||||
aspect-ratio: 1;
|
||||
vertical-align: bottom;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
> .host {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
&.colored {
|
||||
padding-right: 1em;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
88
packages/client/src/ui/_common_/statusbar-rss.vue
Normal file
88
packages/client/src/ui/_common_/statusbar-rss.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<span v-if="!fetching" class="xbhtxfms">
|
||||
<template v-if="display === 'marquee'">
|
||||
<transition name="change" mode="default">
|
||||
<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
|
||||
<span v-for="item in items" class="item">
|
||||
<a class="link" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span class="divider"></span>
|
||||
</span>
|
||||
</MarqueeText>
|
||||
</transition>
|
||||
</template>
|
||||
<template v-else-if="display === 'oneByOne'">
|
||||
<!-- TODO -->
|
||||
</template>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
|
||||
import MarqueeText from '@/components/marquee.vue';
|
||||
import * as os from '@/os';
|
||||
import { useInterval } from '@/scripts/use-interval';
|
||||
|
||||
const props = defineProps<{
|
||||
url?: string;
|
||||
display?: 'marquee' | 'oneByOne';
|
||||
marqueeDuration?: number;
|
||||
marqueeReverse?: boolean;
|
||||
oneByOneInterval?: number;
|
||||
refreshIntervalSec?: number;
|
||||
}>();
|
||||
|
||||
const items = ref([]);
|
||||
const fetching = ref(true);
|
||||
let key = $ref(0);
|
||||
|
||||
const tick = () => {
|
||||
fetch(`/api/fetch-rss?url=${props.url}`, {}).then(res => {
|
||||
res.json().then(feed => {
|
||||
items.value = feed.items;
|
||||
fetching.value = false;
|
||||
key++;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
|
||||
immediate: true,
|
||||
afterMounted: true,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.change-enter-active, .change-leave-active {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
.change-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.change-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.xbhtxfms {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
::v-deep(.item) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
vertical-align: bottom;
|
||||
margin: 0;
|
||||
|
||||
> .divider {
|
||||
display: inline-block;
|
||||
width: 0.5px;
|
||||
height: var(--height);
|
||||
margin: 0 1em;
|
||||
background: currentColor;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
104
packages/client/src/ui/_common_/statusbar-user-list.vue
Normal file
104
packages/client/src/ui/_common_/statusbar-user-list.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<span v-if="!fetching" class="osdsvwzy">
|
||||
<template v-if="display === 'marquee'">
|
||||
<transition name="change" mode="default">
|
||||
<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
|
||||
<span v-for="note in notes" :key="note.id" class="item">
|
||||
<img class="avatar" :src="note.user.avatarUrl" decoding="async"/>
|
||||
<MkA class="text" :to="notePage(note)">
|
||||
<Mfm :text="getNoteSummary(note)" :plain="true" :nowrap="true" :custom-emojis="note.emojis"/>
|
||||
</MkA>
|
||||
<span class="divider"></span>
|
||||
</span>
|
||||
</MarqueeText>
|
||||
</transition>
|
||||
</template>
|
||||
<template v-else-if="display === 'oneByOne'">
|
||||
<!-- TODO -->
|
||||
</template>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
|
||||
import * as misskey from 'misskey-js';
|
||||
import MarqueeText from '@/components/marquee.vue';
|
||||
import * as os from '@/os';
|
||||
import { useInterval } from '@/scripts/use-interval';
|
||||
import { getNoteSummary } from '@/scripts/get-note-summary';
|
||||
import { notePage } from '@/filters/note';
|
||||
|
||||
const props = defineProps<{
|
||||
userListId?: string;
|
||||
display?: 'marquee' | 'oneByOne';
|
||||
marqueeDuration?: number;
|
||||
marqueeReverse?: boolean;
|
||||
oneByOneInterval?: number;
|
||||
refreshIntervalSec?: number;
|
||||
}>();
|
||||
|
||||
const notes = ref<misskey.entities.Note[]>([]);
|
||||
const fetching = ref(true);
|
||||
let key = $ref(0);
|
||||
|
||||
const tick = () => {
|
||||
if (props.userListId == null) return;
|
||||
os.api('notes/user-list-timeline', {
|
||||
listId: props.userListId,
|
||||
}).then(res => {
|
||||
notes.value = res;
|
||||
fetching.value = false;
|
||||
key++;
|
||||
});
|
||||
};
|
||||
|
||||
useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
|
||||
immediate: true,
|
||||
afterMounted: true,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.change-enter-active, .change-leave-active {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
.change-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.change-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.osdsvwzy {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
::v-deep(.item) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
vertical-align: bottom;
|
||||
margin: 0;
|
||||
|
||||
> .avatar {
|
||||
display: inline-block;
|
||||
height: var(--height);
|
||||
aspect-ratio: 1;
|
||||
vertical-align: bottom;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
> .divider {
|
||||
display: inline-block;
|
||||
width: 0.5px;
|
||||
height: 16px;
|
||||
margin: 0 1em;
|
||||
background: currentColor;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
75
packages/client/src/ui/_common_/statusbars.vue
Normal file
75
packages/client/src/ui/_common_/statusbars.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div
|
||||
class="dlrsnxqu" :class="{
|
||||
verySmall: defaultStore.reactiveState.statusbarSize.value === 'verySmall',
|
||||
small: defaultStore.reactiveState.statusbarSize.value === 'small',
|
||||
medium: defaultStore.reactiveState.statusbarSize.value === 'medium',
|
||||
large: defaultStore.reactiveState.statusbarSize.value === 'large'
|
||||
}"
|
||||
>
|
||||
<div v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" class="item" :class="{ black: x.black }">
|
||||
<span class="name">{{ x.name }}</span>
|
||||
<XRss v-if="x.type === 'rss'" class="body" :refresh-interval-sec="x.props.refreshIntervalSec" :marquee-duration="x.props.marqueeDuration" :marquee-reverse="x.props.marqueeReverse" :display="x.props.display" :url="x.props.url"/>
|
||||
<XFederation v-else-if="x.type === 'federation'" class="body" :refresh-interval-sec="x.props.refreshIntervalSec" :marquee-duration="x.props.marqueeDuration" :marquee-reverse="x.props.marqueeReverse" :display="x.props.display" :colored="x.props.colored"/>
|
||||
<XUserList v-else-if="x.type === 'userList'" class="body" :refresh-interval-sec="x.props.refreshIntervalSec" :marquee-duration="x.props.marqueeDuration" :marquee-reverse="x.props.marqueeReverse" :display="x.props.display" :user-list-id="x.props.userListId"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
|
||||
import * as os from '@/os';
|
||||
import { defaultStore } from '@/store';
|
||||
const XRss = defineAsyncComponent(() => import('./statusbar-rss.vue'));
|
||||
const XFederation = defineAsyncComponent(() => import('./statusbar-federation.vue'));
|
||||
const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue'));
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dlrsnxqu {
|
||||
--height: 24px;
|
||||
background: var(--panel);
|
||||
font-size: 0.85em;
|
||||
|
||||
&.verySmall {
|
||||
--height: 16px;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
&.small {
|
||||
--height: 20px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
&.large {
|
||||
--height: 26px;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
> .item {
|
||||
display: inline-flex;
|
||||
vertical-align: bottom;
|
||||
width: 100%;
|
||||
line-height: var(--height);
|
||||
height: var(--height);
|
||||
overflow: clip;
|
||||
contain: strict;
|
||||
|
||||
> .name {
|
||||
padding: 0 6px;
|
||||
font-weight: bold;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
> .body {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&.black {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user