pictures using carousel

hotfix
Pictures support
2024-12-06 19:27:30 +01:00 · 2023-04-01 17:09:12 +02:00 · 2023-04-01 16:35:17 +02:00 · 2023-04-01 15:48:27 +02:00 · 2023-03-29 11:23:14 +02:00 · 2023-03-29 09:05:36 +00:00
10 changed files with 148 additions and 23 deletions
@@ -40,7 +40,8 @@ Apply to: Main window (address bar)
 * Add custom amount of videos per page

 ## Credits
-[TheFrenchGhosty](https://thefrenchghosty.me) ([Github](https://github.com/TheFrenchGhosty)): Initial Dockerfile and fixes to a usable state.
+* [TheFrenchGhosty](https://thefrenchghosty.me) ([Github](https://github.com/TheFrenchGhosty)): Initial Dockerfile and fixes to a usable state.
+* [Jennifer Wjertzoch](https://wjertzochjennifer.medium.com): Carousel CSS Implementation

 ### External libraries
 * [TikScraperPHP](https://github.com/pablouser1/TikScraperPHP)
@@ -71,7 +71,7 @@ class RedirectController {
     * to_endpoint maps a TikTok URL into a ProxiTok-compatible endpoint URL.
     */
    static private function to_endpoint(string $url): string {
-        if (preg_match('%^(?:https?://|www\.)?(?:vm\.|vt\.)?tiktok\.com/(?:t/)?([A-Za-z0-9]+)%', $url, $m)) {
+        if (preg_match('%^(?:https?://)?(?:www\.)?(?:vm\.|vt\.)?tiktok\.com/(?:t/)?([A-Za-z0-9]+)%', $url, $m)) {
            // Short video URL
            return '/@placeholder/video/' . $m[1];
        } elseif (preg_match('%^https://www\.tiktok\.com/(.+)%', $url, $m)) {
@@ -1,7 +1,7 @@
 {
    "name": "pablouser1/proxitok",
    "description": "An alternative frontend for TikTok",
-    "version": "2.4.7.0",
+    "version": "2.4.8.1",
    "license": "AGPL-3.0-or-later",
    "type": "project",
    "authors": [
@@ -4,7 +4,7 @@
        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
        "This file is @generated automatically"
    ],
-    "content-hash": "97152c7473ad08a262f9db1af867faaa",
+    "content-hash": "15a71acabddd2588be9800ae1bb37c92",
    "packages": [
        {
            "name": "bramus/router",
@@ -303,16 +303,16 @@
        },
        {
            "name": "pablouser1/tikscraper",
-            "version": "v2.3.6.0",
+            "version": "v2.3.6.2",
            "source": {
                "type": "git",
                "url": "https://github.com/pablouser1/TikScraperPHP.git",
-                "reference": "23eff4120eecfb01ed27e049dc36ed14a967cef8"
+                "reference": "10394fb5fb5213d05fe0eb29f7582423fc15d08a"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/pablouser1/TikScraperPHP/zipball/23eff4120eecfb01ed27e049dc36ed14a967cef8",
-                "reference": "23eff4120eecfb01ed27e049dc36ed14a967cef8",
+                "url": "https://api.github.com/repos/pablouser1/TikScraperPHP/zipball/10394fb5fb5213d05fe0eb29f7582423fc15d08a",
+                "reference": "10394fb5fb5213d05fe0eb29f7582423fc15d08a",
                "shasum": ""
            },
            "require": {
@@ -346,9 +346,9 @@
            "description": "Get data from TikTok API",
            "support": {
                "issues": "https://github.com/pablouser1/TikScraperPHP/issues",
-                "source": "https://github.com/pablouser1/TikScraperPHP/tree/v2.3.6.0"
+                "source": "https://github.com/pablouser1/TikScraperPHP/tree/v2.3.6.2"
            },
-            "time": "2023-03-06T20:19:11+00:00"
+            "time": "2023-04-01T13:46:50+00:00"
        },
        {
            "name": "php-webdriver/webdriver",
@@ -614,16 +614,16 @@
        },
        {
            "name": "symfony/process",
-            "version": "v5.4.21",
+            "version": "v5.4.22",
            "source": {
                "type": "git",
                "url": "https://github.com/symfony/process.git",
-                "reference": "d4ce417ebcb0b7d090b4c178ed6d3accc518e8bd"
+                "reference": "4b850da0cc3a2a9181c1ed407adbca4733dc839b"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/process/zipball/d4ce417ebcb0b7d090b4c178ed6d3accc518e8bd",
-                "reference": "d4ce417ebcb0b7d090b4c178ed6d3accc518e8bd",
+                "url": "https://api.github.com/repos/symfony/process/zipball/4b850da0cc3a2a9181c1ed407adbca4733dc839b",
+                "reference": "4b850da0cc3a2a9181c1ed407adbca4733dc839b",
                "shasum": ""
            },
            "require": {
@@ -656,7 +656,7 @@
            "description": "Executes commands in sub-processes",
            "homepage": "https://symfony.com",
            "support": {
-                "source": "https://github.com/symfony/process/tree/v5.4.21"
+                "source": "https://github.com/symfony/process/tree/v5.4.22"
            },
            "funding": [
                {
@@ -672,7 +672,7 @@
                    "type": "tidelift"
                }
            ],
-            "time": "2023-02-21T19:46:44+00:00"
+            "time": "2023-03-06T21:29:33+00:00"
        }
    ],
    "packages-dev": [],
@@ -18,13 +18,47 @@ services:
    depends_on:
      - redis
      - signer
+    networks:
+      - proxitok
+    security_opt:
+      - no-new-privileges:true
+    cap_drop:
+      - ALL
+    cap_add:
+      - CHOWN
+      - SETGID
+      - SETUID
+
  redis:
    container_name: proxitok-redis
    image: redis:7-alpine
    command: redis-server --save 60 1 --loglevel warning
    restart: unless-stopped
+    networks:
+      - proxitok
+    user: nobody
+    read_only: true
+    security_opt:
+      - no-new-privileges:true
+    tmpfs:
+      - /data:size=10M,mode=0770,uid=65534,gid=65534,noexec,nosuid,nodev
+    cap_drop:
+      - ALL
+
  signer:
    container_name: proxitok-signer
    image: ghcr.io/pablouser1/signtok:master
+    networks:
+      - proxitok
+    user: nobody
+    read_only: true
+    security_opt:
+      - no-new-privileges:true
+    cap_drop:
+      - ALL
+
 volumes:
  proxitok-cache:
+
+networks:
+  proxitok:
@@ -0,0 +1,68 @@
+/*
+CREDITS:
+	CSS Taken from: https://levelup.gitconnected.com/how-to-make-a-fully-accessible-css-only-carousel-40e8bd62032b
+	Author: Jennifer Wjertzoch (https://wjertzochjennifer.medium.com)
+	CodePen: https://codepen.io/jwjertzoch/pen/JjyGeRy
+*/
+
+.carousel {
+  margin: 0 auto;
+  overflow: hidden;
+  text-align: center;
+}
+
+.slides {
+  width: 100%;
+  display: flex;
+  overflow-x: scroll;
+  scrollbar-width: none;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+}
+
+.slides::-webkit-scrollbar {
+  display: none;
+}
+
+.slides-item {
+	max-height: 75vh;
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  margin: 0 1rem;
+  position: relative;
+  scroll-snap-align: start;
+  transform: scale(1);
+  transform-origin: center center;
+  transition: transform .5s;
+  width: 100%;
+}
+
+.slides-item img {
+	max-height: 75vh;
+}
+
+.carousel__nav {
+  padding: 1.25rem .5rem;
+}
+
+.slider-nav {
+  align-items: center;
+  background-color: #ddd;
+  border-radius: 50%;
+  color: #000;
+  display: inline-flex;
+  height: 1.5rem;
+  justify-content: center;
+  padding: .5rem;
+  position: relative;
+  text-decoration: none;
+  width: 1.5rem;
+}
+
+.slider-nav:hover,
+.slider-nav:active {
+  background-color: #000;
+  color: #fff;
+}
@@ -31,5 +31,6 @@
 	{/if}
 	<link rel="stylesheet" href="{static('css', 'cssgg.min.css', true)}">
 	<link rel="stylesheet" href="{static('css', 'bulma.min.css', true)}">
+	<link rel="stylesheet" href="{static('css', 'carousel.css')}">
 	<title>{$title} - ProxiTok</title>
 </head>
@@ -0,0 +1,21 @@
+{if !isset($item->imagePost)}
+<video controls n:attr="autoplay => $isAutoplay" poster="{url_stream($item->video->originCover)}" preload="none">
+	<source src="{url_stream($item->video->playAddr)}" type="video/mp4" />
+</video>
+{else}
+<section class="carousel" aria-label="carousel" Tabindex="0">
+  <div class="slides">
+		{foreach $item->imagePost->images as $i => $image}
+		<div class="slides-item" id="image-{$i + 1}" tabindex="0">
+			<img src="{url_stream($image->imageURL->urlList[0])}" />
+		</div>
+		{/foreach}
+  </div>
+  <div class="carousel__nav">
+		{for $i = 0; $i < count($item->imagePost->images); $i++}
+		<a class="slider-nav" href="#image-{$i + 1}">{$i + 1}</a>
+		{/for}
+  </div>
+  <div class="carousel__skip-message" id="skip-link" tabindex="0"></div>
+</section>
+{/if}
@@ -18,11 +18,11 @@
 			<p>{include './common/tags.latte', challenges: $item->challenges}</p>
 			{/if}
 			<p n:ifcontent>{$item->desc}</p>
+			<p>Song: {$item->music->title}</p>
+			<audio controls preload="none" src="{$item->music->playUrl}"></audio>
 			{include './common/stats.latte', playCount: $item->stats->playCount, diggCount: $item->stats->diggCount, commentCount: $item->stats->commentCount, shareCount: $item->stats->shareCount}
 			<div class="has-text-centered">
-				<video width="{$item->video->width}" height="{$item->video->height}" controls preload="none" poster="{url_stream($item->video->originCover)}">
-					<source src="{url_stream($item->video->playAddr)}" type="video/mp4" />
-				</video>
+				{include './common/content.latte', item: $item, isAutoplay: false, isBig: false}
 			</div>
 			<p class="has-text-centered"><b>Download video</b></p>
 			{include './common/download.latte', playAddr: $item->video->playAddr, id: $item->id, uniqueId: $item->author->uniqueId}
@@ -9,11 +9,9 @@
 {/if}

 {block content}
-	<div class="columns is-centered is-vcentered is-gapless">
+	<div class="columns is-centered is-vcentered">
 		<div class="column has-text-centered">
-			<video controls autoplay poster="{url_stream($item->video->originCover)}">
-				<source src="{url_stream($item->video->playAddr)}" type="video/mp4" />
-			</video>
+			{include '../components/themes/common/content.latte', item: $item, isAutoplay: true, isBig: true}
 		</div>
 		<div class="column">
 			<div class="box">
@@ -36,6 +34,8 @@
 						{/if}
 						<div class="content">
 							<p n:ifcontent>{$item->desc}</p>
+							<p>Song: {$item->music->title}</p>
+							<audio controls preload="none" src="{$item->music->playUrl}"></audio>
 							{include '../components/themes/common/stats.latte', playCount: $item->stats->playCount, diggCount: $item->stats->diggCount, commentCount: $item->stats->commentCount, shareCount: $item->stats->shareCount}
 							<div class="has-text-centered">
 								{include '../components/themes/common/share.latte', uniqueId: $info->detail->uniqueId, id: $item->id}
Author	SHA1	Message	Date
Pablo Ferreiro	e5d416f696	pictures using carousel	2023-04-01 17:09:12 +02:00
Pablo Ferreiro	98a9ec2b65	hotfix	2023-04-01 16:35:17 +02:00
Pablo Ferreiro	33c723d786	Pictures support	2023-04-01 15:48:27 +02:00
Pablo Ferreiro	faee8d58f2	bump	2023-03-29 11:23:14 +02:00
Pablo Ferreiro	75e13bc7d2	Merge pull request #140 from NoPlagiarism/www_shortened Fix https:// + www in redirections (fixes #139)	2023-03-29 09:05:36 +00:00
Pablo Ferreiro	08145ee90b	Merge pull request #135 from kuanhulio/master harden docker-compose	2023-03-29 09:04:10 +00:00
NoPlagiarism	6194324452	Fix https:// + www in redirections (#139 )	2023-03-29 07:39:36 +05:00
Nullnet Services Administrator	48eccbc5ec	harden docker-compose	2023-03-18 21:10:24 -05:00