added link to video in admin view, truncated titles that are too long

gdshowreelvote/blueprints/votes.py

@@ -8,7 +8,7 @@ from flask import Blueprint, Response, current_app, g, redirect, render_template
 from gdshowreelvote import auth
 from gdshowreelvote.blueprints.forms import VOTE_ACTIONS, CastVoteForm, SelectVideoForm
 from gdshowreelvote.database import DB, User, Video, Vote
-from gdshowreelvote.utils import choose_random_video, get_total_votes, vote_data
+from gdshowreelvote.utils import choose_random_video, get_total_votes, video_data, vote_data
 
 
 bp = Blueprint('votes', __name__)
@@ -31,6 +31,7 @@ def before_you_vote():
 	content = render_template('before-you-vote.html')
 	return render_template('default.html', content = content, user=g.user)
 
+
 @bp.route('/vote', methods=['GET'])
 @bp.route('/vote/<int:video_id>', methods=['GET'])
 @auth.vote_role_required
@@ -162,4 +163,16 @@ def download_vote_results():
         ])
 	response = Response(csv_file.getvalue(), mimetype='text/csv')
 	response.headers["Content-Disposition"] = "attachment; filename=vote_results.csv"
-	return response
+	return response
+
+
+@bp.route('/view/<int:video_id>', methods=['GET'])
+def video_view(video_id: int):
+	video = DB.session.query(Video).filter(Video.id == video_id).first()
+	if not video:
+		current_app.logger.warning(f"Video with ID {video_id} not found.")
+		return "Video not found", 404
+
+	data = video_data(video)
+	content = render_template('video-view.html', data=data)
+	return render_template('default.html', content = content, user=g.user, hide_nav=True)

gdshowreelvote/utils.py

@@ -48,7 +48,7 @@ def downvote_video(user: User, video: Video):
     return vote
 
 
