Refactoring to community polls & fixes for quizzes

[lamemakes]

Refactoring to community polls & fixes for quizzes

Pull Request Type

• Bugfix
• Feature Implementation
• Documentation
• Other

Related issue

Closes #3746.

Description

This PR implements community quizzes for both the local and invidious API, giving users an interactive option to take the quiz that requires no callbacks to YouTube. This also fixes the vote count format changing between local/indivious APIs

Screenshots

Before:

Broken quiz prompt:

Poll vote count on local API:

Poll vote count on Invidious API:

After:

Quiz prompt with options:

Selecting the correct answer:

Selecting the incorrect answer:

New vote count that is API independent:

Testing

Channel communities this was tested on:

• https://www.youtube.com/@LofiGirl/community
• https://www.youtube.com/@PewDiePie/community
• https://www.youtube.com/@MahaSattva/community

These worked good for testing the vote count side of things, but Lofi Girl was the only one that really allowed me to test quizzes. If anyone else knows where to find more YT community quizzes, please feel free to comment them.

Desktop

• OS: Fedora
• OS Version: 37
• FreeTube version: aa1d422

Additional context

A new component was created that is intended to be used for both polls and quizzes due to their similarity, so this avoids duplicate code.

[absidue]

Haven't tested it yet but have reviewed the code and left a bunch of comments.

As for the quiz implementation, I would prefer to have a "reveal correct answer" button instead of making the quiz interactive, as the interactivity of the quiz gives the user the impression that their answer is being transmitted to YouTube.

[lamemakes]

These comments are super helpful! I'll patch them up soon and have it ready for you. I'm definitely a fan of the reveal button, that makes a lot more sense and will probably simplify the code quite a bit.

[lamemakes]

The latest layout can be seen here:

when reveal answers is selected:

when hide answers is selected:

Is there a theme color/addition you wanted me to make for the green? Right now that's hard coded but I could add/pull something from the master theming file if that would be beneficial.

[lamemakes]

@absidue Thanks for bearing with me here! This was super educational on FreeTube's flow and practices. Let me know if you have any other suggestions.

[absidue]

My only concern at the moment, is that the reveal/hide answer button isn't accessible, however that shouldn't be too hard to fix. Here is how it is done for the Fetch more results button on the search page, you'll also want to update the hover CSS to also get activated for the focus pseudo class:

FreeTube/src/renderer/views/Search/Search.vue

Lines 17 to 26 in 079417d

	<div
	class="getNextPage"
	role="button"
	tabindex="0"
	@click="nextPage"
	@keydown.enter.prevent="nextPage"
	@keydown.space.prevent="nextPage"
	>
	<font-awesome-icon :icon="['fas', 'search']" /> {{ $t("Search Filters.Fetch more results") }}
	</div>

[absidue]

Apart from that accessibility issue the code looks good :). I haven't tested it yet, but I'll get onto that soon.

[efb4f5ff-1298-471a-8973-3d47447115dc]

Local API doesnt seem to work when i try to reveal the answers

IV-API.mp4

Local-API.mp4

[lamemakes]

Interesting - I couldn't recreate this. My development happened using the local API so I'll poke around and see if anything is different in my env

[efb4f5ff-1298-471a-8973-3d47447115dc]

It could be that my env is buggy. If others aren't experiencing it then I'm happy to approve

[PikachuEXE]

I can reproduce the reveal answer issue for local API (IV is fine)
I tried @efb4f5ff-1298-471a-8973-3d47447115dc posted one and the following:

[lamemakes]

Great catch! I can't figure out why it wouldn't break locally, but it should be fixed now. Been on travel this week so I apologize for the delay.

[PikachuEXE]

Inconsistent indent
Ensure your editor supports .editorconfig - https://editorconfig.org

[efb4f5ff-1298-471a-8973-3d47447115dc]

LGTM now just waiting on the requested changes to be implemented

[PikachuEXE]

@absidue