More OpenGraph

klepp-me · Apr 18, 2022 · c3d7c43 · c3d7c43
1 parent d28458f
commit c3d7c43
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 24 deletions.
diff --git a/app/api/api_v2/endpoints/video/list_videos.py b/app/api/api_v2/endpoints/video/list_videos.py
@@ -23,7 +23,6 @@ async def get_all_files(
     name: Optional[str] = None,
     hidden: Optional[bool] = None,
     tag: list[str] = Query(default=[]),
-    path: Optional[str] = Query(default=None, description='Exact match. Reflects a `files/{path}` API.'),
     offset: int = 0,
     limit: int = Query(default=100, lte=100),
 ) -> dict[str, int | list]:
@@ -40,15 +39,6 @@ async def get_all_files(
         .options(selectinload(Video.likes))
         .order_by(desc(Video.uploaded_at))
     )
-    if path:
-        # Short route, specific path requested. This cannot be a `files/{path}` API due to `/` in video paths.
-        video_statement = video_statement.where(Video.path == path)
-        video_response = await session.exec(video_statement)  # type: ignore
-        video = []
-        if found := video_response.one_or_none():
-            video.append(found)
-        return {'total_count': len(video), 'response': video}
-
     if username:
         video_statement = video_statement.where(Video.user.has(name=username))  # type: ignore
     if name:

diff --git a/app/render/video_player.py b/app/render/video_player.py
@@ -1,12 +1,42 @@
-from fastapi import APIRouter, Request
+import typing
+
+from fastapi import APIRouter, Depends, Request
 from fastapi.responses import HTMLResponse
 from fastapi.templating import Jinja2Templates
+from sqlalchemy import desc
+from sqlalchemy.orm import selectinload
+from sqlmodel import select
+from sqlmodel.ext.asyncio.session import AsyncSession
+
+from app.api.dependencies import yield_db_session
+from app.models.klepp import Video
+
+if typing.TYPE_CHECKING:
+    from starlette.templating import _TemplateResponse
 
 templates = Jinja2Templates(directory='templates')
 
 router = APIRouter()
 
 
 @router.get('/', response_class=HTMLResponse, include_in_schema=False)
-async def render_video_page(request: Request, path: str):
-    return templates.TemplateResponse('video.html', {'request': request, 'path': path})
+async def render_video_page(
+    request: Request, path: str, session: AsyncSession = Depends(yield_db_session)
+) -> '_TemplateResponse':
+    """
+    Static site for share.klepp.me?path=<path>
+    """
+    video_statement = (
+        select(Video)
+        .options(selectinload(Video.user))
+        .options(selectinload(Video.tags))
+        .options(selectinload(Video.likes))
+        .order_by(desc(Video.uploaded_at))
+    )
+    if path:
+        # Short route, specific path requested. This cannot be a `files/{path}` API due to `/` in video paths.
+        video_statement = video_statement.where(Video.path == path)
+        video_response = await session.exec(video_statement)  # type: ignore
+        if found := video_response.one_or_none():
+            return templates.TemplateResponse('video.html', {'request': request, 'video_dict': found.dict()})
+    return templates.TemplateResponse('404.html', {'request': request})
diff --git a/templates/404.html b/templates/404.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta property="og:title" content="Klepp.me"/>
+    <meta property="og:type" content="website"/>
+    <meta property="og:image" content="https://klepp.me/favicon.ico"/>
+    <title>Klepp 404</title>
+    <style>
+    body {background: linear-gradient(90deg,#0f2027,#36474f 50%,#2c5364); color: white}
+    </style>
+</head>
+<body>
+<div class="404">
+    404 video not found
+</div>
+</body>
+</html>
diff --git a/templates/video.html b/templates/video.html
@@ -2,25 +2,36 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta property="og:title" content="Klepp"/>
+    <title>Klepp.me - {{video_dict.display_name}}</title>
+    <meta property="og:title" content="Klepp {{video_dict.name}}"/>
     <meta property="og:type" content="website"/>
-    <meta property="og:url" content="https://gg.klepp.me/{{path}}"/>
-    <meta property="og:video" content="https://gg.klepp.me/{{path}}"/>
-    <meta property="og:video:type" content="application/x-shockwave-flash">
-    <meta property="og:video:width" content="398">
-    <meta property="og:video:height" content="264">
-    <meta property="og:image" content="https://klepp.me/favicon.ico"/>
+    <meta property="og:url" content="{{video_dict.uri}}"/>
+    <meta property="og:video" content="{{video_dict.uri}}"/>
+
+    <meta property="og:image" content="{{video_dict.thumbnail_uri}}"/>
     <meta name="theme-color" content="#FF0000">
-    <title>Klepp video</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
+    <meta property="og:site_name" content="Klepp.me"/>
+    <meta property="og:title" content="{{video_dict.display_name}}" />
+    <meta name="description" content="Watch &#34;{{video_dict.display_name}}&#34; on Klepp.me">
+    <link rel="shortcut icon" href="https://klepp.me/favicon.ico">
+    <meta property="og:type" content="video.other">
+    <meta property="og:image" content="{{video_dict.thumbnail_uri}}" />
+    <meta property="og:image:secure_url" content="{{video_dict.thumbnail_uri}}" />
+    <meta property="og:image:type" content="image/jpeg" />
+    <meta property="og:updated_time" content="{{video_dict.uploaded_at}}" />
+    <meta property="og:url" content="{{video_dict.uri}}">
     <style>
-    body {background: linear-gradient(90deg,#0f2027,#36474f 50%,#2c5364)}
+    body {background: linear-gradient(90deg,#0f2027,#36474f 50%,#2c5364);}
     .videoplayer {width: 100%; height: 100%}
+    #videocontrols {width: 100%; height: 100%;}
     </style>
 </head>
 <body>
 <div class="videoplayer">
-    <video controls>
-        <source src="https://gg.klepp.me/{{path}}" type="video/mp4">
+    <video controls id="videocontrols">
+        <source src="{{ video_dict.uri }}" type="video/mp4">
         Your browser does not support the video tag.
     </video>
 </div>