Working Docker

.dockerignore

@@ -0,0 +1,8 @@
+node_modules
+/.env
+/.vscode
+/vendor
+/cache/latte/*
+!/cache/latte/.gitkeep
+/cache/api/*
+!/cache/api/.gitkeep

Dockerfile

@@ -0,0 +1,15 @@
+FROM php:8.0-apache
+WORKDIR /var/www/html
+
+COPY --from=composer /usr/bin/composer /usr/bin/composer
+RUN apt update -y && apt install -y libzip-dev \
+    && pecl install redis zip \
+    && docker-php-ext-enable redis zip \
+    && a2enmod rewrite headers
+
+RUN ["mkdir", "/cache"]
+RUN ["chown", "-R", "www-data:www-data", "/cache"]
+
+COPY . .
+RUN composer update \
+    && composer install --no-interaction --optimize-autoloader --no-dev

components/form.latte

@@ -0,0 +1,8 @@
+<form action="{path($path)}" method="POST">
+	{block fields}{/block}
+  <div class="field">
+    <div class="control">
+      <button class="button is-success" type="submit">Submit</button>
+    </div>
+  </div>
+</form>

components/head.latte

@@ -5,7 +5,6 @@
 	<meta property="og:title" content="ProxiTok" />
 	<meta property="og:description" content="Alternative frontend for TikTok" />
 	<meta property="og:type" content="website" />
-	<!-- <link rel="stylesheet" href="{path('/styles/vendor/fontawesome.min.css')}"> -->
 	<link rel="stylesheet" href="{path('/styles/vendor/bulma.min.css')}">
 	<title>{$title} - ProxiTok</title>
 </head>

components/rss.latte

@@ -0,0 +1,3 @@
+<a href="{path($_SERVER['REQUEST_URI'] . '/rss')}">
+	{include './icon.latte', icon: 'feed', text: 'RSS'}
+</a>

components/settings/api.latte

@@ -1,14 +1,14 @@
-<form action="{path('/settings/api')}" method="POST">
+{embed '../form.latte', path: '/settings/api'}
+{block fields}
 	<div class="field">
-		<label class="checkbox">
+		<label class="label">Legacy mode</label>
-			<input name="api-legacy" type="checkbox"
+		<div class="select">
-				checked="{isset($_COOKIE['api-legacy']) && $_COOKIE['api-legacy'] === 'on' ? 'true' : 'false'}"
+			<select name="api-legacy">
-				value="{isset($_COOKIE['api-legacy']) ? $_COOKIE['api-legacy'] : 'off'}">Enable legacy mode
+				<option hidden disabled selected value> -- Select an option -- </option>
-		</label>
+				<option value="on">On</option>
+				<option value="off">Off</option>
+			</select>
+		</div>
   </div>
-  <div class="field">
+{/block}
-    <div class="control">
+{/embed}
-      <button class="button is-success" type="submit">Submit</button>
-    </div>
-  </div>
-</form>

components/settings/proxy.latte

@@ -1,4 +1,5 @@
-<form action="{path('/settings/proxy')}" method="POST">
+{embed '../form.latte', path: '/settings/proxy'}
+{block fields}
 	{foreach $proxy_elements as $proxy_element}
 	<div class="field">
 		<label class="label">{$proxy_element|firstUpper}</label>
@@ -7,9 +8,5 @@
     </div>
   </div>
   {/foreach}
-  <div class="field">
+{/block}
-    <div class="control">
+{/embed}
-      <button class="button is-success" type="submit">Submit</button>
-    </div>
-  </div>
-</form>

docker-compose.yml

@@ -0,0 +1,34 @@
+version: '3'
+
+services:
+  web:
+    container_name: proxitok-web
+    build: .
+    ports:
+      - 8080:80
+    environment:
+      - LATTE_CACHE=/cache
+      - API_CACHE=redis
+      - REDIS_HOST=proxitok-redis
+      - REDIS_PORT=6379
+      - API_BROWSER_URL=http://proxitok-chrome:9515
+    volumes:
+      - proxitok-cache:/cache
+    depends_on:
+      - redis
+      - chrome
+
+  redis:
+    container_name: proxitok-redis
+    image: redis:6-alpine
+    command: redis-server --save 60 1 --loglevel warning
+    restart: unless-stopped
+
+  chrome:
+    container_name: proxitok-chrome
+    image: zenika/alpine-chrome:with-chromedriver
+    shm_size: 1g
+    ports:
+      - "9515:9515"
+volumes:
+  proxitok-cache:

scss/fontawesome.scss

@@ -1,2 +0,0 @@
-@import "./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
-@import "./node_modules/@fortawesome/fontawesome-free/scss/solid.scss";

scss/package.json

@@ -2,11 +2,9 @@
   "name": "proxitok-scss",
   "private": true,
   "scripts": {
-    "bulma": "sass --style=compressed bulma.scss ./styles/vendor/bulma.min.css",
+    "bulma": "sass --style=compressed bulma.scss ../styles/vendor/bulma.min.css"
-    "fa": "sass --style=compressed fontawesome.scss ./styles/vendor/fontawesome.min.css"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.0.0",
     "bulma": "^0.9.3",
     "bulmaswatch": "^0.8.1",
     "sass": "^1.46.0"

scss/yarn.lock

@@ -2,11 +2,6 @@
 # yarn lockfile v1
 
 
-"@fortawesome/fontawesome-free@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.0.0.tgz#6f3bd8e42997c7d536a1246877ed8bcd4f005a54"
-  integrity sha512-6LB4PYBST1Rx40klypw1SmSDArjFOcfBf2LeX9Zg5EKJT2eXiyiJq+CyBYKeXyK0sXS2FsCJWSPr/luyhuvh0Q==
-
 anymatch@~3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"

views/settings.latte

@@ -6,9 +6,9 @@
 
 {block content}
 	<!-- Proxy settings -->
-	<p class="title">Proxy</p>
-	{include '../components/settings/proxy.latte'}
-	<hr />
 	<p class="title">Api</p>
 	{include '../components/settings/api.latte'}
+	<hr />
+	<p class="title">Proxy</p>
+	{include '../components/settings/proxy.latte'}
 {/block}

views/tag.latte

@@ -1,10 +1,14 @@
 {layout '../layouts/default.latte'}
 
 {block header}
+	{if $feed->info->detail->profileThumb !== ''}
+	<figure class="figure is-96x96">
+		<img src="{path('/stream?url=' . urlencode($feed->info->detail->profileThumb))}" />
+	</figure>
+	{/if}
 	<p class="title">{$feed->info->detail->title}</p>
-	<p class="subtitle">{$feed->info->detail->desc}</p>
+	<p class="subtitle">{include '../components/rss.latte'}</p>
 	<p>Videos: {number($feed->info->stats->videoCount)} / Views: {number($feed->info->stats->viewCount)}</p>
-	<a href="{path('/tag/' . $feed->info->detail->title . '/rss')}">RSS</a>
 {/block}
 
 {block content}

views/trending.latte

@@ -2,7 +2,7 @@
 
 {block header}
 	<p class="title">Trending</p>
-	<a href="{path('/trending/rss')}">RSS</a>
+	<p class="subtitle">{include '../components/rss.latte'}</p>
 {/block}
 
 {block content}

views/user.latte

@@ -4,11 +4,11 @@
 	<figure class="figure is-96x96">
 		<img src="{path('/stream?url=' . urlencode($feed->info->detail->avatarThumb))}" />
 	</figure>
-	<p class="title">{$feed->info->detail->uniqueId}'s profile</p>
+	<p class="title">{$feed->info->detail->uniqueId}</p>
-	<p class="subtitle">{$feed->info->detail->signature}</p>
+	<p class="subtitle">{include '../components/rss.latte'}</p>
+	<p>{$feed->info->detail->signature}</p>
 	<p>Following: {number($feed->info->stats->followingCount)} / Followers: {number($feed->info->stats->followerCount)}</p>
 	<p>Hearts: {number($feed->info->stats->heartCount)} / Videos: {$feed->info->stats->videoCount}</p>
-	<a href="{path('/@' . $feed->info->detail->uniqueId . '/rss')}">RSS</a>
 {/block}
 
 {block content}

views/video.latte

@@ -21,8 +21,8 @@
 					</div>
 					<div class="dropdown-menu" role="menu">
 						<div class="dropdown-content">
-					<a href="{path('/download?url=' . urlencode($item->video->playAddr) . '&id=' . $item->id . '&user=' . $item->author->uniqueId) . '&watermark='}" class="dropdown-item">Watermark</a>
+							<a href="{path('/download?url=' . urlencode($item->video->playAddr) . '&id=' . $item->id . '&user=' . $feed->info->detail->uniqueId) . '&watermark='}" class="dropdown-item">Watermark</a>
-					<a href="{path('/download?id=' . $item->id . '&user=' . $feed->info->detail->uniqueId)}" class="dropdown-item">No watermark</a>
+							<a href="{path('/download?id=' . $item->id . '&user=' . $feed->info->detail->uniqueId)}" class="dropdown-item">No watermark</a>
 						</div>
 					</div>
 				</div>