Pictures support

Fix https:// + www in redirections (fixes #139)

.dockerignore

@@ -1,5 +1,6 @@
 node_modules
 /.env
+/.git
 /.vscode
 /vendor
 /cache/latte/*

.env.example

@@ -20,3 +20,5 @@
 # PROXY_PORT=8080
 # PROXY_USERNAME=username
 # PROXY_PASSWORD=password
+
+# USER_AGENT="Mozilla/5.0 (Android 12; Mobile; rv:109.0) Gecko/109.0 Firefox/109.0"

.github/ISSUE_TEMPLATE/bug_report.md

@@ -3,7 +3,7 @@ name: Bug report
 about: Create a report to help us improve
 title: ''
 labels: bug
-assignees: pablouser1
+assignees: ''
 
 ---
 

.github/workflows/docker-publish.yml

@@ -44,7 +44,7 @@ jobs:
         if: github.event_name != 'pull_request'
         uses: sigstore/cosign-installer@main
         with:
-          cosign-release: 'v1.13.1'
+          cosign-release: 'v2.0.0-rc.0'
 
 
       # Workaround: https://github.com/docker/build-push-action/issues/461

README.md

@@ -40,7 +40,8 @@ Apply to: Main window (address bar)
 * Add custom amount of videos per page
 
 ## Credits
-[@TheFrenchGhosty](https://github.com/TheFrenchGhosty): Initial Dockerfile and fixes to a usable state. You can check his Docker image [here](https://github.com/PussTheCat-org/docker-proxitok-quay) on Github or [here](https://quay.io/repository/pussthecatorg/proxitok) on Quay
+[TheFrenchGhosty](https://thefrenchghosty.me) ([Github](https://github.com/TheFrenchGhosty)): Initial Dockerfile and fixes to a usable state.
+
 ### External libraries
 * [TikScraperPHP](https://github.com/pablouser1/TikScraperPHP)
 * [Latte](https://github.com/nette/latte)

app/Cache/ApcuCache.php

@@ -0,0 +1,25 @@
+<?php
+namespace App\Cache;
+
+use TikScraper\Interfaces\CacheInterface;
+
+class ApcuCache implements CacheInterface {
+    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, $timeout = 3600): void {
+        apcu_store($cache_key, $data, $timeout);
+    }
+}

app/Constants/CacheMethods.php

@@ -3,5 +3,6 @@ namespace App\Constants;
 
 abstract class CacheMethods {
     const JSON = 'json';
+    const APCU = 'apcu';
     const REDIS = 'redis';
 }

app/Controllers/DiscoverController.php

@@ -3,16 +3,16 @@ namespace App\Controllers;
 
 use App\Helpers\ErrorHandler;
 use App\Helpers\Wrappers;
-use App\Models\FeedTemplate;
+use App\Models\DiscoverTemplate;
 
 class DiscoverController {
     static public function get() {
         $api = Wrappers::api();
-        $feed = $api->discover();
-        if ($feed->meta->success) {
-            Wrappers::latte('discover', new FeedTemplate('Discover', $feed));
+        $data = $api->discover();
+        if ($data->meta->success) {
+            Wrappers::latte('discover', new DiscoverTemplate($data));
         } else {
-            ErrorHandler::showMeta($feed->meta);
+            ErrorHandler::showMeta($data->meta);
         }
     }
 }

app/Controllers/ProxyController.php

@@ -2,45 +2,19 @@
 namespace App\Controllers;
 
 use App\Helpers\Cookies;
+use App\Helpers\Misc;
+use TikScraper\Constants\UserAgents as TikScraperUserAgents;
 
 class ProxyController {
     const VALID_TIKTOK_DOMAINS = [
         "tiktokcdn.com", "tiktokcdn-us.com", "tiktok.com"
     ];
 
-    static private function isValidDomain(string $url) {
-        $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);
-        } elseif ($host_count === 3) {
-            return in_array($host_split[1] . '.' . $host_split[2], self::VALID_TIKTOK_DOMAINS);
-        }
-        return false;
-    }
-
-    static private function checkUrl() {
-        if (!isset($_GET['url'])) {
-            die('You need to send a URL');
-        }
-
-        if (!filter_var($_GET['url'], FILTER_VALIDATE_URL) || !self::isValidDomain($_GET['url'])) {
-            die('Not a valid URL');
-        }
-
-    }
-
-    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();
+        $config['user_agent'] = Misc::env("USER_AGENT", TikScraperUserAgents::DEFAULT);
+        $streamer = new \TikScraper\Stream($config);
         $streamer->url($url);
     }
 
@@ -59,4 +33,34 @@ class ProxyController {
         // 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
+            $valid = in_array($host_split[0] . '.' . $host_split[1], self::VALID_TIKTOK_DOMAINS);
+        } elseif ($host_count === 3) {
+            $valid = in_array($host_split[1] . '.' . $host_split[2], self::VALID_TIKTOK_DOMAINS);
+        }
+        return $valid;
+    }
+
+    static private function checkUrl(): void {
+        if (!isset($_GET['url'])) {
+            die('You need to send a URL');
+        }
+
+        if (!filter_var($_GET['url'], FILTER_VALIDATE_URL) || !self::isValidDomain($_GET['url'])) {
+            die('Not a valid URL');
+        }
+
+    }
+
+    static private function getFilename(string $id, string $user): string {
+        $filename = 'tiktok-video-' . $id . '-' . $user;
+        return $filename;
+    }
 }

app/Controllers/RedirectController.php

@@ -2,12 +2,13 @@
 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() {
+    static public function search() {
         $endpoint = '/';
         if (isset($_GET['type'], $_GET['term'])) {
             $term = trim($_GET['term']);
@@ -48,11 +49,29 @@ class RedirectController {
         header("Location: {$url}");
     }
 
+    static public 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)) {
+        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)) {

app/Controllers/UserController.php

@@ -18,10 +18,6 @@ class UserController {
         if ($user->ok()) {
             $info = $user->getInfo();
             $feed = $user->getFeed();
-            if ($info->detail->privateAccount) {
-                ErrorHandler::showText(401, "Private account detected! Not supported");
-                return;
-            }
             Wrappers::latte('user', new FullTemplate($info->detail->nickname, $info, $feed));
         } else {
             ErrorHandler::showMeta($user->error());

app/Helpers/Wrappers.php

@@ -1,11 +1,14 @@
 <?php
 namespace App\Helpers;
 
+use App\Cache\ApcuCache;
 use App\Cache\JSONCache;
 use App\Cache\RedisCache;
 use App\Constants\CacheMethods;
 use App\Models\BaseTemplate;
 
+use TikScraper\Constants\UserAgents as TikScraperUserAgents;
+
 class Wrappers {
     /**
      * Setup of Latte template engine
@@ -76,6 +79,9 @@ class Wrappers {
         $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);
         });
@@ -135,6 +141,9 @@ class Wrappers {
                 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!');
@@ -155,6 +164,12 @@ class Wrappers {
             }
         }
 
+        $customUa = Misc::env("USER_AGENT", '');
+
+        if ($customUa) {
+            $options['user_agent'] = $customUa;
+        }
+
         return new \TikScraper\Api($options, $cacheEngine);
     }
 }

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/FeedTemplate.php

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

composer.json

@@ -1,7 +1,7 @@
 {
     "name": "pablouser1/proxitok",
     "description": "An alternative frontend for TikTok",
-    "version": "2.4.3.5",
+    "version": "2.4.8.0",
     "license": "AGPL-3.0-or-later",
     "type": "project",
     "authors": [

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "5ed78859acc6f451f60b75dca1887104",
+    "content-hash": "edc1f7ddb80ad13369e0536c32518ece",
     "packages": [
         {
             "name": "bramus/router",
@@ -57,6 +57,46 @@
             },
             "time": "2021-11-18T19:24:07+00:00"
         },
+        {
+            "name": "deemon47/user-agent-generator",
+            "version": "v1.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/Deemon47/user-agent-generator.git",
+                "reference": "5af13fd2e905c5441eb4d61aad3a71bd1e801709"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/Deemon47/user-agent-generator/zipball/5af13fd2e905c5441eb4d61aad3a71bd1e801709",
+                "reference": "5af13fd2e905c5441eb4d61aad3a71bd1e801709",
+                "shasum": ""
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Deemon47\\": "./"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "GPL-3.0-only"
+            ],
+            "authors": [
+                {
+                    "name": "phpfail",
+                    "email": "phpfail@gihub.com"
+                },
+                {
+                    "name": "Dee",
+                    "email": "deemon47@gmail.com"
+                }
+            ],
+            "description": "Generate random User-Agent http header with parameters",
+            "support": {
+                "source": "https://github.com/Deemon47/user-agent-generator/tree/v1.0.1"
+            },
+            "time": "2020-04-11T12:05:34+00:00"
+        },
         {
             "name": "josegonzalez/dotenv",
             "version": "dev-master",
@@ -263,19 +303,20 @@
         },
         {
             "name": "pablouser1/tikscraper",
-            "version": "v2.3.3.1",
+            "version": "v2.3.6.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/pablouser1/TikScraperPHP.git",
-                "reference": "b62fad1c00a4d62eda3e86811d35f7241cac097e"
+                "reference": "10394fb5fb5213d05fe0eb29f7582423fc15d08a"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/pablouser1/TikScraperPHP/zipball/b62fad1c00a4d62eda3e86811d35f7241cac097e",
-                "reference": "b62fad1c00a4d62eda3e86811d35f7241cac097e",
+                "url": "https://api.github.com/repos/pablouser1/TikScraperPHP/zipball/10394fb5fb5213d05fe0eb29f7582423fc15d08a",
+                "reference": "10394fb5fb5213d05fe0eb29f7582423fc15d08a",
                 "shasum": ""
             },
             "require": {
+                "deemon47/user-agent-generator": "^1.0",
                 "ext-curl": "*",
                 "ext-json": "*",
                 "ext-xml": "*",
@@ -305,43 +346,44 @@
             "description": "Get data from TikTok API",
             "support": {
                 "issues": "https://github.com/pablouser1/TikScraperPHP/issues",
-                "source": "https://github.com/pablouser1/TikScraperPHP/tree/v2.3.3.1"
+                "source": "https://github.com/pablouser1/TikScraperPHP/tree/v2.3.6.2"
             },
-            "time": "2022-11-26T22:50:46+00:00"
+            "time": "2023-04-01T13:46:50+00:00"
         },
         {
             "name": "php-webdriver/webdriver",
-            "version": "1.13.1",
+            "version": "1.14.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/php-webdriver/php-webdriver.git",
-                "reference": "6dfe5f814b796c1b5748850aa19f781b9274c36c"
+                "reference": "3ea4f924afb43056bf9c630509e657d951608563"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/php-webdriver/php-webdriver/zipball/6dfe5f814b796c1b5748850aa19f781b9274c36c",
-                "reference": "6dfe5f814b796c1b5748850aa19f781b9274c36c",
+                "url": "https://api.github.com/repos/php-webdriver/php-webdriver/zipball/3ea4f924afb43056bf9c630509e657d951608563",
+                "reference": "3ea4f924afb43056bf9c630509e657d951608563",
                 "shasum": ""
             },
             "require": {
                 "ext-curl": "*",
                 "ext-json": "*",
                 "ext-zip": "*",
-                "php": "^5.6 || ~7.0 || ^8.0",
+                "php": "^7.3 || ^8.0",
                 "symfony/polyfill-mbstring": "^1.12",
-                "symfony/process": "^2.8 || ^3.1 || ^4.0 || ^5.0 || ^6.0"
+                "symfony/process": "^5.0 || ^6.0"
             },
             "replace": {
                 "facebook/webdriver": "*"
             },
             "require-dev": {
-                "ondram/ci-detector": "^2.1 || ^3.5 || ^4.0",
+                "ergebnis/composer-normalize": "^2.20.0",
+                "ondram/ci-detector": "^4.0",
                 "php-coveralls/php-coveralls": "^2.4",
-                "php-mock/php-mock-phpunit": "^1.1 || ^2.0",
+                "php-mock/php-mock-phpunit": "^2.0",
                 "php-parallel-lint/php-parallel-lint": "^1.2",
-                "phpunit/phpunit": "^5.7 || ^7 || ^8 || ^9",
+                "phpunit/phpunit": "^9.3",
                 "squizlabs/php_codesniffer": "^3.5",
-                "symfony/var-dumper": "^3.3 || ^4.0 || ^5.0 || ^6.0"
+                "symfony/var-dumper": "^5.0 || ^6.0"
             },
             "suggest": {
                 "ext-SimpleXML": "For Firefox profile creation"
@@ -370,9 +412,9 @@
             ],
             "support": {
                 "issues": "https://github.com/php-webdriver/php-webdriver/issues",
-                "source": "https://github.com/php-webdriver/php-webdriver/tree/1.13.1"
+                "source": "https://github.com/php-webdriver/php-webdriver/tree/1.14.0"
             },
-            "time": "2022-10-11T11:49:44+00:00"
+            "time": "2023-02-09T12:12:19+00:00"
         },
         {
             "name": "sapistudio/seleniumstealth",
@@ -572,16 +614,16 @@
         },
         {
             "name": "symfony/process",
-            "version": "v5.4.11",
+            "version": "v5.4.22",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/process.git",
-                "reference": "6e75fe6874cbc7e4773d049616ab450eff537bf1"
+                "reference": "4b850da0cc3a2a9181c1ed407adbca4733dc839b"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/process/zipball/6e75fe6874cbc7e4773d049616ab450eff537bf1",
-                "reference": "6e75fe6874cbc7e4773d049616ab450eff537bf1",
+                "url": "https://api.github.com/repos/symfony/process/zipball/4b850da0cc3a2a9181c1ed407adbca4733dc839b",
+                "reference": "4b850da0cc3a2a9181c1ed407adbca4733dc839b",
                 "shasum": ""
             },
             "require": {
@@ -614,7 +656,7 @@
             "description": "Executes commands in sub-processes",
             "homepage": "https://symfony.com",
             "support": {
-                "source": "https://github.com/symfony/process/tree/v5.4.11"
+                "source": "https://github.com/symfony/process/tree/v5.4.22"
             },
             "funding": [
                 {
@@ -630,7 +672,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2022-06-27T16:58:25+00:00"
+            "time": "2023-03-06T21:29:33+00:00"
         }
     ],
     "packages-dev": [],

docker-compose.yml

@@ -18,13 +18,47 @@ services:
     depends_on:
       - redis
       - signer
+    networks:
+      - proxitok
+    security_opt:
+      - no-new-privileges:true
+    cap_drop:
+      - ALL
+    cap_add:
+      - CHOWN
+      - SETGID
+      - SETUID
+
   redis:
     container_name: proxitok-redis
     image: redis:7-alpine
     command: redis-server --save 60 1 --loglevel warning
     restart: unless-stopped
+    networks:
+      - proxitok
+    user: nobody
+    read_only: true
+    security_opt:
+      - no-new-privileges:true
+    tmpfs:
+      - /data:size=10M,mode=0770,uid=65534,gid=65534,noexec,nosuid,nodev
+    cap_drop:
+      - ALL
+
   signer:
     container_name: proxitok-signer
     image: ghcr.io/pablouser1/signtok:master
+    networks:
+      - proxitok
+    user: nobody
+    read_only: true
+    security_opt:
+      - no-new-privileges:true
+    cap_drop:
+      - ALL
+
 volumes:
   proxitok-cache:
+
+networks:
+  proxitok:

misc/scss/bulma.scss

@@ -28,6 +28,7 @@ $bulmaswatch-import-font: false;
 @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";

routes.php

@@ -2,6 +2,7 @@
 /** @var \Bramus\Router\Router $router */
 
 use App\Helpers\ErrorHandler;
