✨ Added background-image to quizzes

classquiz/config.py

@@ -1,7 +1,7 @@
 #  This Source Code Form is subject to the terms of the Mozilla Public
 #  License, v. 2.0. If a copy of the MPL was not distributed with this
 #  file, You can obtain one at https://mozilla.org/MPL/2.0/.
-
+import re
 from functools import lru_cache
 
 from redis import asyncio as redis_lib
@@ -71,3 +71,5 @@ storage: Storage = Storage(
 meilisearch = MeiliSearch.Client(settings().meilisearch_url)
 
 ALLOWED_TAGS_FOR_QUIZ = ["b", "strong", "i", "em", "small", "mark", "del", "sub", "sup"]
+
+server_regex = rf"^{re.escape(settings().root_address)}/api/v1/storage/download/.{{36}}--.{{36}}$"

classquiz/db/models.py

@@ -2,6 +2,7 @@
 #  License, v. 2.0. If a copy of the MPL was not distributed with this
 #  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 import os
+import re
 import uuid
 from datetime import datetime
 from typing import Optional
@@ -10,6 +11,7 @@ import ormar
 from pydantic import BaseModel, Json, validator
 from enum import Enum
 from . import metadata, database
+from ..config import server_regex
 
 
 class UserAuthTypes(Enum):
@@ -150,6 +152,16 @@ class QuizInput(BaseModel):
     cover_image: str | None
     background_color: str | None
     questions: list[QuizQuestion]
+    background_image: str | None
+
+    @validator("background_image")
+    def must_come_from_local_cdn(cls, v):
+        if v is None:
+            return v
+        elif bool(re.match(server_regex, v)):
+            return v
+        else:
+            raise ValueError("does not match url scheme")
 
 
 class Quiz(ormar.Model):
@@ -164,6 +176,16 @@ class Quiz(ormar.Model):
     imported_from_kahoot: Optional[bool] = ormar.Boolean(default=False, nullable=True)
     cover_image: Optional[str] = ormar.Text(nullable=True, unique=False)
     background_color: str | None = ormar.Text(nullable=True, unique=False)
+    background_image: str | None = ormar.Text(nullable=True, unique=False)
+
+    @validator("background_image")
+    def must_come_from_local_cdn(cls, v):
+        if v is None:
+            return v
+        elif bool(re.match(server_regex, v)):
+            return v
+        else:
+            raise ValueError("does not match url scheme")
 
     class Meta:
         tablename = "quiz"
@@ -211,6 +233,7 @@ class PlayGame(BaseModel):
     game_mode: str | None
     current_question: int = -1
     background_color: str | None
+    background_image: str | None
     custom_field: str | None
 
 

classquiz/routers/editor.py

@@ -13,7 +13,7 @@ import bleach
 from fastapi import APIRouter, File, UploadFile, HTTPException, Depends
 from pydantic import BaseModel
 
-from classquiz.config import settings, redis, storage, meilisearch, ALLOWED_TAGS_FOR_QUIZ
+from classquiz.config import settings, redis, storage, meilisearch, ALLOWED_TAGS_FOR_QUIZ, server_regex
 from classquiz.db.models import Quiz, QuizInput, User, QuizQuestionType
 import puremagic
 from classquiz.auth import get_current_user
@@ -143,10 +143,10 @@ async def finish_edit(edit_id: str, quiz_input: QuizInput):
                     )
     image_id_regex = r"^.{36}--.{36}$"
     imgur_regex = r"^https://i\.imgur\.com\/.{7}.(jpg|png|gif)$"
-    server_regex = rf"^{re.escape(settings.root_address)}/api/v1/storage/download/.{{36}}--.{{36}}$"
+
     extract_file_name_re = r"^.*/api/v1/storage/download/(.{36}--.{36})$"
     images_to_delete = []
-    old_quiz_data = await Quiz.objects.get_or_none(id=session_data.quiz_id, user_id=session_data.user_id)
+    old_quiz_data: Quiz = await Quiz.objects.get_or_none(id=session_data.quiz_id, user_id=session_data.user_id)
 
     def mark_image_for_deletion(new: str | None, index: int, old_quiz: Quiz | None):
         if old_quiz is None:
@@ -183,6 +183,9 @@ async def finish_edit(edit_id: str, quiz_input: QuizInput):
     if quiz_input.cover_image == "":
         quiz_input.cover_image = None
 
+    # if quiz_input.background_image is None and old_quiz_data.background_image is not None:
+    #     mark_image_for_deletion(quiz_input.background_image)
+
     if quiz_input.cover_image is not None and not bool(re.match(server_regex, quiz_input.cover_image)):
         raise HTTPException(status_code=400, detail="image url is not valid")
 
@@ -200,6 +203,7 @@ async def finish_edit(edit_id: str, quiz_input: QuizInput):
         quiz.questions = quiz_input.dict()["questions"]
         quiz.cover_image = quiz_input.cover_image
         quiz.background_color = quiz_input.background_color
+        quiz.background_image = quiz_input.background_image
         for image in images_to_delete:
             if image is not None:
                 try:

