Merge pull request #224 from pablouser1/scraper_rewrite

v2.5.0.0: "Hopefully fixing the mess" edition (BREAKING CHANGES!)

.dockerignore

@@ -0,0 +1,6 @@
+node_modules
+.env
+.git
+.vscode
+vendor
+cache

.editorconfig

@@ -22,7 +22,7 @@ indent_style = space
 indent_size = 4
 
 [**.latte]
-indent_style = tab
+indent_style = space
 indent_size = 2
 
 [**.html]

.env.example

@@ -1,22 +1,20 @@
-# APP_URL="http://localhost:8000" # Full url path, PLEASE REPLACE TO YOUR OWN ONE
+# APP_URL="http://localhost:8000" # Absolute path to proxitok instance
+# LATTE_CACHE=/tmp/proxitok_api # Path for Latte cache, leave commented for ./cache/latte
 
 # API CONFIG
-# USE_TEST_ENDPOINTS=1 # Discomment for usage of testing TikTok endpoints, may help sometimes
-# SIGNER_URL="https://example.com" # External signing service
-# FORCE_LEGACY=1 # Force legacy mode for wrapper
+# API_CHROMEDRIVER=http://localhost:4444
+# API_VERIFYFP=verify_...
+# API_DEVICE_ID=586094...
+# API_CACHE=redis
 
-# Proxy Config, will be used to make TikTok requests, useful if having VERIFY_CODE issues
-# PROXY_HOST=HOSTNAME
-# PROXY_PORT=8080
-# PROXY_USERNAME=USERNAME
-# PROXY_PASSWORD=PASSWORD
-# LATTE_CACHE=/tmp/proxitok_api # Path for Latte cache, leave commented for ./cache/latte
-# API_CACHE=redis # Cache engine for TikTok Api, (more info on README)
-
-# Redis cache, used on Helpers\CacheEngines\RedisCache (CHOOSE ONE)
+# Redis cache, used on App\Cache\RedisCache (CHOOSE ONE)
 # REDIS_HOST=localhost # Host or path to unix socket
 # REDIS_PORT=6379 # Set to -1 to use unix socket
 # REDIS_PASSWORD=example # Leave commented for no password
 
-# JSON cache, used on Helpers\CacheEngines\JSONCache
+# JSON cache, used on App\Cache\JSONCache
 # API_CACHE_JSON=/tmp/proxitok_api # Path for JSON API Cache, leave commented for ./cache/api
+
+# PROXY="https://user:password@host:port" # Host to be used as proxy, make sure to type a valid protocol. Available: http:// | https:// | socks4:// | socks5://
+
+# USER_AGENT="Mozilla/5.0 (Android 12; Mobile; rv:109.0) Gecko/109.0 Firefox/109.0"

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+liberapay: 'pablouser1'
+custom: 'https://paypal.me/pablouser1'

.github/ISSUE_TEMPLATE/add-my-instance.md

@@ -0,0 +1,12 @@
+---
+name: Add my instance
+about: Add public instance to the list
+title: "[INSTANCES] New public instance"
+labels: ''
+assignees: ''
+
+---
+
+- URL: https://proxitok.example.com
+- Cloudflare: Yes / No
+- Country: Type the name of the country you are hosting the instance here

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,35 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+Before submitting an issue, please make sure you are using the latest version of ProxiTok.
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Logs**
+If applicable, add PHP logs to help explain the issue.
+
+**Environment (please complete the following information):**
+
+- Deployment method (if possible): [e.g docker, heroku, manual...]
+- Frontend version: [e.g. 2.2.0.0]
+- Scrapper version: [e.g. 2.4.0.0]
+- PHP Version: [e.g. 8.0]
+
+You can find the frontend and scrapper version on /about

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,17 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: enhancement
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.

.github/workflows/docker-publish.yml

