MisskeyPlay (#9467)

* wip * wip * wip * wip * wip * Update ui.ts * wip * wip * wip * wip * wip * wip * wip * wip * Update CHANGELOG.md * wip * wip * wip * wip * 🎨 * wip * ✌️
2023-01-05 13:59:48 +09:00
parent 5d904b05dd
commit ebe340d510
45 changed files with 2465 additions and 93 deletions
--- a/packages/frontend/src/pages/flash/flash-index.vue
+++ b/packages/frontend/src/pages/flash/flash-index.vue
@@ -0,0 +1,99 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="700">
+		<div v-if="tab === 'featured'" class="">
+			<MkPagination v-slot="{items}" :pagination="featuredFlashsPagination">
+				<MkFlashPreview v-for="flash in items" :key="flash.id" class="" :flash="flash"/>
+			</MkPagination>
+		</div>
+
+		<div v-else-if="tab === 'my'" class="my">
+			<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
+			<MkPagination v-slot="{items}" :pagination="myFlashsPagination">
+				<MkFlashPreview v-for="flash in items" :key="flash.id" class="" :flash="flash"/>
+			</MkPagination>
+		</div>
+
+		<div v-else-if="tab === 'liked'" class="">
+			<MkPagination v-slot="{items}" :pagination="likedFlashsPagination">
+				<MkFlashPreview v-for="like in items" :key="like.flash.id" class="" :flash="like.flash"/>
+			</MkPagination>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
+import MkFlashPreview from '@/components/MkFlashPreview.vue';
+import MkPagination from '@/components/MkPagination.vue';
+import MkButton from '@/components/MkButton.vue';
+import { useRouter } from '@/router';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const router = useRouter();
+
+let tab = $ref('featured');
+
+const featuredFlashsPagination = {
+	endpoint: 'flash/featured' as const,
+	noPaging: true,
+};
+const myFlashsPagination = {
+	endpoint: 'flash/my' as const,
+	limit: 5,
+};
+const likedFlashsPagination = {
+	endpoint: 'flash/my-likes' as const,
+	limit: 5,
+};
+
+function create() {
+	router.push('/play/new');
+}
+
+const headerActions = $computed(() => [{
+	icon: 'ti ti-plus',
+	text: i18n.ts.create,
+	handler: create,
+}]);
+
+const headerTabs = $computed(() => [{
+	key: 'featured',
+	title: i18n.ts._play.featured,
+	icon: 'fas fa-fire-alt',
+}, {
+	key: 'my',
+	title: i18n.ts._play.my,
+	icon: 'ti ti-edit',
+}, {
+	key: 'liked',
+	title: i18n.ts._play.liked,
+	icon: 'ti ti-heart',
+}]);
+
+definePageMetadata(computed(() => ({
+	title: 'Play',
+	icon: 'ti ti-player-play',
+})));
+</script>
+
+<style lang="scss" scoped>
+.rknalgpo {
+	&.my .ckltabjg:first-child {
+		margin-top: 16px;
+	}
+
+	.ckltabjg:not(:last-child) {
+		margin-bottom: 8px;
+	}
+
+	@media (min-width: 500px) {
+		.ckltabjg:not(:last-child) {
+			margin-bottom: 16px;
+		}
+	}
+}
+</style>