Rich welcome content (#7588)

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

* Add a simple scrolling animation to welcome page

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

src/client/pages/welcome.timeline.vue

@@ -1,27 +1,44 @@
 <template>
 <div class="civpbkhh">
+	<div class="scrollbox" ref="scroll" v-bind:class="{ scroll: isScrolling }">
 		<div v-for="note in notes" class="note">
 			<div class="content _panel">
-			{{ note.text }}
+				<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>
 	</div>
+</div>
 </template>
 
 <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,14 +46,40 @@ 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;
 
+	> .scrollbox {
+		&.scroll {
+			animation: scroll 45s linear infinite;
+		}
+
 		> .note {
 			margin: 16px 0 16px auto;
 
@@ -45,6 +88,11 @@ export default defineComponent({
 				margin: 0 0 0 auto;
 				max-width: max-content;
 				border-radius: 16px;
+
+				> .richcontent {
+					min-width: 250px;
+				}
+			}
 		}
 	}
 }