@@ -0,0 +1,101 @@
+name: Docker
+
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+on:
+  push:
+    branches: [ master ]
+    # Publish semver tags as releases.
+    tags: [ 'v*.*.*' ]
+  pull_request:
+    branches: [ master ]
+
+env:
+  # Use docker.io for Docker Hub if empty
+  REGISTRY: ghcr.io
+  # github.repository as <account>/<repo>
+  IMAGE_NAME: ${{ github.repository }}
+
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+      # This is used to complete the identity challenge
+      # with sigstore/fulcio when running outside of PRs.
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Setup QEMU
+        uses: docker/setup-qemu-action@v2
+
+      # Install the cosign tool except on PR
+      # https://github.com/sigstore/cosign-installer
+      - name: Install cosign
+        if: github.event_name != 'pull_request'
+        uses: sigstore/cosign-installer@v3.1.1
+        with:
+          cosign-release: 'v2.1.1'
+
+
+      # Workaround: https://github.com/docker/build-push-action/issues/461
+      - name: Setup Docker buildx
+        uses: docker/setup-buildx-action@v2
+
+      # Login against a Docker registry except on PR
+      # https://github.com/docker/login-action
+      - name: Log into registry ${{ env.REGISTRY }}
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@v2
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # Extract metadata (tags, labels) for Docker
+      # https://github.com/docker/metadata-action
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@v3
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      # Build and push Docker image with Buildx (don't push on PR)
+      # https://github.com/docker/build-push-action
+      - name: Set some variables for the image
+        run: |
+          echo "IMAGE_VERSION=${GITHUB_REF_NAME#v}" >> $GITHUB_ENV
+          echo "IMAGE_NAME=${GITHUB_REPOSITORY,,}" >> $GITHUB_ENV
+      - name: Build and push Docker image
+        id: build-and-push
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: |
+            ghcr.io/${{ env.IMAGE_NAME }}:latest
+            ghcr.io/${{ env.IMAGE_NAME }}:${{ env.IMAGE_VERSION }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+      # Sign the resulting Docker image digest except on PRs.
+      # This will only write to the public Rekor transparency log when the Docker
+      # repository is public to avoid leaking data.  If you would like to publish
+      # transparency data even for private images, pass --force to cosign below.
+      # https://github.com/sigstore/cosign
+      - name: Sign the published Docker image
+        if: ${{ github.event_name != 'pull_request' }}
+        env:
+          DIGEST: ${{ steps.build-and-push.outputs.digest }}
+          TAGS: ${{ steps.meta.outputs.tags }}
+        run: cosign sign --yes "${TAGS}@${DIGEST}"

.htaccess

@@ -5,3 +5,8 @@ RewriteRule ^ index.php [QSA,L]
 
 # Disable index view
 Options -Indexes
+
+<Files .env>
+    Order allow,deny
+    Deny from all
+</Files>

Dockerfile

@@ -0,0 +1,22 @@
+FROM trafex/php-nginx:3.6.0
+
+# Add composer
+COPY --from=composer /usr/bin/composer /usr/bin/composer
+
+# Copy config
+COPY ./misc/setup/docker/php.ini /etc/php83/conf.d/settings.ini
+
+USER root
+# Create cache folder
+RUN mkdir /cache && chown -R nobody:nogroup /cache
+# Install deps
+RUN apk add --no-cache php83-redis php83-zip php83-tokenizer
+
+USER nobody
+# Copy source
+COPY --chown=nobody . /var/www/html
+
+# Dependencies
+RUN composer install --no-interaction --optimize-autoloader --no-dev --no-cache
+
+EXPOSE 8080

Procfile

@@ -1 +1 @@
-web: vendor/bin/heroku-php-apache2 public/
+web: vendor/bin/heroku-php-nginx -C misc/setup/heroku/nginx.conf

README.md

@@ -4,80 +4,48 @@ Use Tiktok with an alternative frontend, inspired by Nitter.
 ## Features
 * Privacy: All requests made to TikTok are server-side, so you will never connect to their servers
 * See user's feed
-* See trending
 * See tags
 * See video by id
-* Discovery
-* RSS Feed for user, trending and tag (just add /rss to the url)
+* Themes
+* RSS Feed for user and tag (just add /rss to the url)
 
-## Extension 
+## Self-hosting
+Please check [this](https://github.com/pablouser1/ProxiTok/wiki/Self-hosting) wiki article for info on how to self-host your own instance
+
+## Public instances
+[This](https://github.com/pablouser1/ProxiTok/wiki/Public-instances) wiki article contains a list with all the known public instances.
+
+## Extensions
 If you want to automatically redirect Tiktok links to ProxiTok you can use:
 * [Libredirect](https://github.com/libredirect/libredirect)
 * [Redirector](https://github.com/einaregilsson/Redirector)
 
-You can use the following config if you want to use Redirector (you can change https://proxitok.herokuapp.com with whatever instance you want to use):
+You can use the following config if you want to use Redirector (you can change https://proxitok.pabloferreiro.es with whatever instance you want to use):
 ```
 Description: TikTok to ProxiTok
 Example URL: https://www.tiktok.com/@tiktok
 Include pattern: (.*//.*)(tiktok.com)(.*)
-Redirect to: https://proxitok.herokuapp.com$3
-Example result: https://proxitok.herokuapp.com/@tiktok
+Redirect to: https://proxitok.pabloferreiro.es$3
+Example result: https://proxitok.pabloferreiro.es/@tiktok
 Pattern type: Regular Expression
 Apply to: Main window (address bar)
 ```
 
-## Installation
-Clone the repository and fetch the requiered external packages with:
-```bash
-composer install
-```
-
-WARNING: You'll need a personal Github token for composer.
-
-Then you can run it using for example the PHP Development Server with:
-```bash
-php -S localhost:8080 -t public
-```
-
-## Configuration
-### .env
-Move the .env.example file to .env and modify it.
-
-### Cache engines
-Available cache engines:
-* redis: Writes response to Redis
-* json: Writes response to JSON file
-
-### Apache
-You don't have to do anything more
-
-### Nginx
-Add the following to your config (you can modify the proxitok part if you have or not a subdir):
-```
-location /proxitok {
-    return 302 $scheme://$host/proxitok/;
-}
-
-location /proxitok/ {
-    try_files $uri $uri/ /proxitok/index.php?$query_string;
-}
-
-location /proxitok/.env {
-    deny all;
-    return 404;
-}
-```
-
-## TODO
-* Add a NoJS version / Make the whole program without required JS
-* Better error handling
+## TODO / Known issues
+* Fix Heroku, still using old signer method
+* Replace placeholder favicon
 * Make video on /video fit screen and don't overflow
-* i18n
+* Fix embed styling
+* Fix crash when invalid vm.tiktok.com/CODE or www.tiktok.com/t/CODE is provided
+* Add custom amount of videos per page
 
 ## Credits
-* [TikTok-API-PHP](https://github.com/ssovit/TikTok-API-PHP) (Currently using my personal fork)
+* [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)
 * [Latte](https://github.com/nette/latte)
 * [bramus/router](https://github.com/bramus/router)
 * [PHP dotenv](https://github.com/vlucas/phpdotenv)
 * [Bulma](https://github.com/jgthms/bulma) and [Bulmaswatch](https://github.com/jenil/bulmaswatch)
-* [FeedWriter](https://github.com/mibe/FeedWriter)

app.json

@@ -0,0 +1,43 @@
+{
+    "name": "ProxiTok",
+    "description": "Open source alternative frontend for TikTok",
+    "keywords": [
+        "php",
+        "tiktok",
+        "alternative-frontends"
+    ],
+    "website": "https://github.com/pablouser1/ProxiTok",
+    "repository": "https://github.com/pablouser1/ProxiTok",
+    "env": {
+        "APP_URL": {
+            "description": "Your instance url (example: https://proxitok.herokuapp.com)"
+        },
+        "API_CACHE": {
+            "description": "Cache system in use",
+            "value": "redis"
+        },
+        "LATTE_CACHE": {
+            "description": "Latte cache path",
+            "value": "/tmp/latte"
+        },
+        "API_SIGNER": {
+            "description": "Signer method",
+            "value": "remote"
+        },
+        "API_SIGNER_URL": {
+            "description": "Remote signer url",
+            "value": "https://signtok.vercel.app/api"
+        }
+    },
+    "addons": [
+        {
+            "plan": "heroku-redis:hobby-dev",
+            "as": "REDIS"
+        }
+    ],
+    "buildpacks": [
+        {
+            "url": "heroku/php"
+        }
+    ]
+}

app/Cache/ApcuCache.php

@@ -0,0 +1,25 @@
+<?php
+namespace App\Cache;
+
+use TikScraper\Interfaces\ICache;
+
+class ApcuCache implements ICache {
+    function __construct() {
+        if (!(extension_loaded('apcu') && apcu_enabled())) {
+            throw new \Exception('APCu not enabled');
+        }
+    }
+
+    public function get(string $cache_key): ?object {
+        $data = apcu_fetch($cache_key);
+        return $data !== false ? json_decode($data) : null;
+    }
+
+    public function exists(string $cache_key): bool {
+        return apcu_exists($cache_key);
+    }
+
+    public function set(string $cache_key, string $data, int $timeout = 3600): void {
+        apcu_store($cache_key, $data, $timeout);
+    }
+}

app/Cache/JSONCache.php

@@ -1,7 +1,9 @@
 <?php
 namespace App\Cache;
 
-class JSONCache {
+use TikScraper\Interfaces\ICache;
+
+class JSONCache implements ICache {
     private string $cache_path = __DIR__ . '/../../cache/api';
 
     function __construct() {
@@ -9,19 +11,14 @@ class JSONCache {
             $this->cache_path = $_ENV['API_CACHE_JSON'];
         }
     }
-    public function get(string $cache_key): object|false {
+    public function get(string $cache_key): ?object {
         $filename = $this->cache_path . '/' . $cache_key . '.json';
         if (is_file($filename)) {
-            $time = time();
             $json_string = file_get_contents($filename);
             $element = json_decode($json_string);
-            if ($time < $element->expires) {
-                return $element->data;
-            }
-            // Remove file if expired
-            unlink($filename);
+            return $element;
         }
-        return false;
+        return null;
     }
 
     public function exists(string $cache_key): bool  {
@@ -29,10 +26,7 @@ class JSONCache {
         return is_file($filename);
     }
 
-    public function set(string $cache_key, mixed $data, $timeout = 3600) {
-        file_put_contents($this->cache_path . '/' . $cache_key . '.json', json_encode([
-            'data' => $data,
-            'expires' => time() + $timeout
-        ]));
+    public function set(string $cache_key, string $data, int $timeout = 3600) {
+        file_put_contents($this->cache_path . '/' . $cache_key . '.json', $data);
     }
 }

app/Cache/RedisCache.php

@@ -1,7 +1,9 @@
 <?php
 namespace App\Cache;
 
-class RedisCache {
+use TikScraper\Interfaces\ICache;
+
+class RedisCache implements ICache {
     private \Redis $client;
     function __construct(string $host, int $port, ?string $password) {
         $this->client = new \Redis();
@@ -21,17 +23,14 @@ class RedisCache {
 
     public function get(string $cache_key): ?object {
         $data = $this->client->get($cache_key);
-        if ($data) {
-            return json_decode($data);
-        }
-        return null;
+        return $data ? json_decode($data) : null;
     }
 
     public function exists(string $cache_key): bool {
         return $this->client->exists($cache_key);
     }
 
-    public function set(string $cache_key, string $data, $timeout = 3600) {
+    public function set(string $cache_key, string $data, int $timeout = 3600) {
         $this->client->set($cache_key, $data, $timeout);
     }
 }

app/Constants/CacheMethods.php

@@ -0,0 +1,8 @@
+<?php
+namespace App\Constants;
+
+abstract class CacheMethods {
+    const JSON = 'json';
+    const APCU = 'apcu';
+    const REDIS = 'redis';
+}

app/Constants/TextExtras.php

@@ -0,0 +1,7 @@
+<?php
+namespace App\Constants;
+
+abstract class TextExtras {
+    const USER = 0;
+    const HASHTAG = 1;
+}

app/Constants/Themes.php

@@ -0,0 +1,7 @@
+<?php
+namespace App\Constants;
+
+abstract class Themes {
+    const DEFAULT = "default";
+    const CARD = "card";
+}

app/Controllers/DiscoverController.php

@@ -1,19 +0,0 @@
-<?php
-namespace App\Controllers;
-
-use App\Helpers\ErrorHandler;
-use App\Helpers\Misc;
-use App\Models\FeedTemplate;
-
-class DiscoverController {
-    static public function get() {
-        $api = Misc::api();
-        $feed = $api->getDiscover();
-        if ($feed->meta->success) {
-            $latte = Misc::latte();
-            $latte->render(Misc::getView('discover'), new FeedTemplate('Discover', $feed));
-        } else {
-            ErrorHandler::show($feed->meta);
-        }
-    }
-}

app/Controllers/EmbedController.php

@@ -0,0 +1,21 @@
+<?php
+namespace App\Controllers;
+
+use App\Helpers\ErrorHandler;
+use App\Helpers\Wrappers;
+use App\Models\VideoTemplate;
+
+class EmbedController {
+    public static function v2(int $id) {
+        $api = Wrappers::api();
+        $video = $api->video($id);
+        $video->feed();
+        if ($video->ok()) {
+            $item = $video->getFeed()->items[0];
+            $info = $video->getInfo();
+            Wrappers::latte('video', new VideoTemplate($item, $info, true));
+        } else {
+            ErrorHandler::showMeta($video->error());
+        }
+    }
+}

app/Controllers/MusicController.php

@@ -3,19 +3,22 @@ namespace App\Controllers;
 
 use App\Helpers\ErrorHandler;
 use App\Helpers\Misc;
-use App\Models\FeedTemplate;
+use App\Helpers\Wrappers;
+use App\Models\FullTemplate;
 
 class MusicController {
-    static public function get(string $music_id) {
+    public static function get(string $music_id) {
         $cursor = Misc::getCursor();
 
-        $api = Misc::api();
-        $feed = $api->getMusicFeed($music_id, $cursor);
-        if ($feed->meta->success) {
-            $latte = Misc::latte();
-            $latte->render(Misc::getView('music'), new FeedTemplate('Music', $feed));
+        $api = Wrappers::api();
+        $music = $api->music($music_id);
+        $music->feed($cursor);
+        if ($music->ok()) {
+            $info = $music->getInfo();
+            $feed = $music->getFeed();
+            Wrappers::latte('music', new FullTemplate('Music', $info, $feed));
         } else {
-            ErrorHandler::show($feed->meta);
+            ErrorHandler::showMeta($music->error());
         }
     }
 }

app/Controllers/ProxyController.php

@@ -1,25 +1,54 @@
 <?php
 namespace App\Controllers;
 
+use App\Helpers\Cookies;
+use App\Helpers\Misc;
+
 class ProxyController {
     const VALID_TIKTOK_DOMAINS = [
         "tiktokcdn.com", "tiktokcdn-us.com", "tiktok.com"
     ];
 
-    static private function isValidDomain(string $url) {
+    public static function stream() {
+        self::checkUrl();
+        $url = $_GET['url'];
+
+        $options = Misc::getScraperOptions();
+        $streamer = new \TikScraper\Stream($options);
+        $streamer->url($url);
+    }
+
+    public static function download() {
+        self::checkUrl();
+        $method = Cookies::downloader();
+        $downloader = new \TikScraper\Download($method, Misc::getScraperOptions());
+
+        // Params
+        $id = $_GET['id'] ?? '';
+        $watermark = isset($_GET['watermark']);
+        $url = $_GET['url'];
+        $user = $_GET['user'] ?? '';
+        // Filename
+        $filename = self::getFilename($id, $user);
+        // Running
+        $downloader->url($url, $filename, $watermark);
+    }
+
+    static private function isValidDomain(string $url): bool {
+        $valid = false;
         $host = parse_url($url, PHP_URL_HOST);
         $host_split = explode('.', $host);
         $host_count = count($host_split);
         if ($host_count === 2) {
             // Using no watermark
-            return in_array($host_split[0] . '.' . $host_split[1], self::VALID_TIKTOK_DOMAINS);
+            $valid = in_array($host_split[0] . '.' . $host_split[1], self::VALID_TIKTOK_DOMAINS);
         } elseif ($host_count === 3) {
-            return in_array($host_split[1] . '.' . $host_split[2], self::VALID_TIKTOK_DOMAINS);
+            $valid = in_array($host_split[1] . '.' . $host_split[2], self::VALID_TIKTOK_DOMAINS);
         }
-        return false;
+        return $valid;
     }
 
-    static private function checkUrl() {
+    static private function checkUrl(): void {
         if (!isset($_GET['url'])) {
             die('You need to send a URL');
         }
@@ -30,34 +59,8 @@ class ProxyController {
 
     }
 
-    static private function getFileName(): string {
-        $filename = 'tiktok-video';
-        if (isset($_GET['user'])) {
-            $filename .= '-' . $_GET['user'] . '-' . $_GET['id'];
-        }
+    static private function getFilename(string $id, string $user): string {
+        $filename = 'tiktok-video-' . $id . '-' . $user;
         return $filename;
     }
-
-    static public function stream() {
-        self::checkUrl();
-        $url = $_GET['url'];
-        $streamer = new \TikScraper\Stream();
-        $streamer->url($url);
-    }
-
-    static public function download() {
-        $downloader = new \TikScraper\Download();
-        $watermark = isset($_GET['watermark']);
-        if ($watermark) {
-            self::checkUrl();
-            $filename = self::getFileName();
-            $downloader->url($_GET['url'], $filename, true);
-        } else {
-            if (!isset($_GET['id'])) {
-                die('You need to send an ID!');
-            }
-            $filename = self::getFileName();
-            $downloader->url($_GET['id'], $filename, false);
-        }
-    }
 }

app/Controllers/RedirectController.php

@@ -1,24 +1,98 @@
 <?php
 namespace App\Controllers;
+use App\Helpers\ErrorHandler;
 use App\Helpers\Misc;
+use App\Helpers\UrlBuilder;
 
 /**
  * Used to be compatible with HTML forms
  */
 class RedirectController {
-    static public function redirect() {
-        $endpoint = '';
-        if (isset($_GET['user'])) {
-            $endpoint = '/@' . $_GET['user'];
-        } else if (isset($_GET['tag'])) {
-            $endpoint = '/tag/' . $_GET['tag'];
-        } else if (isset($_GET['music'])) {
-            $endpoint = '/music/' . $_GET['music'];
-        } else if (isset($_GET['video'])) {
-            $endpoint = '/video/' . $_GET['video'];
+    public static function search() {
+        $endpoint = '/';
+        if (isset($_GET['type'], $_GET['term'])) {
+            $term = trim($_GET['term']);
+            switch ($_GET['type']) {
+                case 'url':
+                    $endpoint = self::to_endpoint($term);
+                    if (!$endpoint) {
+                        ErrorHandler::showText(400, 'Invalid TikTok URL');
+                        return;
+                    }
+                    break;
+                case 'user':
+                    // Remove @ if sent
+                    if ($term[0] === '@') {
+                        $term = substr($term, 1);
+                    }
+                    $endpoint = '/@' . urlencode($term);
+                    break;
+                case 'tag':
+                    // Remove # if sent
+                    if ($term[0] === '#') {
+                        $term = substr($term, 1);
+                    }
+                    $endpoint = '/tag/' . urlencode($term);
+                    break;
+                case 'music':
+                    $endpoint = '/music/' . urlencode($term);
+                    break;
+                case 'video':
+                    // The @username part is not used, but
+                    // it is the schema that TikTok follows
+                    $endpoint = '/@placeholder/video/' . urlencode($term);
+                    break;
+                }
         }
 
         $url = Misc::url($endpoint);
         header("Location: {$url}");
     }
+
+    public static function download() {
+        if (!(isset($_GET['videoId'], $_GET['authorUsername'], $_GET['playAddr']))) {
+            ErrorHandler::showText(400, 'Request incomplete');
+            return;
+        }
+
+        $watermark = isset($_GET['watermark']) && $_GET['watermark'] === 'yes' ? true : false;
+
+        $url = '';
+        if ($watermark) {
+            $url = UrlBuilder::download($_GET['playAddr'], $_GET['authorUsername'], $_GET['videoId'], true);
+        } else {
+            $url = UrlBuilder::download(UrlBuilder::video_external($_GET['authorUsername'], $_GET['videoId']), $_GET['authorUsername'], $_GET['videoId'], false);
+        }
+
+        header("Location: {$url}");
+    }
+
+    /**
+     * 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)) {
+            // Short video URL
+            return '/@placeholder/video/' . $m[1];
+        } elseif (preg_match('%^https://www\.tiktok\.com/(.+)%', $url, $m)) {
+            // Username component (which may indicate a user profile URL or a video URL)
+            if (preg_match('%^(@[A-Za-z0-9_.]+)(?:/|$)(.*)%', $m[1], $u)) {
+                if ($u[2] == '') {
+                    // User profile URL
+                    return '/' . urlencode($u[1]);
+                } elseif (preg_match('%^video/(\d+)%', $u[2], $v)) {
+                    // Video URL
+                    return '/' . urlencode($u[1]) . '/video/' . urlencode($v[1]);
+                }
+            } elseif (preg_match('%^tag/([^ ]+?)(?:/|$)%', $m[1], $t)) {
+                // Tag URL
+                return '/tag/' . urlencode($t[1]);
+            } elseif (preg_match('%^music/([^ ]+?)(?:/|$)%', $m[1], $m)) {
+                // Music URL
+                return '/music/' . urlencode($m[1]);
+            }
+        }
+
+        return '';
+    }
 }

app/Controllers/SettingsController.php

@@ -3,26 +3,32 @@ namespace App\Controllers;
 
 use App\Helpers\Misc;
 use App\Helpers\Cookies;
+use App\Helpers\Wrappers;
 use App\Models\SettingsTemplate;
 
 class SettingsController {
-    static public function index() {
-        $latte = Misc::latte();
-        $latte->render(Misc::getView('settings'), new SettingsTemplate);
+    public static function index() {
+        Wrappers::latte('settings', new SettingsTemplate());
     }
 
-    static public function proxy() {
-        if (in_array(Cookies::PROXY, $_POST)) {
-            foreach (Cookies::PROXY as $proxy_element) {
-                Cookies::set($proxy_element, $_POST[$proxy_element]);
-            }
+    public static function general() {
+        if (isset($_POST['theme'])) {
+            $theme = $_POST['theme'];
+            Cookies::set('theme', $theme);
         }
-        $url = Misc::url('/settings');
-        header("Location: {$url}");
+        self::redirect();
     }
 
-    static public function api() {
-        $_POST['legacy'] ?? Cookies::set('api-legacy', '1');
+    public static function api() {
+        // TODO, ADD COUNT
+        if (isset($_POST['api-downloader'])) {
+            $downloader = $_POST['api-downloader'];
+            Cookies::set("api-downloader", $downloader);
+        }
+        self::redirect();
+    }
+
+    static private function redirect() {
         $url = Misc::url('/settings');
         header("Location: {$url}");
     }

app/Controllers/TagController.php

@@ -3,30 +3,34 @@ namespace App\Controllers;
 
 use App\Helpers\ErrorHandler;
 use App\Helpers\Misc;
-use App\Helpers\RSS;
-use App\Models\FeedTemplate;
+use App\Helpers\UrlBuilder;
+use App\Helpers\Wrappers;
+use App\Models\FullTemplate;
+use App\Models\RSSTemplate;
 
 class TagController {
-    static public function get(string $name) {
+    public static function get(string $name) {
         $cursor = Misc::getCursor();
-        $api = Misc::api();
-        $feed = $api->getHashtagFeed($name, $cursor);
-        if ($feed->meta->success) {
-            $latte = Misc::latte();
-            $latte->render(Misc::getView('tag'), new FeedTemplate('Tag', $feed));
+        $api = Wrappers::api();
+        $hashtag = $api->hashtag($name);
+        $hashtag->feed($cursor);
+        if ($hashtag->ok()) {
+            $info = $hashtag->getInfo();
+            $feed = $hashtag->getFeed();
+            Wrappers::latte('tag', new FullTemplate($info->detail->title, $info, $feed));
         } else {
-            ErrorHandler::show($feed->meta);
+            ErrorHandler::showMeta($hashtag->error());
         }
     }
 
-    static public function rss(string $name) {
-        $api = Misc::api();
-        $feed = $api->getHashtagFeed($name);
-        if ($feed->meta->success) {
-            $feed = RSS::build("/tag/{$name}", "{$name} Tag", $feed->info->detail->desc, $feed->items);
-            // Setup headers
-            RSS::setHeaders('tag.rss');
-            echo $feed;
+    public static function rss(string $name) {
+        $api = Wrappers::api();
+        $hashtag = $api->hashtag($name);
+        $hashtag->feed();
+        if ($hashtag->ok()) {
+            $data = $hashtag->getFull();
+            Misc::rss($name);
+            Wrappers::latte('rss', new RSSTemplate($name, $data->info->detail->desc, '', UrlBuilder::tag($name), $data->feed->items));
         }
     }
 }

app/Controllers/TrendingController.php

@@ -1,39 +0,0 @@
-<?php
-namespace App\Controllers;
-
-use App\Helpers\Misc;
-use App\Models\FeedTemplate;
-use App\Helpers\ErrorHandler;
-use App\Helpers\RSS;
-
-class TrendingController {
-    static public function get() {
-        $cursor = Misc::getTtwid();
-        $api = Misc::api();
-
-        // Ttwid if normal, cursor if legacy
-        if ($api::class === 'TikScraper\Api') {
-            $cursor = Misc::getTtwid();
-        } else {
-            $cursor = Misc::getCursor();
-        }
-        $feed = $api->getTrending($cursor);
-        if ($feed->meta->success) {
-            $latte = Misc::latte();
-            $latte->render(Misc::getView('trending'), new FeedTemplate('Trending', $feed));
-        } else {
-            ErrorHandler::show($feed->meta);
-        }
-    }
-
-    static public function rss() {
-        $api = Misc::api();
-        $feed = $api->getTrending();
-        if ($feed->meta->success) {
-            $feed = RSS::build('/trending', 'Trending', 'Tiktok trending', $feed->items);
-            // Setup headers
-            RSS::setHeaders('trending.rss');
-            echo $feed;
-        }
-    }
-}

app/Controllers/UserController.php

@@ -3,35 +3,48 @@ namespace App\Controllers;
 
 use App\Helpers\ErrorHandler;
 use App\Helpers\Misc;
-use App\Helpers\RSS;
-use App\Models\FeedTemplate;
+use App\Helpers\UrlBuilder;
+use App\Helpers\Wrappers;
+use App\Models\FullTemplate;
+use App\Models\RSSTemplate;
+use App\Models\VideoTemplate;
 
 class UserController {
-    static public function get(string $username) {
+    public static function get(string $username) {
         $cursor = Misc::getCursor();
-        $api = Misc::api();
-        $feed = $api->getUserFeed($username, $cursor);
-        if ($feed->meta->success) {
-            if ($feed->info->detail->privateAccount) {
-                http_response_code(403);
-                echo 'Private account detected! Not supported';
-                exit;
-            }
-            $latte = Misc::latte();
-            $latte->render(Misc::getView('user'), new FeedTemplate($feed->info->detail->nickname, $feed));
+        $api = Wrappers::api();
+        $user = $api->user($username);
+        $user->feed($cursor);
+        if ($user->ok()) {
+            $info = $user->getInfo();
+            $feed = $user->getFeed();
+            Wrappers::latte('user', new FullTemplate($info->detail->nickname, $info, $feed));
         } else {
-            ErrorHandler::show($feed->meta);
+            ErrorHandler::showMeta($user->error());
         }
     }
 
-    static public function rss(string $username) {
-        $api = Misc::api();
-        $feed = $api->getUserFeed($username);
-        if ($feed->meta->success) {
-            $feed = RSS::build('/@'.$username, $feed->info->detail->nickname, $feed->info->detail->signature, $feed->items);
-            // Setup headers
-            RSS::setHeaders('user.rss');
-            echo $feed;
+    public static function video(string $username, string $video_id) {
+        $api = Wrappers::api();
+        $video = $api->video($video_id);
+        $video->feed();
+        if ($video->ok()) {
+            $item = $video->getFeed()->items[0];
+            $info = $video->getInfo();
+            Wrappers::latte('video', new VideoTemplate($item, $info));
+        } else {
+            ErrorHandler::showMeta($video->error());
+        }
+    }
+
+    public static function rss(string $username) {
+        $api = Wrappers::api();
+        $user = $api->user($username);
+        $user->feed();
+        if ($user->ok()) {
+            $data = $user->getFull();
+            Misc::rss($username);
+            Wrappers::latte('rss', new RSSTemplate($data->info->detail->nickname, $data->info->detail->signature, UrlBuilder::stream($data->info->detail->avatarLarger), UrlBuilder::user($username), $data->feed->items));
         }
     }
 }

app/Controllers/VideoController.php

@@ -1,19 +1,8 @@
 <?php
 namespace App\Controllers;
 
-use App\Helpers\ErrorHandler;
-use App\Helpers\Misc;
-use App\Models\ItemTemplate;
-
 class VideoController {
-    static public function get(string $video_id) {
-        $api = Misc::api();
-        $item = $api->getVideoByID($video_id);
-        if ($item->meta->success) {
-            $latte = Misc::latte();
-            $latte->render(Misc::getView('video'), new ItemTemplate($item->info->detail->user->nickname, $item));
-        } else {
-            ErrorHandler::show($item->meta);
-        }
+    public static function get(string $video_id) {
+        UserController::video('placeholder', $video_id);
     }
 }

app/Helpers/Cookies.php

@@ -1,21 +1,40 @@
 <?php
 namespace App\Helpers;
 
-class Cookies {
-    const PROXY = ['host', 'port', 'user', 'password'];
+use App\Constants\Themes;
 
-    static public function get(string $name): ?string {
+class Cookies {
+    public static function get(string $name, string $default_value = ''): string {
         if (isset($_COOKIE[$name]) && !empty($_COOKIE[$name])) {
             return $_COOKIE[$name];
         }
-        return null;
+        return $default_value;
     }
 
-    static public function exists(string $name): bool {
+    public static function theme(): string {
+        $theme = self::get('theme');
+        $ref = new \ReflectionClass(Themes::class);
+        $themes = $ref->getConstants();
+        if ($theme && in_array($theme, $themes)) {
+            return $theme;
+        }
+        return 'default';
+    }
+
+    public static function downloader(): string {
+        $downloader = self::get('api-downloader', 'default');
+        return $downloader;
+    }
+
+    public static function exists(string $name): bool {
         return isset($_COOKIE[$name]);
     }
 
-    static public function set(string $name, string $value) {
+    public static function check(string $name, string $value): bool {
+        return self::exists($name) && $_COOKIE[$name] === $value;
+    }
+
+    public static function set(string $name, string $value) {
         setcookie($name, $value, time()+60*60*24*30, '/', '', isset($_SERVER['HTTPS']), true);
     }
 };

app/Helpers/ErrorHandler.php

@@ -2,11 +2,16 @@
 namespace App\Helpers;
 
 use App\Models\ErrorTemplate;
+use TikScraper\Models\Meta;
 
 class ErrorHandler {
-    static public function show(object $meta) {
-        http_response_code($meta->http_code);
-        $latte = Misc::latte();
-        $latte->render(Misc::getView('error'), new ErrorTemplate($meta));
+    public static function showMeta(Meta $meta) {
+        http_response_code($meta->httpCode);
+        Wrappers::latte('error', new ErrorTemplate($meta->httpCode, $meta->proxitokMsg, $meta->proxitokCode, $meta->response));
+    }
+
+    public static function showText(int $code, string $msg) {
+        http_response_code($code);
+        Wrappers::latte('error', new ErrorTemplate($code, $msg));
     }
 }

app/Helpers/Misc.php

@@ -1,120 +1,60 @@
 <?php
 namespace App\Helpers;
 
-use App\Cache\JSONCache;
-use App\Cache\RedisCache;
-
 class Misc {
-    static public function getCursor(): int {
+    public static function getCursor(): int {
         return isset($_GET['cursor']) && is_numeric($_GET['cursor']) ? (int) $_GET['cursor'] : 0;
     }
 
-    static public function getTtwid(): string {
-        return $_GET['cursor'] ?? '';
+    public static function getTtwid(): string {
+        return isset($_GET['cursor']) ? $_GET['cursor'] : '';
     }
 
-    static public function url(string $endpoint = '') {
+    public static function url(string $endpoint = ''): string {
         return self::env('APP_URL', '') . $endpoint;
     }
 
-    static public function env(string $key, $default_value) {
+    public static function env(string $key, $default_value) {
         return $_ENV[$key] ?? $default_value;
     }
 
     /**
      * Returns absolute path for view
      */
-    static public function getView(string $template): string {
-        return __DIR__ . "/../../views/{$template}.latte";
+    public static function getView(string $template): string {
+        return __DIR__ . "/../../templates/views/{$template}.latte";
     }
 
-    /**
-     * Setup of TikTok Api wrapper
-     * @return \TikScraper\Api|\TikScraper\Legacy
-     */
-    static public function api() {
+    public static function getScraperOptions(): array {
+        $url = self::env('API_CHROMEDRIVER', 'http://localhost:4444');
+        $verifyFp = self::env('API_VERIFYFP', '');
+        $device_id = self::env('API_DEVICE_ID', '');
+        $ua = self::env('USER_AGENT', '');
+
         $options = [
-            'remote_signer' => self::env('SIGNER_URL', 'http://localhost:8080/signature'),
-            'use_test_endpoints' => self::env('USE_TEST_ENDPOINTS', false),
-            // Instance level proxy config
-            'proxy' => [
-                'host' => self::env('PROXY_HOST', null),
-                'port' => self::env('PROXY_PORT', null),
-                'user' => self::env('PROXY_USER', null),
-                'password' => self::env('PROXY_PASSWORD', null)
-            ]
+            'browser' => [
+                'url' => $url,
+                'close_when_done' => false
+            ],
+            'verify_fp' => $verifyFp,
+            'device_id' => $device_id,
+            'user_agent' => $ua
         ];
-        // User level proxy config, will overwrite instance config
-        foreach(Cookies::PROXY as $proxy_element) {
-            if (isset($_COOKIE[$proxy_element])) {
-                $options['proxy'][$proxy_element] = $_COOKIE[$proxy_element];
-            }
-        }
-        // Cache config
-        $cacheEngine = false;
-        if (isset($_ENV['API_CACHE'])) {
-            switch ($_ENV['API_CACHE']) {
-                case 'json':
-                    $cacheEngine = new JSONCache();
-                    break;
-                case 'redis':
-                    if (!(isset($_ENV['REDIS_URL']) || isset($_ENV['REDIS_HOST'], $_ENV['REDIS_PORT']))) {
-                        throw new \Exception('You need to set REDIS_URL or REDIS_HOST and REDIS_PORT to use Redis Cache!');
-                    }
 
-                    if (isset($_ENV['REDIS_URL'])) {
-                        $url = parse_url($_ENV['REDIS_URL']);
-                        $host = $url['host'];
-                        $port = $url['port'];
-                        $password = $url['pass'] ?? null;
-                    } else {
-                        $host = $_ENV['REDIS_HOST'];
-                        $port = (int) $_ENV['REDIS_PORT'];
-                        $password = isset($_ENV['REDIS_PASSWORD']) ? $_ENV['REDIS_PASSWORD'] : null;
-                    }
-                    $cacheEngine = new RedisCache($host, $port, $password);
-                    break;
-            }
+        $proxy = Misc::env('PROXY', '');
+
+        if ($proxy !== '') {
+            $options['proxy'] = $proxy;
         }
 
-        // Legacy mode
-        $legacy = self::env('FORCE_LEGACY', false); // Instance level
-        $_COOKIE['enable_legacy'] ?? $legacy = true; // User level
-
-        return $legacy === false ? new \TikScraper\Api($options, $cacheEngine) : new \TikScraper\Legacy($options, $cacheEngine);
+        return $options;
     }
 
     /**
-     * Setup of Latte template engine
+     * Common method for rss feeds
      */
-    static public function latte(): \Latte\Engine {
-        $latte = new \Latte\Engine;
-        $cache_path = self::env('LATTE_CACHE', __DIR__ . '/../../cache/latte');
-        $latte->setTempDirectory($cache_path);
-
-        // -- CUSTOM FUNCTIONS -- //
-        // Get URL with optional endpoint
-        $latte->addFunction('path', function (string $endpoint = ''): string {
-            return self::url($endpoint);
-        });
-        // Version being used
-        $latte->addFunction('version', function (): string {
-            return \Composer\InstalledVersions::getVersion('pablouser1/proxitok');
-        });
-        // https://stackoverflow.com/a/36365553
-        $latte->addFunction('number', function (float $x) {
-            if($x > 1000) {
-                $x_number_format = number_format($x);
-                $x_array = explode(',', $x_number_format);
-                $x_parts = array('K', 'M', 'B', 'T');
-                $x_count_parts = count($x_array) - 1;
-                $x_display = $x;
-                $x_display = $x_array[0] . ((int) $x_array[1][0] !== 0 ? '.' . $x_array[1][0] : '');
-                $x_display .= $x_parts[$x_count_parts - 1];
-                return $x_display;
-            }
-            return $x;
-        });
-        return $latte;
+    public static function rss(string $title) {
+        header('Content-Type: application/rss+xml');
+        header('Content-Disposition: attachment; filename="' . $title . '.rss' . '"');
     }
 }

app/Helpers/RSS.php

@@ -1,34 +0,0 @@
-<?php
-namespace App\Helpers;
-
-use \FeedWriter\RSS2;
-use \Sovit\TikTok\Download;
-
-class RSS {
-    static public function build(string $endpoint, string $title, string $description, array $items): string {
-        $url = Misc::env('APP_URL', '');
-        $download = new Download();
-        $rss = new RSS2();
-        $rss->setTitle($title);
-        $rss->setDescription($description);
-        $rss->setLink($url . $endpoint);
-        $rss->setSelfLink($url . $endpoint . '/rss');
-        foreach ($items as $item) {
-            $item_rss = $rss->createNewItem();
-            $video = $item->video->playAddr;
-            $item_rss->setTitle($item->desc);
-            $item_rss->setDescription($item->desc);
-            $item_rss->setLink($url . '/video/' . $item->id);
-            $item_rss->setDate((int) $item->createTime);
-            $item_rss->setId($item->id, false);
-            $item_rss->addEnclosure($url . '/stream?url=' . urlencode($video), $download->file_size($video), 'video/mp4');
-            $rss->addItem($item_rss);
-        }
-        return $rss->generateFeed();
-    }
-
-    static public function setHeaders (string $filename) {
-        header('Content-Type: application/rss+xml');
-        header('Content-Disposition: attachment; filename="' . $filename . '"');
-    }
-}

app/Helpers/UrlBuilder.php

@@ -0,0 +1,30 @@
+<?php
+namespace App\Helpers;
+
+class UrlBuilder {
+    public static function stream(string $url): string {
+        return Misc::url('/stream?url=' . urlencode($url));
+    }
+
+    public static function download(string $url, string $username, string $id, bool $watermark): string {
+        $down_url = Misc::url('/download?url=' . urlencode($url) . '&id=' . $id . '&user=' . $username);
+        if ($watermark) $down_url .= '&watermark=1';
+        return $down_url;
+    }
+
+    public static function user(string $username): string {
+        return Misc::url('/@' . $username);
+    }
+
+    public static function tag(string $tag): string {
+        return Misc::url('/tag/' . $tag);
+    }
+
+    public static function video_internal(string $username, string $id): string {
+        return Misc::url('/@' . $username . "/video/" . $id);
+    }
+
+    public static function video_external(string $username, string $id): string {
+        return "https://www.tiktok.com/@" . $username . "/video/" . $id;
+    }
+}

app/Helpers/Wrappers.php

@@ -0,0 +1,163 @@
+<?php
+namespace App\Helpers;
+
+use App\Cache\ApcuCache;
+use App\Cache\JSONCache;
+use App\Cache\RedisCache;
+use App\Constants\CacheMethods;
+use App\Constants\TextExtras;
+use App\Models\BaseTemplate;
+
+class Wrappers {
+    /**
+     * Setup of Latte template engine
+     */
+    public static function latte(string $template, BaseTemplate $base) {
+        $latte = new \Latte\Engine;
+        $cache_path = Misc::env('LATTE_CACHE', __DIR__ . '/../../cache/latte');
+        $latte->setTempDirectory($cache_path);
+
+        // -- CUSTOM FUNCTIONS -- //
+        // Get URL with optional endpoint
+        $latte->addFunction('path', function (string $endpoint = ''): string {
+            return Misc::url($endpoint);
+        });
+
+        // Static assets
+        $latte->addFunction('assets', function (string $type, string $file, bool $isVendor = false): string {
+            $endpoint = '';
+            switch ($type) {
+                case 'js':
+                    $endpoint .= '/scripts';
+                    break;
+                case 'css':
+                    $endpoint .= '/styles';
+                    break;
+                default:
+                    throw new \Exception('Invalid asset type');
+            }
+
+            if ($isVendor) $endpoint .= '/vendor';
+
+            $endpoint .= '/' . $file;
+
+            return Misc::url($endpoint);
+        });
+
+        $latte->addFunction('theme', function(): string {
+            return Cookies::theme();
+        });
+
+        // Version being used
+        $latte->addFunction('version_frontend', function (): string {
+            return \Composer\InstalledVersions::getVersion('pablouser1/proxitok');
+        });
+        $latte->addFunction('version_scraper', function (): string {
+            return \Composer\InstalledVersions::getVersion('pablouser1/tikscraper');
+        });
+
+        // https://stackoverflow.com/a/36365553
+        $latte->addFunction('number', function (float $x) {
+            if($x > 1000) {
+                $x_number_format = number_format($x);
+                $x_array = explode(',', $x_number_format);
+                $x_parts = array('K', 'M', 'B', 'T');
+                $x_count_parts = count($x_array) - 1;
+                $x_display = $x;
+                $x_display = $x_array[0] . ((int) $x_array[1][0] !== 0 ? '.' . $x_array[1][0] : '');
+                $x_display .= $x_parts[$x_count_parts - 1];
+                return $x_display;
+            }
+            return $x;
+        });
+
+        // UrlBuilder
+        $latte->addFunction('url_stream', function (string $url): string {
+            return UrlBuilder::stream($url);
+        });
+        $latte->addFunction('url_user', function (string $username): string {
+            return UrlBuilder::user($username);
+        });
+        $latte->addFunction('url_tag', function (string $tag): string {
+            return UrlBuilder::tag($tag);
+        });
+        $latte->addFunction('url_video_internal', function (string $username, string $id): string {
+            return UrlBuilder::video_internal($username, $id);
+        });
+        $latte->addFunction('url_video_external', function (string $username, string $id): string {
+            return UrlBuilder::video_external($username, $id);
+        });
+        $latte->addFunction('url_download', function (string $url, string $username, string $id, bool $watermark): string {
+            return UrlBuilder::download($url, $username, $id, $watermark);
+        });
+
+        $latte->addFunction('bool_to_str', function (bool $cond): string {
+            return $cond ? 'yes' : 'no';
+        });
+
+        // Add URLs to video descriptions
+        $latte->addFunction('render_desc', function (string $desc, array $textExtras = []): string {
+            $sanitizedDesc = htmlspecialchars($desc);
+            $out = $sanitizedDesc;
+            foreach ($textExtras as $extra) {
+                $url = '';
+                // We do -1 to also take the # or @
+                $text = mb_substr($desc, $extra->start - 1, $extra->end - $extra->start, 'UTF-8');
+                switch ($extra->type) {
+                    // User URL
+                    case TextExtras::USER:
+                        $url = UrlBuilder::user(htmlspecialchars($extra->userUniqueId));
+                        break;
+                    // Hashtag URL
+                    case TextExtras::HASHTAG:
+                        $url = UrlBuilder::tag(htmlspecialchars($extra->hashtagName));
+                        break;
+                }
+
+                // We do \b to avoid non-strict matches ('#hi' would match with '#hii' and we don't want that)
+                $out = preg_replace("/$text\b/", "<a href=\"$url\">$text</a>", $out);
+            }
+            return $out;
+        });
+
+        $latte->render(Misc::getView($template), $base);
+    }
+
+    /**
+     * Setup of TikTok Api wrapper
+     */
+    public static function api(): \TikScraper\Api {
+        $options = Misc::getScraperOptions();
+        // Cache config
+        $cacheEngine = null;
+        if (isset($_ENV['API_CACHE'])) {
+            switch ($_ENV['API_CACHE']) {
+                case CacheMethods::JSON:
+                    $cacheEngine = new JSONCache();
+                    break;
+                case CacheMethods::APCU:
+                    $cacheEngine = new ApcuCache();
+                    break;
+                case CacheMethods::REDIS:
+                    if (!(isset($_ENV['REDIS_URL']) || isset($_ENV['REDIS_HOST'], $_ENV['REDIS_PORT']))) {
+                        throw new \Exception('You need to set REDIS_URL or REDIS_HOST and REDIS_PORT to use Redis Cache!');
+                    }
+
+                    if (isset($_ENV['REDIS_URL'])) {
+                        $url = parse_url($_ENV['REDIS_URL']);
+                        $host = $url['host'];
+                        $port = $url['port'];
+                        $password = $url['pass'] ?? null;
+                    } else {
+                        $host = $_ENV['REDIS_HOST'];
+                        $port = intval($_ENV['REDIS_PORT']);
+                        $password = $_ENV['REDIS_PASSWORD'] ?? null;
+                    }
+                    $cacheEngine = new RedisCache($host, $port, $password);
+                    break;
+            }
+        }
+
+        return new \TikScraper\Api($options, $cacheEngine);
+    }
+}

app/Models/BaseTemplate.php

@@ -6,7 +6,6 @@ namespace App\Models;
 */
 class BaseTemplate {
     public string $title;
-    public string $version;
 
     function __construct(string $title) {
         $this->title = $title;

app/Models/DiscoverTemplate.php

@@ -0,0 +1,13 @@
+<?php
+namespace App\Models;
+
+use TikScraper\Models\Discover;
+
+class DiscoverTemplate extends BaseTemplate {
+    public Discover $data;
+
+    function __construct(Discover $data) {
+        parent::__construct("Discover");
+        $this->data = $data;
+    }
+}

app/Models/ErrorTemplate.php

@@ -1,11 +1,20 @@
 <?php
 namespace App\Models;
+use TikScraper\Models\Response;
 
 class ErrorTemplate extends BaseTemplate {
-    public object $error;
+    public int $http_code = 502;
+    public ?int $tiktok_code = -1;
+    public string $msg = '';
 
-    function __construct(object $error) {
+    public ?Response $response = null;
+
+
+    function __construct(int $http_code, string $msg, ?int $tiktok_code = null, ?Response $response) {
         parent::__construct('Error');
-        $this->error = $error;
+        $this->http_code = $http_code;
+        $this->msg = $msg;
+        $this->tiktok_code = $tiktok_code;
+        $this->response = $response;
     }
 }

app/Models/FeedTemplate.php

@@ -1,13 +1,15 @@
 <?php
 namespace App\Models;
 
+use TikScraper\Models\Feed;
+
 /**
 * Base for templates with a feed
 */
 class FeedTemplate extends BaseTemplate {
-    public object $feed;
+    public Feed $feed;
 
-    function __construct(string $title, object $feed) {
+    function __construct(string $title, Feed $feed) {
         parent::__construct($title);
         $this->feed = $feed;
     }

app/Models/FullTemplate.php

@@ -0,0 +1,19 @@
+<?php
+namespace App\Models;
+
+use TikScraper\Models\Feed;
+use TikScraper\Models\Info;
+
+/**
+* Base for templates with both info and feed
+*/
+class FullTemplate extends BaseTemplate {
+    public Info $info;
+    public Feed $feed;
+
+    function __construct(string $title, Info $info, Feed $feed) {
+        parent::__construct($title);
+        $this->info = $info;
+        $this->feed = $feed;
+    }
+}

app/Models/HomeTemplate.php

@@ -1,34 +0,0 @@
-<?php
-namespace App\Models;
-
-/**
-* Exclusive for /
-*/
-class HomeTemplate extends BaseTemplate {
-    public array $forms = [
-        [
-            'title' => 'Search by user',
-            'input' => 'user',
-            'placeholder' => 'Type username'
-        ],
-        [
-            'title' => 'Search by video ID',
-            'input' => 'video',
-            'placeholder' => 'Type video ID'
-        ],
-        [
-            'title' => 'Search by tag',
-            'input' => 'tag',
-            'placeholder' => 'Type tag'
-        ],
-        [
-            'title' => 'Search by music ID',
-            'input' => 'music',
-            'placeholder' => 'Type music'
-        ]
-    ];
-
-    function __construct() {
-        parent::__construct('Home');
-    }
-}

app/Models/ItemTemplate.php

@@ -1,14 +0,0 @@
-<?php
-namespace App\Models;
-
-/**
-* Base for templates with item (only /video at the time)
-*/
-class ItemTemplate extends BaseTemplate {
-    public object $item;
-
-    function __construct(string $title, object $item) {
-        parent::__construct($title);
-        $this->item = $item;
-    }
-}

app/Models/RSSTemplate.php

@@ -0,0 +1,17 @@
+<?php
+namespace App\Models;
+
+class RSSTemplate extends BaseTemplate {
+    public string $desc;
+    public string $image;
+    public string $link;
+    public array $items;
+
+    function __construct(string $title, string $desc, string $image, string $link, array $items) {
+        parent::__construct($title);
+        $this->desc = $desc;
+        $this->image = $image;
+        $this->link = $link;
+        $this->items = $items;
+    }
+}

app/Models/SettingsTemplate.php

@@ -1,16 +1,31 @@
 <?php
 namespace App\Models;
 
+use App\Constants\Themes;
 use App\Helpers\Cookies;
+use TikScraper\Constants\DownloadMethods;
 
 /**
-* Exclusive for /settings
-*/
+ * Settings model with all possible config items
+ */
 class SettingsTemplate extends BaseTemplate {
-    public array $proxy_elements = [];
+    public array $downloaders = [];
+    public array $themes = [];
+    public string $currentDownloader;
+    public string $currentTheme;
+    public bool $isServiceWorker = false;
 
     function __construct() {
-        parent::__construct('Settings');
-        $this->proxy_elements = Cookies::PROXY;
+        parent::__construct("Settings");
+        // Downloaders list
+        $ref = new \ReflectionClass(DownloadMethods::class);
+        $this->downloaders = $ref->getConstants();
+        // Themes list
+        $ref = new \ReflectionClass(Themes::class);
+        $this->themes = $ref->getConstants();
+        // Cookies data
+        $this->currentDownloader = Cookies::downloader();
+        $this->currentTheme = Cookies::theme();
+        $this->isServiceWorker = Cookies::check('misc-sw', 'yes');
     }
 }

app/Models/VideoTemplate.php

@@ -0,0 +1,24 @@
+<?php
+namespace App\Models;
+
+use TikScraper\Models\Info;
+
+/**
+* Base for templates with a feed
+*/
+class VideoTemplate extends BaseTemplate {
+    public object $item;
+    public Info $info;
+    public string $layout = 'hero';
+
+    function __construct(object $item, Info $info, bool $isEmbed = false) {
+        parent::__construct('Video');
+        $this->item = $item;
+        $this->info = $info;
+        if ($isEmbed) {
+            $this->layout = 'embed';
+        } else {
+            $this->layout = 'hero';
+        }
+    }
+}

components/footer.latte

@@ -1,8 +0,0 @@
-<footer class="footer">
-  <div class="content has-text-centered">
-    <p>
-      Made with <span style="color: #e25555;">&#9829;</span> in <a href="https://github.com/pablouser1/ProxiTok">Github</a>
-    </p>
-		<p>Version: {version()}</p>
-  </div>
-</footer>

components/head.latte

@@ -1,11 +0,0 @@
-<head>
-	<meta charset="UTF-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<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/navbar.latte

@@ -1,18 +0,0 @@
-<nav class="navbar" role="navigation" aria-label="main navigation">
-  <div class="navbar-brand">
-    <a role="button" id="navbar-burger" class="navbar-burger" aria-label="menu" aria-expanded="false">
-      <span aria-hidden="true"></span>
-      <span aria-hidden="true"></span>
-      <span aria-hidden="true"></span>
-    </a>
-  </div>
-
-  <div id="navbar-menu" class="navbar-menu">
-    <div class="navbar-start">
-      <a href="{path('/')}" class="navbar-item">Home</a>
-      <a href="{path('/settings')}" class="navbar-item">Settings</a>
-      <a href="{path('/about')}" class="navbar-item">About</a>
-    </div>
-  </div>
-</nav>
-<script src="{path('/scripts/navbar.js')}"></script>

components/settings/api.latte

@@ -1,12 +0,0 @@
-<form action="{path('/settings/api')}" method="POST">
-	<div class="field">
-		<label class="checkbox">
-			<input name="api-legacy" type="checkbox" checked="{isset($_COOKIE['api-legacy']) ? 'true' : 'false'}">Enable legacy mode
-		</label>
-  </div>
-  <div class="field">
-    <div class="control">
-      <button class="button is-success" type="submit">Submit</button>
-    </div>
-  </div>
-</form>

components/settings/proxy.latte

@@ -1,15 +0,0 @@
-<form action="{path('/settings/proxy')}" method="POST">
-	{foreach $proxy_elements as $proxy_element}
-	<div class="field">
-		<label class="label">{$proxy_element|firstUpper}</label>
-		<div class="control">
-      <input name="{$proxy_element}" class="input" value="{isset($_COOKIE[$proxy_element]) ? $_COOKIE[$proxy_element] : ''}" required />
-    </div>
-  </div>
-  {/foreach}
-  <div class="field">
-    <div class="control">
-      <button class="button is-success" type="submit">Submit</button>
-    </div>
-  </div>
-</form>

composer.json

@@ -1,30 +1,32 @@
 {
     "name": "pablouser1/proxitok",
     "description": "An alternative frontend for TikTok",
-    "version": "2.0.0.3",
+    "version": "2.5.0.0",
     "license": "AGPL-3.0-or-later",
     "type": "project",
-    "homepage": "https://github.com/pablouser1/ProxiTok",
     "authors": [
         {
             "name": "Pablo Ferreiro",
             "homepage": "https://github.com/pablouser1"
         }
     ],
-    "repositories": [
-        {
-            "type": "vcs",
-            "url": "https://github.com/pablouser1/TikTok-API-PHP"
-        }
-    ],
+    "homepage": "https://github.com/pablouser1/ProxiTok",
+	"config": {
+		"optimize-autoloader": true,
+		"platform": {
+			"php": "8.1"
+		}
+	},
     "require": {
-        "ext-redis": "^5.3.2",
+        "php": "^8.1",
         "ext-mbstring": "*",
-        "latte/latte": "^2.10",
-        "vlucas/phpdotenv": "^5.4",
+        "latte/latte": "^3.0",
         "bramus/router": "^1.6",
-        "mibe/feedwriter": "^1.1",
-        "pablouser1/tikscraper": "v1.2.7.4"
+        "pablouser1/tikscraper": "^2.6",
+        "josegonzalez/dotenv": "^4.0"
+    },
+    "suggest": {
+        "ext-redis": "For using redis as a caching engine"
     },
     "autoload": {
         "psr-4": {

docker-compose.yml

@@ -0,0 +1,62 @@
+services:
+  web:
+    container_name: proxitok-web
+    image: ghcr.io/pablouser1/proxitok:master
+    ports:
+      - 8080:8080
+    environment:
+      - LATTE_CACHE=/cache
+      - API_CACHE=redis
+      - REDIS_HOST=proxitok-redis
+      - REDIS_PORT=6379
+      - API_CHROMEDRIVER=http://proxitok-chromedriver:9515
+      # - API_VERIFYFP=verify_...
+      # - API_DEVICE_ID=4586...
+    volumes:
+      - proxitok-cache:/cache
+    depends_on:
+      - redis
+      - chromedriver
+    networks:
+      - proxitok
+    security_opt:
+      - no-new-privileges:true
+    cap_drop:
+      - ALL
+    cap_add:
+      - CHOWN
+      - SETGID
+      - SETUID
+  # Redis, used for caching
+  redis:
+    container_name: proxitok-redis
+    image: redis:7.4-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
+  # Chromedriver instance, used for sending requests to TikTok
+  chromedriver:
+    container_name: proxitok-chromedriver
+    image: zenika/alpine-chrome:with-chromedriver
+    init: true
+    shm_size: 1g
+    networks:
+      - proxitok
+    security_opt:
+      - seccomp:./misc/setup/docker/chrome.json
+    ports:
+      - 9515:9515
+volumes:
+  proxitok-cache:
+
+networks:
+  proxitok:

embed.js

@@ -0,0 +1,15 @@
+// Workaround to allow TikTok embed
+
+const blockquotes = document.getElementsByClassName('tiktok-embed')
+for (let i = 0; i < blockquotes.length; i++) {
+  const blockquote = blockquotes[i]
+  if (blockquote.children.length > 0 && blockquote.children[0].tagName !== 'iframe') {
+    const iframe = document.createElement('iframe')
+    iframe.style = 'width: 100%; height: 710px; display: block; visibility: unset; max-height: 710px;'
+    iframe.src = 'https://www.tiktok.com/embed/v2/' + blockquote.dataset.videoId // This url will get redirected
+    // Remove placeholder section
+    blockquote.children[0].remove()
+    // Add iframe
+    blockquote.appendChild(iframe)
+  }
+}

index.php

@@ -0,0 +1,17 @@
+<?php
+require __DIR__ . "/vendor/autoload.php";
+
+$dotenv = new josegonzalez\Dotenv\Loader(__DIR__ . '/.env');
+$dotenv->raiseExceptions(false);
+$result = $dotenv->parse();
+if ($result !== false) {
+    $dotenv->toEnv();
+}
+
+// ROUTER
+$router = new Bramus\Router\Router();
+$router->setNamespace('\App\Controllers');
+
+require __DIR__ . '/routes.php';
+
+$router->run();

misc/scss/README.md

@@ -0,0 +1,11 @@
+This facilities making the compressed bulma.min.css and cssgg.min.css files, install all dependencies using:
+```
+yarn install
+```
+
+And then use:
+```
+yarn bulma && yarn cssgg
+```
+
+This compiles bulma.scss and cssgg.scss to a css file and helps lowering the size of the css that will be sent to the user.

misc/scss/bulma.scss

@@ -10,9 +10,12 @@ $bulmaswatch-import-font: false;
 @import "./node_modules/bulma/sass/base/_all.sass";
 
 // Elements
-@import "./node_modules/bulma/sass/elements/button.sass";
 @import "./node_modules/bulma/sass/elements/box.sass";
+@import "./node_modules/bulma/sass/elements/button.sass";
 @import "./node_modules/bulma/sass/elements/container.sass";
+@import "./node_modules/bulma/sass/elements/content.sass";
+@import "./node_modules/bulma/sass/elements/icon.sass";
+@import "./node_modules/bulma/sass/elements/image.sass";
 @import "./node_modules/bulma/sass/elements/other.sass";
 @import "./node_modules/bulma/sass/elements/tag.sass";
 @import "./node_modules/bulma/sass/elements/title.sass";
@@ -21,14 +24,16 @@ $bulmaswatch-import-font: false;
 @import "./node_modules/bulma/sass/form/shared.sass";
 @import "./node_modules/bulma/sass/form/input-textarea.sass";
 @import "./node_modules/bulma/sass/form/checkbox-radio.sass";
+@import "./node_modules/bulma/sass/form/select.sass";
 @import "./node_modules/bulma/sass/form/tools.sass";
 
 // Components
+@import "./node_modules/bulma/sass/components/breadcrumb.sass";
 @import "./node_modules/bulma/sass/components/card.sass";
 @import "./node_modules/bulma/sass/components/dropdown.sass";
+@import "./node_modules/bulma/sass/components/media.sass";
 @import "./node_modules/bulma/sass/components/modal.sass";
 @import "./node_modules/bulma/sass/components/navbar.sass";
-@import "./node_modules/bulma/sass/components/media.sass";
 
 // Grids
 @import "./node_modules/bulma/sass/grid/columns.sass";

misc/scss/cssgg.scss

@@ -0,0 +1,25 @@
+@charset "utf-8";
+// Common
+@import "./node_modules/css.gg/icons/scss/home.scss";
+@import "./node_modules/css.gg/icons/scss/options.scss";
+@import "./node_modules/css.gg/icons/scss/info.scss";
+@import "./node_modules/css.gg/icons/scss/code-slash.scss";
+
+// Home
+@import "./node_modules/css.gg/icons/scss/search.scss";
+
+// Feed
+@import "./node_modules/css.gg/icons/scss/feed.scss";
+@import "./node_modules/css.gg/icons/scss/eye.scss";
+@import "./node_modules/css.gg/icons/scss/heart.scss";
+@import "./node_modules/css.gg/icons/scss/comment.scss";
+@import "./node_modules/css.gg/icons/scss/share.scss";
+@import "./node_modules/css.gg/icons/scss/software-download.scss";
+@import "./node_modules/css.gg/icons/scss/check-o.scss";
+@import "./node_modules/css.gg/icons/scss/tag.scss";
+
+@import "./node_modules/css.gg/icons/scss/lock.scss";
+@import "./node_modules/css.gg/icons/scss/lock-unlock.scss";
+
+// Video
+@import "./node_modules/css.gg/icons/scss/music.scss";

misc/scss/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "proxitok-scss",
+  "private": true,
+  "scripts": {
+    "bulma": "sass --style=compressed bulma.scss ../../styles/vendor/bulma.min.css",
+    "cssgg": "sass --style=compressed cssgg.scss ../../styles/vendor/cssgg.min.css"
+  },
+  "dependencies": {
+    "bulma": "^0.9.3",
+    "bulmaswatch": "^0.8.1",
+    "css.gg": "^2.0.0",
+    "sass": "^1.46.0"
+  }
+}

misc/scss/yarn.lock

@@ -2,15 +2,10 @@
 # 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"
-  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
   dependencies:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
@@ -28,9 +23,9 @@ braces@~3.0.2:
     fill-range "^7.0.1"
 
 bulma@^0.9.3:
-  version "0.9.3"
-  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.3.tgz#ddccb7436ebe3e21bf47afe01d3c43a296b70243"
-  integrity sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g==
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.4.tgz#0ca8aeb1847a34264768dba26a064c8be72674a1"
+  integrity sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==
 
 bulmaswatch@^0.8.1:
   version "0.8.1"
@@ -52,6 +47,11 @@ bulmaswatch@^0.8.1:
   optionalDependencies:
     fsevents "~2.3.2"
 
+css.gg@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/css.gg/-/css.gg-2.1.1.tgz#62b2e242633c1cdf9de9840f2cf343ce03f6548e"
+  integrity sha512-OJrjd4+CdjrLvrVB+EFctAnk7eeM+zc8aKfVlO5BfNBgSqcC9wMHQTZ7ALcCiZGpE62kVVhwQ3Mvl1u6RkVFvQ==
+
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
@@ -60,9 +60,9 @@ fill-range@^7.0.1:
     to-regex-range "^5.0.1"
 
 fsevents@~2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
 
 glob-parent@~5.1.2:
   version "5.1.2"
@@ -72,9 +72,9 @@ glob-parent@~5.1.2:
     is-glob "^4.0.1"
 
 immutable@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
-  integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.4.tgz#2e07b33837b4bb7662f288c244d1ced1ef65a78f"
+  integrity sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==
 
 is-binary-path@~2.1.0:
   version "2.1.0"
@@ -86,7 +86,7 @@ is-binary-path@~2.1.0:
 is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
-  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
 
 is-glob@^4.0.1, is-glob@~4.0.1:
   version "4.0.3"
@@ -118,9 +118,9 @@ readdirp@~3.6.0:
     picomatch "^2.2.1"
 
 sass@^1.46.0:
-  version "1.49.9"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.9.tgz#b15a189ecb0ca9e24634bae5d1ebc191809712f9"
-  integrity sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==
+  version "1.68.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.68.0.tgz#0034b0cc9a50248b7d1702ac166fd25990023669"
+  integrity sha512-Lmj9lM/fef0nQswm1J2HJcEsBUba4wgNx2fea6yJHODREoMFnwRpZydBnX/RjyXw2REIwdkbqE4hrTo4qfDBUA==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"

misc/setup/docker/php.ini

@@ -0,0 +1,5 @@
+variables_order="EGPCS"
+
+[Date]
+date.timezone="UTC"
+expose_php=Off

misc/setup/heroku/nginx.conf

@@ -0,0 +1,15 @@
+location / {
+    # try to serve file directly, fallback to rewrite
+    try_files $uri @rewriteapp;
+}
+
+location @rewriteapp {
+    # rewrite all to index.php
+    rewrite ^(.*)$ /index.php/$1 last;
+}
+
+location ~ ^/index\.php(/|$) {
+    try_files @heroku-fcgi @heroku-fcgi;
+    # ensure that /index.php isn't accessible directly, but only through a rewrite
+    internal;
+}

public/index.php

@@ -1,14 +0,0 @@
-<?php
-require __DIR__ . "/../vendor/autoload.php";
-
-// LOAD DOTENV
-$dotenv = Dotenv\Dotenv::createImmutable(__DIR__ . '/..');
-$dotenv->safeLoad();
-
-// ROUTER
-$router = new Bramus\Router\Router();
-$router->setNamespace('\App\Controllers');
-
-require __DIR__ . '/../routes.php';
-
-$router->run();

robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

routes.php

@@ -1,42 +1,72 @@
 <?php
 /** @var \Bramus\Router\Router $router */
+
+use App\Helpers\ErrorHandler;
 use App\Helpers\Misc;
+use App\Helpers\Wrappers;
 use App\Models\BaseTemplate;
-use App\Models\HomeTemplate;
+
+$router->set404(function () {
+    ErrorHandler::showText(404, "That endpoint doesn't exist");
+});
 
 $router->get('/', function () {
-    $latte = Misc::latte();
-    $latte->render(Misc::getView('home'), new HomeTemplate);
+    Wrappers::latte('home', new BaseTemplate('Home'));
 });
 
 $router->get('/about', function () {
-    $latte = Misc::latte();
-    $latte->render(Misc::getView('about'), new BaseTemplate('About'));
+    Wrappers::latte('about', new BaseTemplate('About'));
 });
 
 $router->get('/verify', function () {
-    $latte = Misc::latte();
-    $latte->render(Misc::getView('verify'), new BaseTemplate('Verify'));
+    Wrappers::latte('verify', new BaseTemplate('verify'));
+});
+
+$router->get('/manifest', function () {
+    header('Content-Type: application/json');
+    $data = [
+        "name" => "ProxiTok",
+        "short_name" => "ProxiTok",
+        "description" => "Use TikTok with a privacy-friendly alternative frontend",
+        "lang" => "en-US",
+        "theme_color" => "#4040ff",
+        "background_color" => "#ffffff",
+        "display" => "standalone",
+        "orientation" => "portrait-primary",
+        "icons" => [
+          [
+            "src" => Misc::url('/android-chrome-192x192.png'),
+            "sizes" => "192x192",
+            "type" => "image/png"
+          ],
+          [
+            "src" => Misc::url('/android-chrome-512x512.png'),
+            "sizes" => "512x512",
+            "type" => "image/png"
+          ]
+        ],
+        "start_url" => Misc::url('/'),
+        "scope" => Misc::url('/')
+    ];
+    echo json_encode($data, JSON_PRETTY_PRINT);
 });
 
 $router->get('/stream', 'ProxyController@stream');
 $router->get('/download', 'ProxyController@download');
-$router->get('/redirect', 'RedirectController@redirect');
-
-$router->mount('/trending', function () use ($router) {
-    $router->get('/', 'TrendingController@get');
-    $router->get('/rss', 'TrendingController@rss');
-});
+$router->get('/redirect/search', 'RedirectController@search');
+$router->get('/redirect/download', 'RedirectController@download');
 
 $router->mount('/@([^/]+)', function () use ($router) {
     $router->get('/', 'UserController@get');
+    $router->get('/video/(\w+)', 'UserController@video');
     $router->get('/rss', 'UserController@rss');
 });
 
-$router->get('/video/(\w+)', 'VideoController@get');
+// Workaround that allows /t endpoints
+$router->get('/t/([^/]+)', 'VideoController@get');
 
-$router->mount('/tag', function () use ($router) {
-    $router->get('/([^/]+)', 'TagController@get');
+$router->mount('/tag/([^/]+)', function () use ($router) {
+    $router->get('/', 'TagController@get');
     $router->get('/rss', 'TagController@rss');
 });
 
@@ -45,8 +75,10 @@ $router->get('/music/([^/]+)', 'MusicController@get');
 // -- Settings -- //
 $router->mount('/settings', function () use ($router) {
     $router->get('/', 'SettingsController@index');
-    $router->post('/proxy', 'SettingsController@proxy');
+    $router->post('/general', 'SettingsController@general');
     $router->post('/api', 'SettingsController@api');
+    $router->post('/misc', 'SettingsController@misc');
 });
 
-$router->get('/discover', 'DiscoverController@get');
+// -- EMBED -- //
+$router->get('/embed/v2/(\d+)', 'EmbedController@v2');

scripts/themes/card.js

@@ -2,6 +2,7 @@ var opened_video_id = null
 
 const video = document.getElementById('video')
 const item_title = document.getElementById('item_title')
+const item_date = document.getElementById('item_date')
 const audio = document.getElementById('audio')
 const audio_title = document.getElementById('audio_title')
 const modal = document.getElementById('modal')
@@ -15,7 +16,7 @@ const getVideoDataById = id => {
     opened_video_id = id
     return el.dataset
   }
-  return false
+  return null
 }
 
 const isModalActive = () => modal.classList.contains('is-active')
@@ -23,9 +24,10 @@ const isModalActive = () => modal.classList.contains('is-active')
 const toggleButton = (id, force) => document.getElementById(id).toggleAttribute('disabled', force)
 
 // -- MODAL -- //
-const swapData = ({ video_url, desc, video_download_watermark, video_download_nowatermark, video_share_url, music_title, music_url }) => {
+const swapData = ({ video_url, desc, createtime, video_download_watermark, video_download_nowatermark, video_share_url, music_title, music_url }) => {
   video.src = video_url
   item_title.innerText = desc
+  item_date.innerText = new Date(createtime * 1000).toLocaleString()
   download_watermark.href = video_download_watermark
   download_nowatermark.href = video_download_nowatermark
   share_input.value = video_share_url

scss/README.md

@@ -1,11 +0,0 @@
-This facilities making the bulma.min.css and fontawesome.min.css files, install all dependencies using:
-```
-yarn install
-```
-
-And then use:
-```
-yarn bulma && yarn fa
-```
-
-This compiles bulma.scss and fontawesome.scss to a css file and helps lowering the size of the css that will be sent to the user.

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

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

styles/carousel.css

@@ -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;
+}

styles/misc.css

@@ -0,0 +1,3 @@
+.new-line {
+	white-space: pre-wrap;
+}

styles/vendor/cssgg.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../misc/scss/node_modules/css.gg/icons/scss/home.scss","../../misc/scss/node_modules/css.gg/icons/scss/options.scss","../../misc/scss/node_modules/css.gg/icons/scss/info.scss","../../misc/scss/node_modules/css.gg/icons/scss/code-slash.scss","../../misc/scss/node_modules/css.gg/icons/scss/search.scss","../../misc/scss/node_modules/css.gg/icons/scss/feed.scss","../../misc/scss/node_modules/css.gg/icons/scss/eye.scss","../../misc/scss/node_modules/css.gg/icons/scss/heart.scss","../../misc/scss/node_modules/css.gg/icons/scss/comment.scss","../../misc/scss/node_modules/css.gg/icons/scss/share.scss","../../misc/scss/node_modules/css.gg/icons/scss/software-download.scss","../../misc/scss/node_modules/css.gg/icons/scss/check-o.scss","../../misc/scss/node_modules/css.gg/icons/scss/tag.scss","../../misc/scss/node_modules/css.gg/icons/scss/lock.scss","../../misc/scss/node_modules/css.gg/icons/scss/lock-unlock.scss","../../misc/scss/node_modules/css.gg/icons/scss/music.scss"],"names":[],"mappings":"AAAA,SACE,yLACA,sBACA,kBACA,cACA,+BACA,WACA,YACA,iBACA,aACA,gBACA,4BACA,2BACA,6BACA,4BACA,mBAEA,gBACE,WACA,cACA,sBACA,kBAGF,iBACE,WACA,cACA,sBACA,kBACA,qBACA,sBACA,2BACA,wBACA,SACA,kBACA,WACA,YACA,OAGF,gBACE,UACA,YACA,iBACA,oBACA,4BACA,6BACA,gBACA,SACA,SCjDJ,YACI,sBACA,kBACA,cACA,+BACA,WACA,WACA,qCAEA,mBACE,WACA,cACA,sBACA,kBACA,UACA,WACA,iBACA,mBAGF,oBACE,WACA,cACA,sBACA,kBACA,UACA,WACA,iBACA,mBACA,SACA,UAGF,mBACE,YACA,WCnCN,SACI,sBACA,kBACA,cACA,+BACA,WACA,YACA,iBACA,mBAEA,iCACE,WACA,cACA,sBACA,kBACA,kBACA,UACA,wBACA,SAGF,gBACE,WACA,WAGF,iBACE,WACA,QC5BN,eACI,cACA,kBACA,sBACA,6CACA,UACA,YACA,wBAEA,sBACE,WACA,cACA,sBACA,kBACA,UACA,WACA,yBAGF,uBACE,WACA,cACA,sBACA,kBACA,UACA,WACA,yBACA,sBACA,qBACA,UACA,QAGF,sBACE,uBACA,wBACA,WACA,QCrCN,WACI,sBACA,kBACA,cACA,+BACA,WACA,YACA,iBACA,mBACA,iBACA,gBAEA,kBACE,WACA,cACA,sBACA,kBACA,kBACA,UACA,WACA,wBACA,yBACA,SACA,UCvBN,SACI,cACA,sBACA,wBACA,sBASA,iBACA,gBACA,kBACA,+BACA,UACA,WACA,kBAbA,iCACE,cACA,sBACA,wBACA,sBAWF,iCACE,WACA,kBACA,kBACA,WACA,WACA,QACA,SACA,WAGF,gBACE,UACA,QACA,WCnCN,QACI,kBACA,cACA,+BACA,WACA,YACA,iCACA,gCACA,gBACA,sBAEA,+BACE,WACA,cACA,oBACA,kBACA,sBAGF,eACE,QACA,8CACA,WACA,YAGF,gBACE,UACA,WACA,iBACA,WACA,SC/BN,UACI,iBACA,6BACA,8BACA,WACA,WACA,gBAeA,sBACA,kBACA,gHACA,cAhBA,iBACE,iBACA,6BACA,8BACA,WACA,WACA,gBACA,WACA,cACA,sBACA,kBAQF,kBACE,WACA,cACA,sBACA,kBAGF,iBACE,WACA,wBACA,QAGF,kBACE,WACA,YACA,sBACA,wBACA,UACA,QC7CN,YACI,sBACA,kBACA,cACA,+BACA,WACA,YACA,iBACA,gBACA,0CAEA,mBACE,WACA,cACA,sBACA,kBACA,UAGF,oBACE,WACA,cACA,sBACA,kBACA,UACA,iBACA,+BACA,+BACA,UACA,YACA,WAGF,mBACE,WACA,wBACA,qBACA,SACA,QCtCN,UACI,sBACA,kBACA,cACA,+BACA,UACA,WACA,wBACA,oBACA,kCAEA,iBACE,WACA,cACA,sBACA,kBACA,kBACA,WACA,WACA,wBACA,SAGF,kBACE,WACA,cACA,sBACA,kBACA,kBACA,WACA,WACA,wBACA,SACA,MACA,yBAGF,iBACE,SACA,wBCvCN,sBACI,sBACA,kBACA,cACA,+BACA,WACA,WACA,iBACA,aACA,8BACA,+BACA,eAEA,6BACE,WACA,cACA,sBACA,kBACA,UACA,WACA,sBACA,wBACA,yBACA,SACA,WAGF,8BACE,WACA,cACA,sBACA,kBACA,kBACA,UACA,YACA,wBACA,SACA,WCrCN,YACI,sBACA,kBACA,cACA,+BACA,WACA,YACA,iBACA,oBAEA,mBACE,WACA,cACA,sBACA,kBACA,SACA,SACA,UACA,YACA,0BACA,yBACA,mBACA,6BACA,wBCvBN,QACI,cACA,iBAeA,eACA,2BACA,8BACA,sBACA,+BACA,kBACA,WACA,YApBA,gBACE,cACA,iBACA,WACA,kBACA,UACA,WACA,uBACA,oBACA,QACA,QAYF,eACE,WACA,cACA,sBACA,kBACA,WACA,YACA,wBACA,uBACA,+BACA,yBACA,MACA,WCtCN,SACI,sBACA,kBACA,cACA,+BACA,WACA,YACA,iBACA,4BACA,2BACA,4BACA,iBAEA,gBACE,WACA,cACA,sBACA,kBACA,WACA,YACA,kBACA,+BACA,qBACA,UACA,QCxBN,gBACI,sBACA,kBACA,cACA,+BACA,WACA,WACA,iBACA,8BACA,6BACA,4BACA,iBACA,iBAEA,+CACE,WACA,cACA,sBACA,kBAGF,uBACE,+BACA,qBACA,WACA,YACA,kBACA,UACA,SAGF,wBACE,UACA,WACA,wBACA,UACA,QCpCN,UACI,cACA,sBACA,iBAQA,2BACA,4BACA,gBACA,gBACA,kBACA,6CACA,WACA,YAbA,mCACE,cACA,sBACA,iBAYF,mCACE,WACA,kBACA,UACA,WACA,QACA,UACA,uBACA,mBAGF,iBACE","file":"cssgg.min.css"}

templates/components/details.latte

@@ -0,0 +1,4 @@
+<details>
+	<summary>{$title}</summary>
+	{block content}{/block}
+</details>

templates/components/feed.latte

@@ -0,0 +1 @@
+{include './themes/' . theme() . '.latte'}

templates/components/form.latte

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

templates/components/head.latte

@@ -0,0 +1,37 @@
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="apple-touch-icon" sizes="180x180" href="{path('/apple-touch-icon.png')}">
+	<link rel="icon" type="image/png" sizes="32x32" href="{path('/favicon-32x32.png')}">
+	<link rel="icon" type="image/png" sizes="16x16" href="{path('/favicon-16x16.png')}">
+	<link rel="manifest" href="{path('/manifest')}">
+	{if isset($og, $og_content, $og_url)}
+		<!-- Using TikTok's meta config -->
+		<meta property="og:title" content="{$og->title}" />
+		<meta property="og:description" content="{$og->description}" />
+		<meta property="og:url" content="{$og_url}" />
+		<meta property="og:image" content="{url_stream($og_content)}" />
+		<meta property="twitter:title" content="{$og->title}" />
+		<meta property="twitter:description" content="{$og->description}" />
+		<meta property="twitter:image" content="{url_stream($og_content)}" />
+	{else}
+		<!-- Using predifined ProxiTok config -->
+		<meta property="og:title" content="{$title}" />
+		<meta property="og:description" content="Alternative frontend for TikTok" />
+		<meta property="twitter:title" content="{$title}" />
+		<meta property="twitter:description" content="Alternative frontend for TikTok" />
+	{/if}
+	<meta property="og:site_name" content="ProxiTok" />
+	<meta property="og:type" content="website" />
+	<meta property="twitter:card" content="summary" />
+	<meta property="twitter:site" content="ProxiTok" />
+	{if isset($has_rss)}
+		<link rel="alternate" type="application/rss+xml" title="{$title}" href="{$_SERVER['REQUEST_URI'] . '/rss'}" />
+	{/if}
+	<link rel="stylesheet" href="{assets('css', 'cssgg.min.css', true)}">
+	<link rel="stylesheet" href="{assets('css', 'bulma.min.css', true)}">
+	<link rel="stylesheet" href="{assets('css', 'misc.css')}">
+	<link rel="stylesheet" href="{assets('css', 'carousel.css')}">
+	<title>{$title} - ProxiTok</title>
+</head>

templates/components/icon.latte

@@ -0,0 +1,14 @@
+{define icon_common, $icon}
+<span class="icon">
+	<i class="gg-{$icon}"></i>
+</span>
+{/define}
+
+{if isset($text)}
+<span class="icon-text">
+	{include icon_common, icon: $icon}
+	<span>{$text}</span>
+</span>
+{else}
+{include icon_common, icon: $icon}
+{/if}

templates/components/navbar.latte

@@ -0,0 +1,29 @@
+<nav class="navbar" role="navigation" aria-label="main navigation">
+  <div class="navbar-brand">
+	  <a href="{path('/')}" class="navbar-item">
+			{include './icon.latte', icon: 'home', text: 'ProxiTok'}
+		</a>
+    <a role="button" id="navbar-burger" class="navbar-burger" aria-label="menu" aria-expanded="false">
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+    </a>
+  </div>
+
+  <div id="navbar-menu" class="navbar-menu">
+    <div class="navbar-start">
+      <a href="{path('/settings')}" class="navbar-item">
+				{include './icon.latte', icon: 'options', text: 'Settings'}
+			</a>
+      <a href="{path('/about')}" class="navbar-item">
+				{include './icon.latte', icon: 'info', text: 'About'}
+			</a>
+    </div>
+		<div class="navbar-end">
+			<a href="https://github.com/pablouser1/ProxiTok" class="navbar-item" target="_blank">
+				{include './icon.latte', icon: 'code-slash', text: 'Source'}
+			</a>
+		</div>
+  </div>
+</nav>
+<script src="{assets('js', 'navbar.js')}"></script>

templates/components/rss.latte

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

templates/components/settings/api.latte

@@ -0,0 +1,17 @@
+{embed '../form.latte', path: '/settings/api', method: 'POST', submit: true}
+{block fields}
+	<div class="field">
+		<label class="label">Downloader</label>
+		<div class="control">
+			<div class="select">
+				<select name="api-downloader">
+					{foreach $downloaders as $downloader}
+						<option value="{$downloader}" n:attr="selected => $currentDownloader === $downloader">{$downloader|firstUpper}</option>
+					{/foreach}
+				</select>
+			</div>
+		</div>
+		<p class="help">Watermark downloads will <i>not</i> use third party methods</p>
+	</div>
+{/block}
+{/embed}

templates/components/settings/general.latte

@@ -0,0 +1,16 @@
+{embed '../form.latte', path: '/settings/general', method: 'POST', submit: true}
+{block fields}
+	<div class="field">
+		<label class="label">Theme</label>
+		<div class="control">
+			<div class="select">
+				<select name="theme">
+					{foreach $themes as $theme}
+						<option value="{$theme}" n:attr="selected => $currentTheme === $theme">{$theme|firstUpper}</option>
+					{/foreach}
+				</select>
+			</div>
+		</div>
+	</div>
+{/block}
+{/embed}

templates/components/themes/card.latte

@@ -1,29 +1,27 @@
-<link rel="stylesheet" href="{path('/styles/feed.css')}">
-<noscript>JavaScript is required for this section to work!</noscript>
+<link rel="stylesheet" href="{assets('css', 'themes/card.css')}">
 <section class="section">
+	<noscript>JavaScript is required for this section to work!</noscript>
   <div class="columns is-multiline is-vcentered">
 		{foreach $feed->items as $item}
-		{do $share_url = 'https://tiktok.com/@' . $item->author->uniqueId . '/video/' . $item->id}
+		{do $share_url = url_video_external($item->author->uniqueId, $item->id)}
     <div class="column is-one-quarter clickable-img" id="{$item->id}" onclick="openVideo(this.id)"
-			data-video_url="{path('/stream?url=' . urlencode($item->video->playAddr))}"
-			data-video_download_watermark="{path('/download?url=' . urlencode($item->video->playAddr) . '&id=' . $item->id . '&user=' . $item->author->uniqueId) . '&watermark='}"
-			data-video_download_nowatermark="{path('/download?id=' . $item->id . '&user=' . $item->author->uniqueId)}"
+			data-video_url="{url_stream($item->video->playAddr)}"
+			data-video_download_watermark="{url_download($item->video->playAddr, $item->author->uniqueId, $item->id, true)}"
+			data-video_download_nowatermark="{url_download(url_video_external($item->author->uniqueId, $item->id), $item->author->uniqueId, $item->id, false)}"
 			data-video_share_url="{$share_url}"
 			data-desc="{$item->desc}"
+			data-createtime="{$item->createTime}"
       data-music_title="{$item->music->title}"
-      data-music_url="{path('/stream?url=' . urlencode($item->music->playUrl))}">
-      <img loading="lazy" src="{path('/stream?url=' . urlencode($item->video->originCover))}" />
-			<img class="hidden" loading="lazy" data-src="{path('/stream?url=' . urlencode($item->video->dynamicCover))}" />
+      data-music_url="{url_stream($item->music->playUrl)}">
+      <img loading="lazy" src="{url_stream($item->video->originCover)}" />
+			<img class="hidden" loading="lazy" data-src="{url_stream($item->video->dynamicCover)}" />
     </div>
     {/foreach}
-  </div>
-	<div n:ifset="$feed->info" class="buttons">
-		{if isset($_GET['cursor']) && $_GET['cursor'] != 0 }
-    	<a class="button is-danger" href="?">First</a>
-			<button class="button is-danger" onclick="history.back()">Back</button>
+		{if empty($feed->items)}
+		<p class="title">No items sent by TikTok!</p>
 		{/if}
-    <a n:attr="disabled => !$feed->hasMore" class="button is-success" href="?cursor={$feed->maxCursor}">Next</a>
-	</div>
+  </div>
+	{include './common/controls.latte'}
 </section>
 
 <!-- MODAL -->
@@ -39,6 +37,7 @@
     </section>
 		<footer class="modal-card-foot has-text-centered">
 			<div class="container">
+				<p id="item_date"></p>
 				<div class="field has-addons has-addons-centered">
 					<div class="control">
 						<input id="share_input" class="input" readonly />
@@ -68,4 +67,4 @@
     </footer>
   </div>
 </div>
-<script src="{path('/scripts/feed.js')}"></script>
+<script src="{assets('js', 'themes/card.js')}"></script>

templates/components/themes/common/audio.latte

@@ -0,0 +1,2 @@
+<p class="mb-1">{include '../../icon.latte', icon: 'music', text: $songTitle}</p>
+<audio controls preload="none" src="{url_stream($url)}"></audio>

templates/components/themes/common/content.latte

@@ -0,0 +1,27 @@
+{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}
+{if isset($isSimple)}
+	{foreach $item->imagePost->images as $i => $image}
+		<img src="{url_stream($image->imageURL->urlList[0])}" />
+	{/foreach}
+{else}
+	<section class="carousel" aria-label="carousel" Tabindex="0">
+	  <div class="slides">
+			{foreach $item->imagePost->images as $i => $image}
+			<div class="slides-item" id="{$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="#{$item->id}-image{$i + 1}">{$i + 1}</a>
+			{/for}
+	  </div>
+	  <div class="carousel__skip-message" id="skip-link" tabindex="0"></div>
+	</section>
+	{/if}
+{/if}

templates/components/themes/common/controls.latte

@@ -0,0 +1,7 @@
+<div class="buttons">
+	{* is_numeric is used to avoid having a back button with ttwid cursors *}
+	{if isset($_GET['cursor']) && is_numeric($_GET['cursor']) && $_GET['cursor'] != 0}
+    <a class="button is-danger" href="?cursor=0">First</a>
+	{/if}
+  <a n:attr="disabled => !$feed->hasMore" class="button is-success" href="?cursor={$feed->maxCursor}">Next</a>
+</div>