From 37cedaee9fec1cb9db15ee9a13641bc27a06a0f9 Mon Sep 17 00:00:00 2001 From: Aevann1 Date: Fri, 9 Dec 2022 08:35:56 +0200 Subject: [PATCH] add thumbnails for videos on the frontpage --- files/assets/css/main.css | 412 ++++++++++++------------ files/routes/posts.py | 4 + files/templates/submission_listing.html | 4 + 3 files changed, 220 insertions(+), 200 deletions(-) diff --git a/files/assets/css/main.css b/files/assets/css/main.css index c367e8a0a..e6d8fca31 100644 --- a/files/assets/css/main.css +++ b/files/assets/css/main.css @@ -1,4 +1,206 @@ @charset "UTF-8"; + +.fa-align-left:before{content:"\f036"} +.fa-long-arrow-left:before{content:"\f177"} +.fa-arrow-right:before{content:"\f061"} +.fa-sign-out:before{content:"\f08b"} +.fa-long-arrow-right:before{content:"\f178"} +.fa-arrows-v:before{content:"\f07d"} +.fa-award:before{content:"\f559"} +.fa-badge:before{content:"\f335"} +.fa-badge-check:before{content:"\f336"} +.fa-ban:before{content:"\f05e"} +.fa-bars:before{content:"\f0c9"} +.fa-bell:before{content:"\f0f3"} +.fa-bold:before{content:"\f032"} +.fa-book:before{content:"\f02d"} +.fa-book-open:before{content:"\f518"} +.fa-book-dead:before{content:"\f6b7"} +.fa-broom:before{content:"\f51a"} +.fa-bug:before{content:"\f188"} +.fa-bullhorn:before{content:"\f0a1"} +.fa-calendar:before{content:"\f133"} +.fa-calendar-day:before{content:"\f783"} +.fa-calendar-alt:before{content:"\f073"} +.fa-calendar-week:before{content:"\f784"} +.fa-campfire:before{content:"\f6ba"} +.fa-candy-cane:before{content:"\f786"} +.fa-car-tilt:before{content:"\f5e5"} +.fa-cat:before{content:"\f6be"} +.fa-check:before{content:"\f00c"} +.fa-circle:before{content:"\f111"} +.fa-check-circle:before{content:"\f058"} +.fa-arrow-alt-circle-down:before{content:"\f358"} +.fa-exclamation-circle:before{content:"\f06a"} +.fa-info-circle:before{content:"\f05a"} +.fa-radiation-alt:before{content:"\f7ba"} +.fa-arrow-alt-circle-up:before{content:"\f35b"} +.fa-user-circle:before{content:"\f2bd"} +.fa-times-circle:before{content:"\f057"} +.fa-clipboard:before{content:"\f328"} +.fa-clipboard-check:before{content:"\f46c"} +.fa-clock:before{content:"\f017"} +.fa-history:before{content:"\f1da"} +.fa-code:before{content:"\f121"} +.fa-comment:before{content:"\f075"} +.fa-comment-dots:before{content:"\f4ad"} +.fa-comments:before{content:"\f086"} +.fa-copy:before{content:"\f0c5"} +.fa-crown:before{content:"\f521"} +.fa-dice-six:before{content:"\f526"} +.fa-dollar-sign:before{content:"\24"} +.fa-arrow-alt-down:before{content:"\f354"} +.fa-compress-alt:before{content:"\f422"} +.fa-ellipsis-h:before{content:"\f141"} +.fa-envelope:before{content:"\f0e0"} +.fa-envelope-open-text:before{content:"\f658"} +.fa-eye:before{content:"\f06e"} +.fa-eye-evil:before{content:"\f6db"} +.fa-eye-slash:before{content:"\f070"} +.fa-angry:before{content:"\f556"} +.fa-frown:before{content:"\f119"} +.fa-grin-beam-sweat:before{content:"\f583"} +.fa-laugh-squint:before{content:"\f59b"} +.fa-smile-beam:before{content:"\f5b8"} +.fa-feather-alt:before{content:"\f56b"} +.fa-file-signature:before{content:"\f573"} +.fa-filter:before{content:"\f0b0"} +.fa-fire:before{content:"\f06d"} +.fa-fireplace:before{content:"\f79a"} +.fa-fish:before{content:"\f578"} +.fa-flag:before{content:"\f024"} +.fa-flag-usa:before{content:"\f74d"} +.fa-save:before{content:"\f0c7"} +.fa-gavel:before{content:"\f0e3"} +.fa-cog:before{content:"\f013"} +.fa-ghost:before{content:"\f6e2"} +.fa-gift:before{content:"\f06b"} +.fa-gingerbread-man:before{content:"\f79d"} +.fa-globe:before{content:"\f0ac"} +.fa-home-alt:before{content:"\f015"} +.fa-id-badge:before{content:"\f2c1"} +.fa-id-card:before{content:"\f2c2"} +.fa-image:before{content:"\f03e"} +.fa-infinity:before{content:"\f534"} +.fa-italic:before{content:"\f033"} +.fa-knife-kitchen:before{content:"\f6f5"} +.fa-lights-holiday:before{content:"\f7b2"} +.fa-link:before{content:"\f0c1"} +.fa-link-slash:before{content:"\f127"} +.fa-lock:before{content:"\f023"} +.fa-lock-alt:before{content:"\f30d"} +.fa-search:before{content:"\f002"} +.fa-cloudflare:before{content:"\e07d"} +.fa-comment-alt-smile:before{content:"\f4aa"} +.fa-microphone-stand:before{content:"\f8cb"} +.fa-palette:before{content:"\f53f"} +.fa-edit:before{content:"\f044"} +.fa-pizza-slice:before{content:"\f818"} +.fa-poop:before{content:"\f619"} +.fa-quote-right:before{content:"\f10e"} +.fa-reply:before{content:"\f3e5"} +.fa-robot:before{content:"\f544"} +.fa-sack-dollar:before{content:"\f81d"} +.fa-scroll-old:before{content:"\f70f"} +.fa-seedling:before{content:"\f4d8"} +.fa-shield:before{content:"\f132"} +.fa-random:before{content:"\f074"} +.fa-smoke:before{content:"\f760"} +.fa-snooze:before{content:"\f880"} +.fa-snowflake:before{content:"\f2dc"} +.fa-sparkles:before{content:"\f890"} +.fa-ticket:before{content:"\f145"} +.fa-cards:before{content:"\e3ed"} +.fa-spider:before{content:"\f717"} +.fa-square:before{content:"\f0c8"} +.fa-stocking:before{content:"\f7d5"} +.fa-store:before{content:"\f54e"} +.fa-columns:before{content:"\f0db"} +.fa-thumbtack:before{content:"\f08d"} +.fa-train:before{content:"\f238"} +.fa-trash-alt:before{content:"\f2ed"} +.fa-exclamation-triangle:before{content:"\f071"} +.fa-trophy:before{content:"\f091"} +.fa-arrow-alt-up:before{content:"\f357"} +.fa-expand-alt:before{content:"\f424"} +.fa-external-link-alt:before{content:"\f35d"} +.fa-user:before{content:"\f007"} +.fa-user-crown:before{content:"\f6a4"} +.fa-user-cog:before{content:"\f4fe"} +.fa-user-friends:before{content:"\f500"} +.fa-user-lock:before{content:"\f502"} +.fa-user-minus:before{content:"\f503"} +.fa-user-plus:before{content:"\f234"} +.fa-user-slash:before{content:"\f506"} +.fa-user-tag:before{content:"\f507"} +.fa-user-times:before{content:"\f235"} +.fa-users:before{content:"\f0c0"} +.fa-volume:before{content:"\f6a8"} +.fa-volume-mute:before{content:"\f6a9"} +.fa-times:before{content:"\f00d"} +.fa-mobile:before{content:"\f3ce"} +.fa-discord:before{content:"\f392"} +.fa-github:before{content:"\f09b"} +.fa-twitter:before{content:"\f099"} +.fa-git-alt:before{content:"\f841"} +.fa-head-side:before{content:"\f6e9"} +.fa-crab:before{content:"\e3ff"} +.fa-socks:before{content:"\f696"} +.fa-arrow-up:before{content:"\f062"} +.fa-tag:before{content:"\f02b"} +.fa-messages:before{content:"\f4b6"} +.fa-user-secret:before{content:"\f21b"} +.fa-gas-pump-slash:before{content:"\f5f4"} +.fa-gas-pump:before{content:"\f52f"} +.fa-hammer-crash:before{content:"\e414"} +.fa-music:before{content:"\f001"} +.fa-arrow-rotate-right:before{content:"\f01e"} +.fa-columns-3:before{content:"\e361"} +.fa-bahai:before{content:"\f666"} +.fa-party-horn:before{content:"\e31b"} +.fa-pinata:before{content:"\e3c3"} +.fa-file:before{content:"\f15b"} +.fa-box-open:before{content:"\f49e"} +.fa-eyes:before{content:"\e367"} +.fa-hexagon:before{content:"\f312"} +.fa-arrow-right-arrow-left:before{content:"\f0ec"} +.fa-coins:before{content:"\f51e"} +.fa-bell-slash:before{content:"\f1f6"} +.fa-chart-network:before{content:"\f78a"} +.fa-square-share-nodes:before{content:"\f1e1"} +.fa-sidebar:before{content:"\e24e"} +.fa-panorama:before{content:"\e209"} +.fa-external-link:before{content:"\f08e"} +.fa-circle-info:before{content:"\f05a"} +.fa-comment-question:before{content:"\e14b"} +.fa-sitemap:before{content:"\f0e8"} +.fa-grid:before{content:"\e195"} +.fa-x:before{content:"\58"} +.fa-paw-simple:before{content:"\f701"} +.fa-bat:before{content:"\f6b5"} +.fa-star-of-david:before{content:"\f69a"} +.fa-hat-cowboy:before{content:"\f8c0"} +.fa-cloud-rainbow:before{content:"\f73e"} +.fa-telegram:before{content:"\f2c6"} +.fa-css3-alt:before{content:"\f38b"} +.fa-landscape:before{content:"\e1b5"} +.fa-user-ninja:before{content:"\f504"} +.fa-trees:before{content:"\f724"} +.fa-flashlight:before{content:"\f8b8"} +.fa-candy-corn:before{content:"\f6bd"} +.fa-shirt:before{content:"\f553"} +.fa-bone:before{content:"\f5d7"} +.fa-jack-o-lantern:before{content:"\f30e"} +.fa-cloud-bolt:before{content:"\f76c"} +.fa-biohazard:before{content:"\f780"} +.fa-syringe:before{content:"\f48e"} +.fa-spider-web:before{content:"\f719"} +.fa-coffin-cross:before{content:"\e051"} +.fa-face-sleeping:before{content:"\e38d"} +.fa-block-question:before{content:"\e3dd"} +.fa-image-slash:before{content:"\e1b7"} +.fa-play:before{content:"\f04b"} + button { background: none; border: none; @@ -5696,6 +5898,16 @@ g { border-radius:.35rem; } +.video-play { + position:absolute; + bottom: 35%; + right: 40%; + font-size:14px; + color:white; + background-color:var(--primary); + padding:5px 5px 3px 7px; + border-radius:.35rem; +} /* ------- Font Awesome ------- */ @font-face{ font-family:"Font Awesome 6 Pro"; @@ -5876,206 +6088,6 @@ g { .fa-stack-1x{line-height:inherit} .fa-stack-2x{font-size:2em} -.fa-align-left:before{content:"\f036"} -.fa-long-arrow-left:before{content:"\f177"} -.fa-arrow-right:before{content:"\f061"} -.fa-sign-out:before{content:"\f08b"} -.fa-long-arrow-right:before{content:"\f178"} -.fa-arrows-v:before{content:"\f07d"} -.fa-award:before{content:"\f559"} -.fa-badge:before{content:"\f335"} -.fa-badge-check:before{content:"\f336"} -.fa-ban:before{content:"\f05e"} -.fa-bars:before{content:"\f0c9"} -.fa-bell:before{content:"\f0f3"} -.fa-bold:before{content:"\f032"} -.fa-book:before{content:"\f02d"} -.fa-book-open:before{content:"\f518"} -.fa-book-dead:before{content:"\f6b7"} -.fa-broom:before{content:"\f51a"} -.fa-bug:before{content:"\f188"} -.fa-bullhorn:before{content:"\f0a1"} -.fa-calendar:before{content:"\f133"} -.fa-calendar-day:before{content:"\f783"} -.fa-calendar-alt:before{content:"\f073"} -.fa-calendar-week:before{content:"\f784"} -.fa-campfire:before{content:"\f6ba"} -.fa-candy-cane:before{content:"\f786"} -.fa-car-tilt:before{content:"\f5e5"} -.fa-cat:before{content:"\f6be"} -.fa-check:before{content:"\f00c"} -.fa-circle:before{content:"\f111"} -.fa-check-circle:before{content:"\f058"} -.fa-arrow-alt-circle-down:before{content:"\f358"} -.fa-exclamation-circle:before{content:"\f06a"} -.fa-info-circle:before{content:"\f05a"} -.fa-radiation-alt:before{content:"\f7ba"} -.fa-arrow-alt-circle-up:before{content:"\f35b"} -.fa-user-circle:before{content:"\f2bd"} -.fa-times-circle:before{content:"\f057"} -.fa-clipboard:before{content:"\f328"} -.fa-clipboard-check:before{content:"\f46c"} -.fa-clock:before{content:"\f017"} -.fa-history:before{content:"\f1da"} -.fa-code:before{content:"\f121"} -.fa-comment:before{content:"\f075"} -.fa-comment-dots:before{content:"\f4ad"} -.fa-comments:before{content:"\f086"} -.fa-copy:before{content:"\f0c5"} -.fa-crown:before{content:"\f521"} -.fa-dice-six:before{content:"\f526"} -.fa-dollar-sign:before{content:"\24"} -.fa-arrow-alt-down:before{content:"\f354"} -.fa-compress-alt:before{content:"\f422"} -.fa-ellipsis-h:before{content:"\f141"} -.fa-envelope:before{content:"\f0e0"} -.fa-envelope-open-text:before{content:"\f658"} -.fa-eye:before{content:"\f06e"} -.fa-eye-evil:before{content:"\f6db"} -.fa-eye-slash:before{content:"\f070"} -.fa-angry:before{content:"\f556"} -.fa-frown:before{content:"\f119"} -.fa-grin-beam-sweat:before{content:"\f583"} -.fa-laugh-squint:before{content:"\f59b"} -.fa-smile-beam:before{content:"\f5b8"} -.fa-feather-alt:before{content:"\f56b"} -.fa-file-signature:before{content:"\f573"} -.fa-filter:before{content:"\f0b0"} -.fa-fire:before{content:"\f06d"} -.fa-fireplace:before{content:"\f79a"} -.fa-fish:before{content:"\f578"} -.fa-flag:before{content:"\f024"} -.fa-flag-usa:before{content:"\f74d"} -.fa-save:before{content:"\f0c7"} -.fa-gavel:before{content:"\f0e3"} -.fa-cog:before{content:"\f013"} -.fa-ghost:before{content:"\f6e2"} -.fa-gift:before{content:"\f06b"} -.fa-gingerbread-man:before{content:"\f79d"} -.fa-globe:before{content:"\f0ac"} -.fa-home-alt:before{content:"\f015"} -.fa-id-badge:before{content:"\f2c1"} -.fa-id-card:before{content:"\f2c2"} -.fa-image:before{content:"\f03e"} -.fa-infinity:before{content:"\f534"} -.fa-italic:before{content:"\f033"} -.fa-knife-kitchen:before{content:"\f6f5"} -.fa-lights-holiday:before{content:"\f7b2"} -.fa-link:before{content:"\f0c1"} -.fa-link-slash:before{content:"\f127"} -.fa-lock:before{content:"\f023"} -.fa-lock-alt:before{content:"\f30d"} -.fa-search:before{content:"\f002"} -.fa-cloudflare:before{content:"\e07d"} -.fa-comment-alt-smile:before{content:"\f4aa"} -.fa-microphone-stand:before{content:"\f8cb"} -.fa-palette:before{content:"\f53f"} -.fa-edit:before{content:"\f044"} -.fa-pizza-slice:before{content:"\f818"} -.fa-poop:before{content:"\f619"} -.fa-quote-right:before{content:"\f10e"} -.fa-reply:before{content:"\f3e5"} -.fa-robot:before{content:"\f544"} -.fa-sack-dollar:before{content:"\f81d"} -.fa-scroll-old:before{content:"\f70f"} -.fa-seedling:before{content:"\f4d8"} -.fa-shield:before{content:"\f132"} -.fa-random:before{content:"\f074"} -.fa-smoke:before{content:"\f760"} -.fa-snooze:before{content:"\f880"} -.fa-snowflake:before{content:"\f2dc"} -.fa-sparkles:before{content:"\f890"} -.fa-ticket:before{content:"\f145"} -.fa-cards:before{content:"\e3ed"} -.fa-spider:before{content:"\f717"} -.fa-square:before{content:"\f0c8"} -.fa-stocking:before{content:"\f7d5"} -.fa-store:before{content:"\f54e"} -.fa-columns:before{content:"\f0db"} -.fa-thumbtack:before{content:"\f08d"} -.fa-train:before{content:"\f238"} -.fa-trash-alt:before{content:"\f2ed"} -.fa-exclamation-triangle:before{content:"\f071"} -.fa-trophy:before{content:"\f091"} -.fa-arrow-alt-up:before{content:"\f357"} -.fa-expand-alt:before{content:"\f424"} -.fa-external-link-alt:before{content:"\f35d"} -.fa-user:before{content:"\f007"} -.fa-user-crown:before{content:"\f6a4"} -.fa-user-cog:before{content:"\f4fe"} -.fa-user-friends:before{content:"\f500"} -.fa-user-lock:before{content:"\f502"} -.fa-user-minus:before{content:"\f503"} -.fa-user-plus:before{content:"\f234"} -.fa-user-slash:before{content:"\f506"} -.fa-user-tag:before{content:"\f507"} -.fa-user-times:before{content:"\f235"} -.fa-users:before{content:"\f0c0"} -.fa-volume:before{content:"\f6a8"} -.fa-volume-mute:before{content:"\f6a9"} -.fa-times:before{content:"\f00d"} -.fa-mobile:before{content:"\f3ce"} -.fa-discord:before{content:"\f392"} -.fa-github:before{content:"\f09b"} -.fa-twitter:before{content:"\f099"} -.fa-git-alt:before{content:"\f841"} -.fa-head-side:before{content:"\f6e9"} -.fa-crab:before{content:"\e3ff"} -.fa-socks:before{content:"\f696"} -.fa-arrow-up:before{content:"\f062"} -.fa-tag:before{content:"\f02b"} -.fa-messages:before{content:"\f4b6"} -.fa-user-secret:before{content:"\f21b"} -.fa-gas-pump-slash:before{content:"\f5f4"} -.fa-gas-pump:before{content:"\f52f"} -.fa-hammer-crash:before{content:"\e414"} -.fa-music:before{content:"\f001"} -.fa-arrow-rotate-right:before{content:"\f01e"} -.fa-columns-3:before{content:"\e361"} -.fa-bahai:before{content:"\f666"} -.fa-party-horn:before{content:"\e31b"} -.fa-pinata:before{content:"\e3c3"} -.fa-file:before{content:"\f15b"} -.fa-box-open:before{content:"\f49e"} -.fa-eyes:before{content:"\e367"} -.fa-hexagon:before{content:"\f312"} -.fa-arrow-right-arrow-left:before{content:"\f0ec"} -.fa-coins:before{content:"\f51e"} -.fa-bell-slash:before{content:"\f1f6"} -.fa-chart-network:before{content:"\f78a"} -.fa-square-share-nodes:before{content:"\f1e1"} -.fa-sidebar:before{content:"\e24e"} -.fa-panorama:before{content:"\e209"} -.fa-external-link:before{content:"\f08e"} -.fa-circle-info:before{content:"\f05a"} -.fa-comment-question:before{content:"\e14b"} -.fa-sitemap:before{content:"\f0e8"} -.fa-grid:before{content:"\e195"} -.fa-x:before{content:"\58"} -.fa-paw-simple:before{content:"\f701"} -.fa-bat:before{content:"\f6b5"} -.fa-star-of-david:before{content:"\f69a"} -.fa-hat-cowboy:before{content:"\f8c0"} -.fa-cloud-rainbow:before{content:"\f73e"} -.fa-telegram:before{content:"\f2c6"} -.fa-css3-alt:before{content:"\f38b"} -.fa-landscape:before{content:"\e1b5"} -.fa-user-ninja:before{content:"\f504"} -.fa-trees:before{content:"\f724"} -.fa-flashlight:before{content:"\f8b8"} -.fa-candy-corn:before{content:"\f6bd"} -.fa-shirt:before{content:"\f553"} -.fa-bone:before{content:"\f5d7"} -.fa-jack-o-lantern:before{content:"\f30e"} -.fa-cloud-bolt:before{content:"\f76c"} -.fa-biohazard:before{content:"\f780"} -.fa-syringe:before{content:"\f48e"} -.fa-spider-web:before{content:"\f719"} -.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; margin-left: 0.25rem; diff --git a/files/routes/posts.py b/files/routes/posts.py index 8f6ec3274..f0b65a313 100644 --- a/files/routes/posts.py +++ b/files/routes/posts.py @@ -745,6 +745,10 @@ def submit_post(v:User, sub=None): post.thumburl = process_image(name2, v, resize=100) elif file.content_type.startswith('video/'): post.url = process_video(file, v) + name = f'/images/{time.time()}'.replace('.','') + '.webp' + # prints a lot of shit in console, pls fix snekdaddy + subprocess.run(['ffmpeg', '-i', post.url, '-vf', '"select=eq(n\,0)"', "-vf", "scale=100:-2", "-q:v", "3", "-frames:v", "1", name], check=True) + post.thumburl = name elif file.content_type.startswith('audio/'): post.url = process_audio(file, v) else: diff --git a/files/templates/submission_listing.html b/files/templates/submission_listing.html index 0f8ccd460..2aac5366b 100644 --- a/files/templates/submission_listing.html +++ b/files/templates/submission_listing.html @@ -84,10 +84,14 @@ {% elif p.is_video or p.is_audio %} post thumbnail + {% if p.is_video %} + + {% endif %} {% elif p.is_youtube %} post thumbnail + {% else %}