+use App\Helpers\Misc;
 use App\Helpers\Wrappers;
 use App\Models\BaseTemplate;
 
@@ -21,9 +22,39 @@ $router->get('/verify', function () {
     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->get('/redirect/search', 'RedirectController@search');
+$router->get('/redirect/download', 'RedirectController@download');
 
 $router->mount('/trending', function () use ($router) {
     $router->get('/', 'TrendingController@get');

site.webmanifest

@@ -1,23 +0,0 @@
-{
-  "name": "ProxiTok",
-  "short_name": "ProxiTok",
-  "description": "Use TikTok with a privacy-friendly alternative frontend",
-  "orientation": "portrait-primary",
-  "icons": [
-    {
-      "src": "android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ],
-  "id": "./",
-  "start_url": "./",
-  "theme_color": "#4040ff",
-  "background_color": "#ffffff",
-  "display": "standalone"
-}

templates/components/head.latte

@@ -5,7 +5,7 @@
 	<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('/site.webmanifest')}">
+	<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}" />

templates/components/themes/card.latte

@@ -1,6 +1,6 @@
 <link rel="stylesheet" href="{static('css', 'themes/card.css')}">
-<noscript>JavaScript is required for this section to work!</noscript>
 <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 = url_video_external($item->author->uniqueId, $item->id)}

templates/components/themes/common/content.latte

@@ -0,0 +1,19 @@
+{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}
+<div n:class="columns, is-centered, is-vcentered, is-multiline, $isBig ? is-mobile">
+	{foreach $item->imagePost->images as $image}
+	{if $isBig}
+	<div class="column is-half">
+	{else}
+	<div class="column is-one-third-tablet is-one-third-desktop is-one-quarter-widescreen is-one-fifth-fullhd">
+	{/if}
+		<figure class="image">
+			<img width="{$image->imageWidth}" height="{$image->imageHeight}" src="{$image->imageURL->urlList[0]}" />
+		</figure>
+	</div>
+	{/foreach}
+</div>
+{/if}

templates/components/themes/common/controls.latte

@@ -1,7 +1,7 @@
-<div n:ifset="$data->info" class="buttons">
+<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 => !$data->feed->hasMore" class="button is-success" href="?cursor={$data->feed->maxCursor}">Next</a>
+  <a n:attr="disabled => !$feed->hasMore" class="button is-success" href="?cursor={$feed->maxCursor}">Next</a>
 </div>

templates/components/themes/common/download.latte

@@ -1,13 +1,8 @@
-<div class="dropdown is-hoverable">
-	<div class="dropdown-trigger">
-		<button class="button is-success" aria-haspopup="true" aria-controls="dropdown-menu">
-			{include '../../icon.latte', icon: 'software-download', text: 'Download'}
-		</button>
-	</div>
-	<div class="dropdown-menu" role="menu">
-		<div class="dropdown-content">
-			<a target="_blank" href="{url_download($playAddr, $uniqueId, $id, true)}" class="dropdown-item">Watermark</a>
-			<a target="_blank" href="{url_download(url_video_external($uniqueId, $id), $uniqueId, $id, false)}" class="dropdown-item">No watermark</a>
-		</div>
-	</div>
+<div class="field is-grouped is-grouped-centered">
+  <p class="control">
+		<a target="_blank" href="{url_download($playAddr, $uniqueId, $id, true)}" class="button is-info">Watermark</a>
+  </p>
+  <p class="control">
+		<a target="_blank" href="{url_download(url_video_external($uniqueId, $id), $uniqueId, $id, false)}" class="button is-success">No watermark</a>
+  </p>
 </div>

templates/components/themes/common/share.latte

@@ -1,17 +1,12 @@
-<div class="dropdown is-hoverable">
-	<div class="dropdown-trigger">
-		<button class="button is-primary" aria-haspopup="true" aria-controls="dropdown-menu">
-			{include '../../icon.latte', icon: 'share', text: 'Share'}
-		</button>
-	</div>
-	<div class="dropdown-menu" role="menu">
-		<div class="dropdown-content">
-			<a href="{url_video_internal($uniqueId, $id)}" class="dropdown-item has-text-success">
-				{include '../../icon.latte', icon: 'lock', text: 'Instance link'}
-			</a>
-			<a href="{url_video_external($uniqueId, $id)}" class="dropdown-item has-text-warning">
-				{include '../../icon.latte', icon: 'lock-unlock', text: 'Original Link'}
-			</a>
-		</div>
-	</div>
+<div class="field is-grouped is-grouped-centered">
+  <p class="control">
+		<a class="button is-success" href="{url_video_internal($uniqueId, $id)}">
+			{include '../../icon.latte', icon: 'lock', text: 'Instance'}
+		</a>
+  </p>
+  <p class="control">
+		<a class="button is-warning" href="{url_video_external($uniqueId, $id)}">
+			{include '../../icon.latte', icon: 'lock-unlock', text: 'Original'}
+		</a>
+  </p>
 </div>

templates/components/themes/default.latte

@@ -18,16 +18,16 @@
 			<p>{include './common/tags.latte', challenges: $item->challenges}</p>
 			{/if}
 			<p n:ifcontent>{$item->desc}</p>
+			<p>Song: {$item->music->title}</p>
+			<audio controls preload="none" src="{$item->music->playUrl}"></audio>
 			{include './common/stats.latte', playCount: $item->stats->playCount, diggCount: $item->stats->diggCount, commentCount: $item->stats->commentCount, shareCount: $item->stats->shareCount}
 			<div class="has-text-centered">
-				<video width="{$item->video->width}" height="{$item->video->height}" controls preload="none" poster="{url_stream($item->video->originCover)}">
-					<source src="{url_stream($item->video->playAddr)}" type="video/mp4" />
-				</video>
-			</div>
-			<div class="has-text-centered">
-				{include './common/share.latte', uniqueId: $item->author->uniqueId, id: $item->id}
-				{include './common/download.latte', playAddr: $item->video->playAddr, id: $item->id, uniqueId: $item->author->uniqueId}
+				{include './common/content.latte', item: $item, isAutoplay: false, isBig: false}
 			</div>
+			<p class="has-text-centered"><b>Download video</b></p>
+			{include './common/download.latte', playAddr: $item->video->playAddr, id: $item->id, uniqueId: $item->author->uniqueId}
+			<p class="has-text-centered"><b>Share link</b></p>
+			{include './common/share.latte', uniqueId: $item->author->uniqueId, id: $item->id}
   	</div>
 	</article>
 	{/foreach}

templates/views/discover.latte

@@ -5,7 +5,7 @@
 {/block}
 
 {block content}
-	{foreach $data->feed->items as $type => $items}
+	{foreach $data->items as $type => $items}
 		<p class="title">{$type|firstUpper}</p>
 		<div class="columns is-multiline is-vcentered">
 			{foreach $items as $item}

templates/views/home.latte

@@ -3,7 +3,7 @@
 {block content}
 	<p class="title has-text-centered">Welcome to ProxiTok!</p>
 	<p class="subtitle has-text-centered">An alternative open source frontend for TikTok</p>
-	{embed '../components/form.latte', path: '/redirect', method: 'GET'}
+	{embed '../components/form.latte', path: '/redirect/search', method: 'GET'}
 		{block fields}
 			<div class="field has-addons has-addons-centered">
 				<div class="control">

templates/views/user.latte

@@ -12,6 +12,10 @@
 	</figure>
 	<p class="title">{$info->detail->uniqueId}</p>
 	<p class="subtitle">{include '../components/rss.latte'}</p>
+	{if $info->detail->privateAccount}
+	<p><strong>Private account</strong></p>
+	{/if}
+	<p></p>
 	<p>{$info->detail->signature}</p>
 	<p>Following: {number($info->stats->followingCount)} / Followers: {number($info->stats->followerCount)}</p>
 	<p>Hearts: {number($info->stats->heartCount)} / Videos: {$info->stats->videoCount}</p>

templates/views/video.latte

@@ -4,12 +4,14 @@
 {var $og_content = $item->video->originCover}
 {var $og_url = url_video_internal($info->detail->uniqueId, $item->id)}
 
+{if !empty($item->desc)}
+	{var $title = trim($item->desc)}
+{/if}
+
 {block content}
-	<div class="columns is-centered is-vcentered is-gapless">
+	<div class="columns is-centered is-vcentered">
 		<div class="column has-text-centered">
-			<video controls autoplay poster="{url_stream($item->video->originCover)}">
-				<source src="{url_stream($item->video->playAddr)}" type="video/mp4" />
-			</video>
+			{include '../components/themes/common/content.latte', item: $item, isAutoplay: true, isBig: true}
 		</div>
 		<div class="column">
 			<div class="box">
@@ -32,6 +34,8 @@
 						{/if}
 						<div class="content">
 							<p n:ifcontent>{$item->desc}</p>
+							<p>Song: {$item->music->title}</p>
+							<audio controls preload="none" src="{$item->music->playUrl}"></audio>
 							{include '../components/themes/common/stats.latte', playCount: $item->stats->playCount, diggCount: $item->stats->diggCount, commentCount: $item->stats->commentCount, shareCount: $item->stats->shareCount}
 							<div class="has-text-centered">
 								{include '../components/themes/common/share.latte', uniqueId: $info->detail->uniqueId, id: $item->id}
@@ -41,6 +45,34 @@
   				</div>
 				</article>
 			</div>
+			{if !empty($item->comments)}
+			<div class="box">
+				<p class="is-size-5 has-text-centered">Comments</p>
+				{foreach $item->comments as $comment}
+				<article class="media">
+				  <figure class="media-left">
+				    <p class="image is-64x64">
+				      <img src="{url_stream($comment->user->avatar_thumb->url_list[0])}" />
+				    </p>
+				  </figure>
+				  <div class="media-content">
+				    <div class="content">
+				      <p>
+				        <strong>{$comment->user->unique_id}</strong>
+								<small>
+									<a href="{url_user($comment->user->unique_id)}">@{$comment->user->nickname}</a>
+								</small>
+								<small title="{date('M d, Y H:i:s e', $comment->create_time)}">{date('M d, Y', $comment->create_time)}</small>
+				        <br>
+								{$comment->text}
+				      </p>
+				    </div>
+						<p>{include '../components/icon.latte', icon: 'heart', text: number($comment->digg_count)}</p>
+				  </div>
+				</article>
+				{/foreach}
+			</div>
+			{/if}
 		</div>
 	</div>
 {/block}