add custom backgrounds paypig feature to compensate for profile views (#44)

Co-authored-by: Aevann1 <randomname42029@gmail.com>
Reviewed-on: #44
Co-authored-by: Aevann <aevann@noreply.fsdfsd.net>
Co-committed-by: Aevann <aevann@noreply.fsdfsd.net>

files/assets/css/main.css

@@ -6074,6 +6074,7 @@ g {
 .fa-coffin-cross:before{content:"\e051"}
 .fa-face-sleeping:before{content:"\e38d"}
 .fa-block-question:before{content:"\e3dd"}
+.fa-image-slash:before{content:"\e1b7"}
 
 .pronouns {
 	font-size: 9px;

files/routes/settings.py

@@ -40,11 +40,39 @@ def settings_personal(v:User):
 @ratelimit_user()
 def remove_background(v):
 	if v.background:
+		if v.background.startswith('/images/'):
+			fpath = '/images/' + v.background.split('/images/')[1]
+			if path.isfile(fpath): os.remove(fpath)
 		v.background = None
 		if v.theme == 'transparent': v.theme = 'midnight'
 		g.db.add(v)
 	return {"message": "Background removed!"}
 
+@app.post('/settings/custom_background')
+@limiter.limit(DEFAULT_RATELIMIT_SLOWER)
+@auth_required
+@ratelimit_user()
+def upload_custom_background(v):
+	if g.is_tor: abort(403, "Image uploads are not allowed through TOR.")
+
+	if not v.patron:
+		abort(403, f"This feature is only available to {patron}s!")
+
+	file = request.files["file"]
+
+	name = f'/images/{time.time()}'.replace('.','') + '.webp'
+	file.save(name)
+	background = process_image(name, v)
+
+	if background:
+		if v.background and v.background.startswith('/images/'):
+			fpath = '/images/' + v.background.split('/images/')[1]
+			if path.isfile(fpath): os.remove(fpath)
+		v.background = background
+		g.db.add(v)
+
+	return redirect('/settings/personal')
+
 @app.post("/settings/personal")
 @limiter.limit(DEFAULT_RATELIMIT_SLOWER)
 @auth_required
@@ -92,7 +120,7 @@ def settings_personal_post(v):
 
 	background = request.values.get("background", v.background)
 	if background != v.background and background.endswith(".webp") and len(background) <= 20:
-		v.background = request.values.get("background").replace('.webp', '')
+		v.background = '/i/backgrounds/' + request.values.get("background")
 		updated = True
 	elif request.values.get("reddit", v.reddit) != v.reddit:
 		reddit = request.values.get("reddit")

files/templates/settings/common.html

@@ -85,7 +85,7 @@
 					 
 					<pre style="padding-top:0.7rem" class="btn btn-secondary format d-inline-block m-0 fas fa-smile-beam" onclick="loadEmojis('{{id}}-text')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add Emoji"></pre>
 					&nbsp;
-					{% if show_file_upload and request.headers.get('cf-ipcountry') != "T1" %}
+					{% if show_file_upload %}
 						<label class="btn btn-secondary format d-inline-block m-0">
 							<div id="filename-show"><i class="fas fa-file"></i></div>
 							<input autocomplete="off" id="file-upload" accept="image/*, video/*, audio/*" type="file" name="file" multiple="multiple" {% if g.is_tor %}disabled{% endif %} onchange="changename('filename-show','file-upload')" hidden>

files/templates/settings/personal.html

@@ -64,9 +64,24 @@
 									{% endfor %}
 									</select>
 								</div>
+							<form class="d-flex mt-3 mb-2" id="upload-custom-background" action="/settings/custom_background" method="post" enctype="multipart/form-data"> 
+								<input type="hidden" name="formkey" value="{{v|formkey}}">
+								<label class="format btn btn-primary" for="upload-custom-background-file">
+									<i class="fas fa-image mr-1"></i> 
+									{% if v.background and v.background.startswith('/images/') %}
+										{{v.background}}
+									{% else %}
+										Upload Custom Background
+									{% endif %}
+								</label>
+								<input autocomplete="off" id="upload-custom-background-file" accept="image/*", type="file" name="file" onchange="this.form.submit()" hidden>
+							</form>
 							{% if v.background %}
-								<div class="d-flex mt-2">
-									<button type="button" class="btn btn-primary mb-1" onclick="postToastReload(this,'/settings/background', 'DELETE')">Remove Background</button>
+								<div class="d-flex mb-3">
+									<button type="button" class="btn btn-danger" onclick="postToastReload(this,'/settings/background', 'DELETE')">
+										<i class="fas fa-image-slash mr-1"></i>
+										Remove Current Background
+									</button>
 								</div>
 							{% endif %}
 							<div id="bgcontainer"></div>

files/templates/util/html_head.html

@@ -162,7 +162,7 @@
 
 {% macro stylesheets_lower() %}
 	{% if SITE_NAME == 'rDrama' and (not v or v.is_banned or v.agendaposter) %}
-		{% set background = 'glitter/1' %}
+		{% set background = '/i/backgrounds/glitter/1.webp?v=4' %}
 	{% elif v and v.background %}
 		{% set background = v.background %}
 	{% endif %}
@@ -170,9 +170,9 @@
 	{% if background %}
 		<style>
 		body {
-			background:url("/i/backgrounds/{{background}}.webp?v=4") center center fixed;
+			background:url("{{background}}") center center fixed;
 			background-color: var(--background);
-			{% if 'anime/' not in background -%}
+			{% if 'anime/' not in background and not background.startswith('/images/') -%}
 				background-size: cover;
 			{%- endif %}
 		}

migrations/20221204-custom-background.sql

@@ -0,0 +1,2 @@
+alter table users alter column background type varchar(30);
+update users set background='/i/backgrounds/' || background || '.webp' where background is not null;