Refactoring to community polls & fixes for quizzes (#3865)

* Refactoring to community polls & fixes for quizzes * Replaced the interactive quiz with a reveal button and small fixes * Replaced the interactive quiz with a reveal button and small fixes * Implemented vote formatting * vote translation fix * Accessibility additions * Fixed local API is_correct typo * Fixed inconsistent indents
FreeTubeApp · Aug 24, 2023 · 4a7c4d9 · 4a7c4d9
1 parent f4cee17
commit 4a7c4d9
Show file tree

Hide file tree

Showing 10 changed files with 188 additions and 59 deletions.
diff --git a/src/renderer/components/ft-community-poll/ft-community-poll.css b/src/renderer/components/ft-community-poll/ft-community-poll.css
@@ -0,0 +1,57 @@
+.vote-count {
+  padding-bottom: 6px;
+  font-size: smaller;
+}
+
+.empty-circle {
+  background-color: transparent;
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 2px;
+  display: block;
+  float: left;
+  height: 10px;
+  left: 5px;
+  position: relative;
+  top: 8px;
+  width: 10px;
+}
+
+.filled-circle {
+  border-radius: 50%;
+  background-color: black;
+  float: left;
+  height: 6px;
+  left: 2px;
+  top: 2px;
+  position: relative;
+  width: 6px;
+}
+
+.option-text {
+  border-radius: 5px;
+  border-style: solid;
+  border-width: 2px;
+  padding: 5px 25px;
+}
+
+.option {
+  padding-bottom: 10px;
+}
+
+.correct-option {
+  background-color: #78da71;
+}
+
+.incorrect-option {
+  background-color: #dd4e4e;
+}
+
+.reveal-answer  {
+  text-align: center;
+  cursor: pointer;
+}
+
+.reveal-answer:hover > .option-text, .reveal-answer:focus > .option-text {
+  background-color: var(--side-nav-hover-color)
+}
diff --git a/src/renderer/components/ft-community-poll/ft-community-poll.js b/src/renderer/components/ft-community-poll/ft-community-poll.js
@@ -0,0 +1,22 @@
+import { defineComponent } from 'vue'
+import { formatNumber } from '../../helpers/utils'
+
+export default defineComponent({
+  name: 'FtCommunityPoll',
+  props: {
+    data: {
+      type: Object,
+      required: true
+    }
+  },
+  data: function () {
+    return {
+      revealAnswer: false
+    }
+  },
+  computed: {
+    formattedVotes: function () {
+      return formatNumber(this.data.totalVotes)
+    },
+  }
+})
diff --git a/src/renderer/components/ft-community-poll/ft-community-poll.vue b/src/renderer/components/ft-community-poll/ft-community-poll.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="poll">
+    <div
+      class="vote-count"
+    >
+      <!-- Format the votes to be split by commas ie. 1000 -> 1,000 -->
+      {{ $t('Channel.Community.votes', {votes: formattedVotes}) }}
+    </div>
+    <div
+      v-for="(choice, index) in data.content"
+      :key="index"
+    >
+      <div
+        v-if="data.type === 'quiz'"
+        class="option quiz-option"
+      >
+        <span class="empty-circle">
+          <span :class="revealAnswer && choice.isCorrect ? 'filled-circle' : ''" />
+        </span>
+        <div
+          class="option-text"
+          :class="revealAnswer && choice.isCorrect ? 'correct-option' : ''"
+        >
+          {{ choice.text }}
+        </div>
+      </div>
+      <div
+        v-else
+        class="option poll-option"
+      >
+        <span class="empty-circle" />
+        <div class="option-text">
+          {{ choice.text }}
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="data.type === 'quiz'"
+      class="reveal-answer option"
+      tabindex="0"
+      role="button"
+      @click="revealAnswer = !revealAnswer"
+      @keydown.enter.prevent="revealAnswer = !revealAnswer"
+      @keydown.space.prevent="revealAnswer = !revealAnswer"
+    >
+      <div
+        v-if="!revealAnswer"
+        class="option-text"
+      >
+        <font-awesome-icon :icon="['fas', 'eye']" /> {{ $t('Channel.Community.Reveal Answers') }}
+      </div>
+      <div
+        v-else
+        class="option-text"
+      >
+        <font-awesome-icon :icon="['fas', 'eye-slash']" /> {{ $t('Channel.Community.Hide Answers') }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./ft-community-poll.js" />
+<style scoped src="./ft-community-poll.css" />
diff --git a/src/renderer/components/ft-community-post/ft-community-post.js b/src/renderer/components/ft-community-post/ft-community-post.js
@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue'
 import FtListVideo from '../ft-list-video/ft-list-video.vue'
 import FtListPlaylist from '../ft-list-playlist/ft-list-playlist.vue'
+import FtCommunityPoll from '../ft-community-poll/ft-community-poll.vue'
 
 import autolinker from 'autolinker'
 import VueTinySlider from 'vue-tiny-slider'
@@ -15,6 +16,7 @@ export default defineComponent({
   components: {
     'ft-list-playlist': FtListPlaylist,
     'ft-list-video': FtListVideo,
+    'ft-community-poll': FtCommunityPoll,
     'tiny-slider': VueTinySlider
   },
   props: {
@@ -37,7 +39,7 @@ export default defineComponent({
       postContent: '',
       commentCount: '',
       isLoading: true,
-      author: ''
+      author: '',
     }
   },
   computed: {

diff --git a/src/renderer/components/ft-community-post/ft-community-post.scss b/src/renderer/components/ft-community-post/ft-community-post.scss
@@ -13,31 +13,6 @@
   box-sizing: border-box;
 }
 
-.circle {
-  background-color: transparent;
-  border-radius: 50%;
-  border-style: solid;
-  border-width: 2px;
-  display: block;
-  float: left;
-  height: 10px;
-  left: 5px;
-  position: relative;
-  top: 8px;
-  width: 10px;
-}
-
-.poll-text {
-  border-radius: 5px;
-  border-style: solid;
-  border-width: 2px;
-  padding: 5px 25px;
-}
-
-.poll-option {
-  padding-bottom: 10px;
-}
-
 .communityImage {
   height: 100%;
   width: 100%;

diff --git a/src/renderer/components/ft-community-post/ft-community-post.vue b/src/renderer/components/ft-community-post/ft-community-post.vue
@@ -60,36 +60,9 @@
       />
     </div>
     <div
-      v-if="type === 'poll'"
+      v-if="type === 'poll' || type === 'quiz'"
     >
-      <div
-        class="poll-count"
-      >
-        {{ postContent.totalVotes }}
-      </div>
-      <div
-        v-for="(poll, index) in postContent.content"
-        :key="index"
-      >
-        <div
-          class="poll-option"
-        >
-          <span
-            class="circle"
-          />
-          <div
-            class="poll-text"
-          >
-            <!-- <img
-              v-if="poll.image != null && poll.image.length >0"
-              :src="getBestQualityImage(poll.image)"
-              class="poll-image"
-              alt=""
-            > -->
-            {{ poll.text }}
-          </div>
-        </div>
-      </div>
+      <ft-community-poll :data="postContent" />
     </div>
     <div
       v-if="type === 'playlist'"

diff --git a/src/renderer/helpers/api/invidious.js b/src/renderer/helpers/api/invidious.js
@@ -257,14 +257,32 @@ function parseInvidiousCommunityAttachments(data) {
     }
   }
 
+  if (data.type === 'quiz') {
+    return {
+      type: 'quiz',
+      totalVotes: data.totalVotes ?? 0,
+      content: data.choices.map(choice => {
+        return {
+          text: choice.text,
+          isCorrect: choice.isCorrect,
+          image: choice.image?.map(thumbnail => {
+            thumbnail.url = youtubeImageUrlToInvidious(thumbnail.url)
+            return thumbnail
+          })
+        }
+      })
+    }
+  }
+
   if (data.type === 'playlist') {
     return {
       type: data.type,
       content: data
     }
   }
 
-  console.error('New Invidious Community Post Type: ' + data.type)
+  console.error(`Unknown Invidious community post type: ${data.type}`)
+  console.error(data)
 }
 
 /**

diff --git a/src/renderer/helpers/api/local.js b/src/renderer/helpers/api/local.js
@@ -916,17 +916,29 @@ function parseLocalAttachment(attachment) {
   } else if (attachment.type === 'Poll') {
     return {
       type: 'poll',
-      totalVotes: attachment.total_votes ?? 0,
+      totalVotes: parseLocalSubscriberCount(attachment.total_votes.text) ?? 0,
       content: attachment.choices.map(choice => {
         return {
           text: choice.text.text,
           image: choice.image
         }
       })
     }
+  } else if (attachment.type === 'Quiz') {
+    return {
+      type: 'quiz',
+      totalVotes: parseLocalSubscriberCount(attachment.total_votes.text) ?? 0,
+      content: Object.values(attachment.choices).map(choice => {
+        return {
+          text: choice.text.text,
+          isCorrect: choice.is_correct,
+          image: choice.image
+        }
+      })
+    }
   } else {
+    console.error(`Unknown Local community post type: ${attachment.type}`)
     console.error(attachment)
-    console.error('unknown type')
   }
 }
 

diff --git a/src/renderer/main.js b/src/renderer/main.js
@@ -56,7 +56,9 @@ import {
   faThumbtack,
   faTimes,
   faTimesCircle,
-  faUsers
+  faUsers,
+  faEye,
+  faEyeSlash,
 } from '@fortawesome/free-solid-svg-icons'
 import {
   faBitcoin,
@@ -123,6 +125,8 @@ library.add(
   faTimes,
   faTimesCircle,
   faUsers,
+  faEye,
+  faEyeSlash,
 
   // brand icons
   faGithub,

diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
@@ -590,6 +590,9 @@ Channel:
   Community:
     Community: Community
     This channel currently does not have any posts: This channel currently does not have any posts
+    votes: '{votes} votes'
+    Reveal Answers: Reveal Answers
+    Hide Answers: Hide Answers
 Video:
   Mark As Watched: Mark As Watched
   Remove From History: Remove From History