classquiz/routers/quiz.py

@@ -126,6 +126,7 @@ async def start_quiz(
         user_id=user.id,
         background_color=quiz.background_color,
         custom_field=custom_field,
+        background_image=quiz.background_image,
     )
     await redis.set(f"game:{str(game.game_pin)}", game.json(), ex=18000)
     await redis.set(f"game_pin:{user.id}:{quiz_id}", game_pin, ex=18000)

frontend/src/lib/editor/settings-card.svelte

@@ -14,6 +14,7 @@
 	const { t } = getLocalization();
 
 	let uppyOpen = false;
+	let bg_uppy_open = false;
 
 	export let edit_id: string;
 	export let data: EditorData;
@@ -38,7 +39,12 @@
 				/>
 			</div>
 		</div>
-		<div class="dark:bg-gray-700">
+		<div
+			class="dark:bg-gray-700 h-full"
+			style="background-repeat: no-repeat;background-size: 100% 100%;background-image: {data.background_image
+				? `url("${data.background_image}")`
+				: `unset`}"
+		>
 			<div class="flex justify-center pt-10 w-full">
 				<!--<input
 					type="text"
@@ -173,6 +179,40 @@
 					</div>
 				</div>
 			</div>
+			<div class="flex justify-center pt-10">
+				<h3>Background-Image</h3>
+			</div>
+			<div class="w-full flex justify-center -mt-8">
+				{#if data.background_image}
+					<button
+						on:click={() => {
+							data.background_image = undefined;
+						}}
+						class="mt-10 bg-red-500 p-2 rounded-lg border-2 border-black transition hover:bg-red-400"
+						>Remove Background-Image</button
+					>
+				{:else if pow_data === undefined}
+					<a href="/docs/pow" target="_blank" class="cursor-help pt-10">
+						<Spinner my_20={false} />
+					</a>
+				{:else}
+					{#await import('$lib/editor/uploader.svelte')}
+						<div class="pt-10">
+							<Spinner my_20={false} />
+						</div>
+					{:then c}
+						<svelte:component
+							this={c.default}
+							bind:modalOpen={bg_uppy_open}
+							bind:edit_id
+							bind:data
+							selected_question={-1}
+							bind:pow_data
+							bind:pow_salt
+						/>
+					{/await}
+				{/if}
+			</div>
 		</div>
 	</div>
 </div>

frontend/src/lib/editor/uploader.svelte

@@ -21,6 +21,7 @@
 	import '@uppy/image-editor/dist/style.css';
 	import type { EditorData } from '../quiz_types';
 	import { getLocalization } from '$lib/i18n';
+
 	const { t } = getLocalization();
 
 	export let modalOpen = false;
@@ -65,6 +66,8 @@
 		console.log(pow_data);
 		if (selected_question === undefined) {
 			data.cover_image = `${window.location.origin}/api/v1/storage/download/${image_id}`;
+		} else if (selected_question === -1) {
+			data.background_image = `${window.location.origin}/api/v1/storage/download/${image_id}`;
 		} else {
 			data.questions[
 				selected_question

frontend/src/lib/quiz_types.ts

@@ -22,6 +22,7 @@ export interface QuizData {
 	started: boolean;
 	cover_image?: string;
 	background_color?: string;
+	background_image?: string;
 }
 
 export enum QuizQuestionType {
@@ -65,4 +66,5 @@ export interface EditorData {
 	questions: Question[];
 	cover_image?: string;
 	background_color?: string;
+	background_image?: string;
 }

frontend/src/routes/admin/+page.svelte

@@ -131,7 +131,9 @@
 		players = players;
 	};
 	let bg_color;
+	let bg_image;
 	$: bg_color = quiz_data ? quiz_data.background_color : undefined;
+	$: bg_image = quiz_data ? quiz_data.background_image : undefined;
 	let show_final_results = false;
 	$: show_final_results = JSON.stringify(final_results) !== JSON.stringify([null]);
 </script>
@@ -142,7 +144,9 @@
 </svelte:head>
 <div
 	class="min-h-screen min-w-full"
-	style="background: {bg_color ? bg_color : 'transparent'}"
+	style="background-repeat: no-repeat;background-size: 100% 100%;background-image: {bg_image
+		? `url('${bg_image}')`
+		: `unset`}; background-color: {bg_color ? bg_color : 'transparent'}"
 	class:text-black={bg_color}
 >
 	{#if JSON.stringify(final_results) !== JSON.stringify([null])}

migrations/versions/820e06ef2c2a_added_background_image.py

@@ -0,0 +1,29 @@
+"""Added background_image
+
+Revision ID: 820e06ef2c2a
+Revises: 694cb11c6886
+Create Date: 2022-12-28 18:27:57.035467
+
+"""
+from alembic import op
+import sqlalchemy as sa
+import ormar
+
+
+# revision identifiers, used by Alembic.
+revision = "820e06ef2c2a"
+down_revision = "694cb11c6886"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.add_column("quiz", sa.Column("background_image", sa.Text(), nullable=True))
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_column("quiz", "background_image")
+    # ### end Alembic commands ###