-def _video_data(video: Video) -> Dict:
+def video_data(video: Video) -> Dict:
     data = {
             'id': video.id,
             'game': video.game,
@@ -68,7 +68,7 @@ def vote_data(user: User, video: Video) -> Tuple[Dict, Dict]:
     total_video_count = DB.session.query(Video).count()
     total_user_votes = DB.session.query(Vote).filter(Vote.user_id == user.id).count()
 
-    data = _video_data(video) if video else None
+    data = video_data(video) if video else None
 
     progress = {
 		'total': total_video_count, 

templates/admin.html

@@ -21,7 +21,7 @@
 	<div class="entries">
 		{% for entry in vote_tally.items %}
 			<div class="entry panel padded">
-				<h2>{{ entry[0].game }}</h2>
+				<h2><a href="{{ url_for('votes.video_view', video_id=entry[0].id) }}">{{ entry[0].game }}</a></h2>
 				<p>Category: <strong>{{ entry[0].showreel.title }}</strong></p>
 				<p>Author: <strong>{{ entry[0].author_name }}</strong></p>
 				<p>Vote sum: <strong>{{ entry[1] }}</strong></p>

templates/video-view.html

@@ -0,0 +1,117 @@
+<style>
+	iframe {
+		width: 100%;
+		aspect-ratio: 16 / 9;
+		height: auto;
+		margin-bottom: -5px;
+	}
+	div.main {
+		max-width: 134vh;
+	}
+	.col-2 {
+		text-align: left;
+		display: grid;
+		margin: 20px 0px;
+		@media (min-width: 768px) {
+			grid-template-columns: 1fr 1fr;
+		}
+	}
+	.thank-you {
+		font-size: 1.3em;
+		padding: 41px 50px;
+		text-align: left;
+		margin: 0 auto;
+		h1 {
+			margin-bottom: 10px;
+		}
+	}
+	.progress {
+		@media (min-width: 768px) {
+			text-align: right;
+		}
+		a {
+			display: inline-block;
+			text-align: right;
+			font-size: 18px;
+			color: inherit;
+			opacity: 0.8;
+			text-decoration: none;
+			position: relative;
+    		top: 3px;
+			progress {
+				max-width: 190px;
+				margin-right: 0;
+				margin-left: auto;
+				position: relative;
+				top: -8px;
+			}
+		}
+		span {
+			display: block;
+		}
+	}
+	div.main.title {
+		margin-top: -20px;
+		margin-bottom: -15px;
+		padding-top: 10px;
+		max-width: 100%;
+		h1 {
+			max-width: 40ch;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			margin: 0 auto;
+			@media (min-width: 768px) {
+				text-align: center;
+				position: relative;
+				top: 4px;
+			}
+		}
+		.col-2 {
+			@media (min-width: 768px) {
+				grid-template-columns: 200px 1fr 200px;
+			}
+		}
+	}
+	.truncate {
+		max-width: 40ch;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+</style>
+<div id="vote-view">
+	<div style="background: black; color: white; margin-bottom: -20px; padding-bottom: 24px;">
+		<div class="main title">
+			<div class="col-2" style="margin-bottom: 0;">
+				<div>
+					<a href="/">
+						<img class="logo" src="/static/images/nav-logo.svg" alt="Godot Showreel Voting">
+					</a>
+				</div>
+				<h1 title="{{ data.game }}">{{ data.game }}</h1>
+			</div>
+		</div>
+	</div>
+
+	<div>
+		<div style="background: black; margin: 20px 0;">
+			<div class="main">
+				<iframe width="560" height="315" src="{{ data.youtube_embed }}?rel=0&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+			</div>
+		</div>
+		<div class="main">
+			<div class="panel padded" style="margin-top: 10px;">
+				<h2>Submission info:</h2>
+				<div class="col-2">
+					<p class="truncate" title="{{ data.game }}">Project: <strong>{{ data.game }}</strong></p>
+					<p>Video Link: <a href="{{ data.video_link }}" target="_blank">{{ data.video_link }}</a></p>
+					<p>Author: <strong>{{ data.author }}</strong></p>
+					<p>Store Link: <a href="{{ data.store_link }}" target="_blank">{{ data.store_link }}</a></p>
+					<p>Category: <strong>{{ data.category }}</strong></p>
+					<p>Follow them: <a href="{{ data.follow_me_link }}" target="_blank">{{ data.follow_me_link }}</a></p>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

templates/vote.html

@@ -56,6 +56,11 @@
 		padding-top: 10px;
 		max-width: 100%;
 		h1 {
+			max-width: 40ch;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			margin: 0 auto;
 			@media (min-width: 768px) {
 				text-align: center;
 				position: relative;
@@ -68,6 +73,12 @@
 			}
 		}
 	}
+	.truncate {
+		max-width: 40ch;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
 </style>
 <div id="vote-view">
 	{% if not data %}
@@ -88,7 +99,7 @@
 							<img class="logo" src="/static/images/nav-logo.svg" alt="Godot Showreel Voting">
 						</a>
 					</div>
-					<h1>{{ data.game }}</h1>
+					<h1 title="{{ data.game }}">{{ data.game }}</h1>
 					<div style="display: grid; align-content: end;">
 						<div class="progress">
 							<a href="/history">
@@ -115,7 +126,7 @@
 							{{ cast_vote_form.csrf_token }}
 							{{ cast_vote_form.video_id(value=data.id, hidden=True) }}
 							<button id="downvote" type="submit" name="action" value="downvote" class="button tertiary" title="Shortcut: 'A' or 'Q' keys">No 👎</button>
-							<button id="skip" type="submit" name="action" value="skip" class="button dim" title="Shortcut: 'S' key">Skip ⏭️</button>
+							<button id="skip" type="submit" name="action" value="skip" class="button dim" title="Shortcut: 'S' key. You need to wait 3 seconds before skipping." disabled>Skip ⏭️</button>
 							<button id="upvote" type="submit" name="action" value="upvote" class="button primary" title="Shortcut: 'D' key">Yes 👍</button>
 						</div>
 					</form>
@@ -124,7 +135,7 @@
 				<div class="panel padded" style="margin-top: 10px;">
 					<h2>Submission info:</h2>
 					<div class="col-2">
-						<p>Project: <strong>{{ data.game }}</strong></p>
+						<p class="truncate" title="{{ data.game }}">Project: <strong>{{ data.game }}</strong></p>
 						<p>Video Link: <a href="{{ data.video_link }}" target="_blank">{{ data.video_link }}</a></p>
 						<p>Author: <strong>{{ data.author }}</strong></p>
 						<p>Store Link: <a href="{{ data.store_link }}" target="_blank">{{ data.store_link }}</a></p>
@@ -151,4 +162,11 @@
 			}
 		};
 	});
+</script>
+
+<script>
+	// enable skip button after 5 seconds
+	setTimeout(function() {
+		document.getElementById("skip").disabled = false;
+	}, 3000);
 </script>