Rich welcome content (#7588)

* Add rich content (polls, media) to the welcome page notes

* Add a simple scrolling animation to welcome page

2 files changed, 68 insertions, 15 deletions

diff --git a/src/client/components/poll.vue b/src/client/components/poll.vue
index 463ddab721..b5d430f93b 100644
--- a/src/client/components/poll.vue
+++ b/src/client/components/poll.vue
@@ -10,7 +10,7 @@
 			</span>
 		</li>
 	</ul>
-	<p>
+	<p v-if="!readOnly">
 		<span>{{ $t('_poll.totalVotes', { n: total }) }}</span>
 		<span> · </span>
 		<a v-if="!closed && !isVoted" @click="toggleShowResult">{{ showResult ? $ts._poll.vote : $ts._poll.showResult }}</a>
@@ -31,6 +31,11 @@ export default defineComponent({
 		note: {
 			type: Object,
 			required: true
+		},
+		readOnly: {
+			type: Boolean,
+			required: false,
+			default: false,
 		}
 	},
 	data() {
@@ -65,7 +70,7 @@ export default defineComponent({
 		}
 	},
 	created() {
-		this.showResult = this.isVoted;
+		this.showResult = this.readOnly || this.isVoted;
 
 		if (this.note.poll.expiresAt) {
 			const update = () => {
@@ -83,7 +88,7 @@ export default defineComponent({
 			this.showResult = !this.showResult;
 		},
 		vote(id) {
-			if (this.closed || !this.poll.multiple && this.poll.choices.some(c => c.isVoted)) return;
+			if (this.readOnly || this.closed || !this.poll.multiple && this.poll.choices.some(c => c.isVoted)) return;
 			os.api('notes/polls/vote', {
 				noteId: this.note.id,
 				choice: id
diff --git a/src/client/pages/welcome.timeline.vue b/src/client/pages/welcome.timeline.vue
index 12c8a4d4f4..bd07ac78db 100644
--- a/src/client/pages/welcome.timeline.vue
+++ b/src/client/pages/welcome.timeline.vue
@@ -1,10 +1,22 @@
 <template>
 <div class="civpbkhh">
-	<div v-for="note in notes" class="note">
-		<div class="content _panel">
-			{{ note.text }}
+	<div class="scrollbox" ref="scroll" v-bind:class="{ scroll: isScrolling }">
+		<div v-for="note in notes" class="note">
+			<div class="content _panel">
+				<div class="body">
+					<MkA class="reply" v-if="note.replyId" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
+					<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
+					<MkA class="rp" v-if="note.renoteId" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
+				</div>
+				<div v-if="note.files.length > 0" class="richcontent">
+					<XMediaList :media-list="note.files"/>
+				</div>
+				<div v-if="note.poll">
+					<XPoll :note="note" :readOnly="true" />
+				</div>
+			</div>
+			<XReactionsViewer :note="note" ref="reactionsViewer"/>
 		</div>
-		<XReactionsViewer :note="note" ref="reactionsViewer"/>
 	</div>
 </div>
 </template>
@@ -12,16 +24,21 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import XReactionsViewer from '@client/components/reactions-viewer.vue';
+import XMediaList from '@client/components/media-list.vue';
+import XPoll from '@client/components/poll.vue';
 import * as os from '@client/os';
 
 export default defineComponent({
 	components: {
-		XReactionsViewer
+		XReactionsViewer,
+		XMediaList,
+		XPoll
 	},
 
 	data() {
 		return {
 			notes: [],
+			isScrolling: false,
 		}
 	},
 
@@ -29,22 +46,53 @@ export default defineComponent({
 		os.api('notes/featured').then(notes => {
 			this.notes = notes;
 		});
+	},
+
+	updated() {
+		if (this.$refs.scroll.clientHeight > window.innerHeight) {
+			this.isScrolling = true;
+		}
 	}
 });
 </script>
 
 <style lang="scss" scoped>
+@keyframes scroll {
+	0% {
+		transform: translate3d(0, 0, 0);
+	}
+	5% {
+		transform: translate3d(0, 0, 0);
+	}
+	75% {
+		transform: translate3d(0, calc(-100% + 90vh), 0);
+	}
+	90% {
+		transform: translate3d(0, calc(-100% + 90vh), 0);
+	}
+}
+
 .civpbkhh {
 	text-align: right;
 
-	> .note {
-		margin: 16px 0 16px auto;
+	> .scrollbox {
+		&.scroll {
+			animation: scroll 45s linear infinite;
+		}
+
+		> .note {
+			margin: 16px 0 16px auto;
+
+			> .content {
+				padding: 16px;
+				margin: 0 0 0 auto;
+				max-width: max-content;
+				border-radius: 16px;
 
-		> .content {
-			padding: 16px;
-			margin: 0 0 0 auto;
-			max-width: max-content;
-			border-radius: 16px;
+				> .richcontent {
+					min-width: 250px;
+				}
+			}
 		}
 	}
 }