Fixed no watermark download, added settings icon

Example Redirector config change

.env.example

@@ -2,8 +2,8 @@
 # LATTE_CACHE=/tmp/proxitok_api # Path for Latte cache, leave commented for ./cache/latte
 
 # API CONFIG
-# API_SIGNER_URL="https://example.com" # External signing service
-# API_BROWSER_URL="http://localhost:4444" # chromedriver url
+# API_SIGNER="remote"
+# API_SIGNER_URL="http://localhost:8080"
 # API_TEST_ENDPOINTS=true # Uncomment for usage of testing TikTok endpoints, may help sometimes
 # API_CACHE=redis
 
@@ -14,3 +14,9 @@
 
 # JSON cache, used on Helpers\CacheEngines\JSONCache
 # API_CACHE_JSON=/tmp/proxitok_api # Path for JSON API Cache, leave commented for ./cache/api
+
+# Proxy Config
+# PROXY_HOST=http://EXAMPLE_IP # Host to be used as proxy, make sure to type a valid protocol. Available: http:// | https:// | socks4:// | socks5://
+# PROXY_PORT=8080
+# PROXY_USERNAME=username
+# PROXY_PASSWORD=password

.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: pablouser1
+
+---
+
+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.
+
+**Enviroment (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.

Dockerfile

@@ -1,4 +1,4 @@
-FROM php:8-apache
+FROM php:8.1-apache
 WORKDIR /var/www/html
 COPY --from=composer /usr/bin/composer /usr/bin/composer
 RUN apt update -y && apt upgrade -y \

README.md

@@ -21,23 +21,23 @@ 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)
 ```
 
 ## TODO / Known issues
+* Replace placeholder favicon
 * Make video on /video fit screen and don't overflow
 * 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
-* Discover does not work
 
 ## 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

app/Cache/JSONCache.php

@@ -1,7 +1,9 @@
 <?php
 namespace App\Cache;
 
-class JSONCache {
+use TikScraper\Interfaces\CacheInterface;
+
+class JSONCache implements CacheInterface {
     private string $cache_path = __DIR__ . '/../../cache/api';
 
     function __construct() {
@@ -24,7 +26,7 @@ class JSONCache {
         return is_file($filename);
     }
 
-    public function set(string $cache_key, mixed $data, $timeout = 3600) {
+    public function set(string $cache_key, string $data, $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\CacheInterface;
+
+class RedisCache implements CacheInterface {
     private \Redis $client;
     function __construct(string $host, int $port, ?string $password) {
         $this->client = new \Redis();
@@ -21,10 +23,7 @@ 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 {

app/Constants/CacheMethods.php

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

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

@@ -14,7 +14,7 @@ class DiscoverController {
             $latte = Wrappers::latte();
             $latte->render(Misc::getView('discover'), new FeedTemplate('Discover', $feed));
         } else {
-            ErrorHandler::show($feed->meta);
+            ErrorHandler::showMeta($feed->meta);
         }
     }
 }

app/Controllers/EmbedController.php

@@ -9,12 +9,14 @@ use App\Models\VideoTemplate;
 class EmbedController {
     static public function v2(int $id) {
         $api = Wrappers::api();
-        $feed = $api->getVideoByID($id);
-        if ($feed->meta->success) {
+        $video = $api->video($id);
+        $video->feed();
+        if ($video->ok()) {
+            $data = $video->getFull();
             $latte = Wrappers::latte();
-            $latte->render(Misc::getView('video'), new VideoTemplate($feed->items[0], $feed->info->detail, true));
+            $latte->render(Misc::getView('video'), new VideoTemplate($data->feed->items[0], $data->info->detail, true));
         } else {
-            ErrorHandler::show($feed->meta);
+            ErrorHandler::showMeta($video->error());
         }
     }
 }

app/Controllers/MusicController.php

@@ -18,7 +18,7 @@ class MusicController {
             $latte = Wrappers::latte();
             $latte->render(Misc::getView('music'), new FullTemplate('Music', $data));
         } else {
-            ErrorHandler::show($music->error());
+            ErrorHandler::showMeta($music->error());
         }
     }
 }

app/Controllers/ProxyController.php

@@ -1,6 +1,9 @@
 <?php
 namespace App\Controllers;
 
+use App\Helpers\Cookies;
+use TikScraper\Helpers\Converter;
+
 class ProxyController {
     const VALID_TIKTOK_DOMAINS = [
         "tiktokcdn.com", "tiktokcdn-us.com", "tiktok.com"
@@ -30,11 +33,9 @@ class ProxyController {
 
     }
 
-    static private function getFileName(): string {
-        $filename = 'tiktok-video';
-        if (isset($_GET['user'])) {
-            $filename .= '-' . $_GET['user'] . '-' . $_GET['id'];
-        }
+    static private function getFilename(string $url, string $user): string {
+        $id = Converter::urlToId($url);
+        $filename = 'tiktok-video-' . $id . '-' . $user;
         return $filename;
     }
 
@@ -46,18 +47,17 @@ class ProxyController {
     }
 
     static public function download() {
-        $downloader = new \TikScraper\Download();
+        self::checkUrl();
+        $method = Cookies::downloader();
+        $downloader = new \TikScraper\Download($method);
+
+        // Params
         $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);
-        }
+        $url = $_GET['url'];
+        $user = $_GET['user'] ?? '';
+        // Filename
+        $filename = self::getFilename($url, $user);
+        // Running
+        $downloader->url($_GET['url'], $filename, $watermark);
     }
 }

app/Controllers/RedirectController.php

@@ -10,12 +10,12 @@ class RedirectController {
     static public function redirect() {
         $endpoint = '/';
         if (isset($_GET['type'], $_GET['term'])) {
-            $term = trim($_GET['term']);
+            $term = urlencode(trim($_GET['term']));
             switch ($_GET['type']) {
                 case 'url':
                     $endpoint = self::to_endpoint($term);
                     if (!$endpoint) {
-                        echo 'Invalid or unknown TikTok URL format';
+                        ErrorHandler::showText(400, 'Invalid TikTok URL');
                         return;
                     }
                     break;
@@ -52,7 +52,7 @@ class RedirectController {
      * to_endpoint maps a TikTok URL into a ProxiTok-compatible endpoint URL.
      */
     static private function to_endpoint(string $url): string {
-        if (preg_match('%^https://vm\.tiktok\.com/([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/SettingsController.php

@@ -4,12 +4,12 @@ namespace App\Controllers;
 use App\Helpers\Misc;
 use App\Helpers\Cookies;
 use App\Helpers\Wrappers;
-use App\Models\BaseTemplate;
+use App\Models\SettingsTemplate;
 
 class SettingsController {
     static public function index() {
         $latte = Wrappers::latte();
-        $latte->render(Misc::getView('settings'), new BaseTemplate('Settings'));
+        $latte->render(Misc::getView('settings'), new SettingsTemplate());
     }
 
     static public function general() {
@@ -25,6 +25,11 @@ class SettingsController {
             $test_endpoints = $_POST['api-test_endpoints'];
             Cookies::set('api-test_endpoints', $test_endpoints);
         }
+
+        if (isset($_POST['api-downloader'])) {
+            $downloader = $_POST['api-downloader'];
+            Cookies::set("api-downloader", $downloader);
+        }
         self::redirect();
     }
 

app/Controllers/TagController.php

@@ -16,9 +16,9 @@ class TagController {
         if ($hashtag->ok()) {
             $data = $hashtag->getFull();
             $latte = Wrappers::latte();
-            $latte->render(Misc::getView('tag'), new FullTemplate('Tag', $data));
+            $latte->render(Misc::getView('tag'), new FullTemplate($data->info->detail->title, $data));
         } else {
-            ErrorHandler::show($hashtag->error());
+            ErrorHandler::showMeta($hashtag->error());
         }
     }
 

app/Controllers/TrendingController.php

@@ -20,7 +20,7 @@ class TrendingController {
             $latte = Wrappers::latte();
             $latte->render(Misc::getView('trending'), new FeedTemplate('Trending', $feed));
         } else {
-            ErrorHandler::show($trending->error());
+            ErrorHandler::showMeta($trending->error());
         }
     }
 

app/Controllers/UserController.php

@@ -17,14 +17,13 @@ class UserController {
         if ($user->ok()) {
             $data = $user->getFull();
             if ($data->info->detail->privateAccount) {
-                http_response_code(403);
-                echo 'Private account detected! Not supported';
-                exit;
+                ErrorHandler::showText(401, "Private account detected! Not supported");
+                return;
             }
             $latte = Wrappers::latte();
             $latte->render(Misc::getView('user'), new FullTemplate($data->info->detail->nickname, $data));
         } else {
-            ErrorHandler::show($user->error());
+            ErrorHandler::showMeta($user->error());
         }
     }
 
@@ -37,7 +36,7 @@ class UserController {
             $latte = Wrappers::latte();
             $latte->render(Misc::getView('video'), new VideoTemplate($data->feed->items[0], $data->info->detail));
         } else {
-            ErrorHandler::show($video->error());
+            ErrorHandler::showMeta($video->error());
         }
     }
 

app/Helpers/Cookies.php

@@ -1,9 +1,9 @@
 <?php
 namespace App\Helpers;
 
-class Cookies {
-    const ALLOWED_THEMES = ['default', 'card'];
+use App\Constants\Themes;
 
+class Cookies {
     static public function get(string $name, string $default_value = ''): string {
         if (isset($_COOKIE[$name]) && !empty($_COOKIE[$name])) {
             return $_COOKIE[$name];
@@ -13,12 +13,19 @@ class Cookies {
 
     static public function theme(): string {
         $theme = self::get('theme');
-        if ($theme && in_array($theme, self::ALLOWED_THEMES)) {
+        $ref = new \ReflectionClass(Themes::class);
+        $themes = $ref->getConstants();
+        if ($theme && in_array($theme, $themes)) {
             return $theme;
         }
         return 'default';
     }
 
+    static public function downloader(): string {
+        $downloader = self::get('api-downloader', 'default');
+        return $downloader;
+    }
+
     static public function exists(string $name): bool {
         return isset($_COOKIE[$name]);
     }

app/Helpers/ErrorHandler.php

@@ -5,9 +5,15 @@ use App\Models\ErrorTemplate;
 use TikScraper\Models\Meta;
 
 class ErrorHandler {
-    static public function show(Meta $meta) {
+    static public function showMeta(Meta $meta) {
         http_response_code($meta->http_code);
         $latte = Wrappers::latte();
-        $latte->render(Misc::getView('error'), new ErrorTemplate($meta));
+        $latte->render(Misc::getView('error'), new ErrorTemplate($meta->http_code, $meta->tiktok_msg, $meta->tiktok_code));
+    }
+
+    static public function showText(int $code, string $msg) {
+        http_response_code($code);
+        $latte = Wrappers::latte();
+        $latte->render(Misc::getView('error'), new ErrorTemplate($code, $msg));
     }
 }

app/Helpers/UrlBuilder.php

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

app/Helpers/Wrappers.php

@@ -3,6 +3,7 @@ namespace App\Helpers;
 
 use App\Cache\JSONCache;
 use App\Cache\RedisCache;
+use App\Constants\CacheMethods;
 
 class Wrappers {
     /**
@@ -28,6 +29,23 @@ class Wrappers {
         $latte->addFunction('theme', function(): string {
             return Cookies::theme();
         });
+
+        // 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_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, bool $watermark): string {
+            return UrlBuilder::download($url, $username, $watermark);
+        });
         // https://stackoverflow.com/a/36365553
         $latte->addFunction('number', function (float $x) {
             if($x > 1000) {
@@ -49,22 +67,49 @@ class Wrappers {
      * Setup of TikTok Api wrapper
      */
     static public function api(): \TikScraper\Api {
+        $method = Misc::env('API_SIGNER', '');
+        $url = Misc::env('API_SIGNER_URL', '');
+        if (!$method) {
+            // Legacy support
+            $browser_url = Misc::env('API_BROWSER_URL', '');
+            if ($url) {
+                $method = 'remote';
+            } elseif ($browser_url) {
+                $url = $browser_url;
+                $method = 'browser';
+            }
+        }
+
         $options = [
             'use_test_endpoints' => Misc::env('API_TEST_ENDPOINTS', false) || isset($_COOKIE['api-test_endpoints']) && $_COOKIE['api-test_endpoints'] === 'yes',
             'signer' => [
-                'remote_url' => Misc::env('API_SIGNER_URL', ''),
-                'browser_url' => Misc::env('API_BROWSER_URL', ''),
+                'method' => $method,
+                'url' => $url,
                 'close_when_done' => false
             ]
         ];
+
+        // -- PROXY CONFIG -- //
+        $proxy_host = Misc::env('PROXY_HOST', '');
+        $proxy_port = Misc::env('PROXY_PORT', '');
+
+        if ($proxy_host && $proxy_port) {
+            $options['proxy'] = [
+                'host' => $proxy_host,
+                'port' => $proxy_port,
+                'username' => Misc::env('PROXY_USERNAME', null),
+                'password' => Misc::env('PROXY_PASSWORD', null)
+            ];
+        }
+
         // Cache config
-        $cacheEngine = false;
+        $cacheEngine = null;
         if (isset($_ENV['API_CACHE'])) {
             switch ($_ENV['API_CACHE']) {
-                case 'json':
+                case CacheMethods::JSON:
                     $cacheEngine = new JSONCache();
                     break;
-                case 'redis':
+                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!');
                     }

app/Models/ErrorTemplate.php

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

app/Models/SettingsTemplate.php

@@ -0,0 +1,31 @@
+<?php
+namespace App\Models;
+
+use App\Constants\Themes;
+use App\Helpers\Cookies;
+use TikScraper\Constants\DownloadMethods;
+
+/**
+* Base for templates with a feed
+*/
+class SettingsTemplate extends BaseTemplate {
+    public array $downloaders = [];
+    public array $themes = [];
+    public bool $isTestEndpoints = false;
+    public string $currentDownloader;
+    public string $currentTheme;
+
+    function __construct() {
+        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->isTestEndpoints = Cookies::check('api-test_endpoints', 'yes');
+        $this->currentDownloader = Cookies::downloader();
+        $this->currentTheme = Cookies::theme();
+    }
+}

components/head.latte

@@ -2,6 +2,10 @@
 	<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('/site.webmanifest')}">
 	<meta property="og:title" content="ProxiTok" />
 	<meta property="og:description" content="Alternative frontend for TikTok" />
 	<meta property="og:type" content="website" />

components/navbar.latte

@@ -1,5 +1,6 @@
 <nav class="navbar" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
+	  <a href="{path('/')}" class="navbar-item">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>
@@ -9,14 +10,16 @@
 
   <div id="navbar-menu" class="navbar-menu">
     <div class="navbar-start">
-      <a href="{path('/')}" class="navbar-item">
-				{include './icon.latte', icon: 'home', text: 'Home'}
+      <a href="{path('/settings')}" class="navbar-item">
+				{include './icon.latte', icon: 'options', text: 'Settings'}
 			</a>
-      <a href="{path('/settings')}" class="navbar-item">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">Source</a>
+		</div>
   </div>
 </nav>
 <script src="{path('/scripts/navbar.js')}"></script>

components/settings/api.latte

@@ -1,19 +1,31 @@
 {embed '../form.latte', path: '/settings/api', method: 'POST', submit: true}
 {block fields}
-	{var $use_endpoints = \App\Helpers\Cookies::check('api-test_endpoints', 'yes')}
 	<div class="field">
 		<label class="label">Use test endpoints</label>
 		<div class="control">
 			<label class="radio">
-    		<input type="radio" name="api-test_endpoints" value="yes" n:attr="checked => $use_endpoints" />
+    		<input type="radio" name="api-test_endpoints" value="yes" n:attr="checked => $isTestEndpoints" />
 				<span>Yes</span>
 			</label>
 			<label class="radio">
-    		<input type="radio" name="api-test_endpoints" value="no" n:attr="checked => !$use_endpoints" />
+    		<input type="radio" name="api-test_endpoints" value="no" n:attr="checked => !$isTestEndpoints" />
 				<span>No</span>
 			</label>
 		</div>
 		<p class="help">This <i>may</i> help bypass rate limits</p>
   </div>
+	<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}

components/settings/general.latte

@@ -2,13 +2,15 @@
 {block fields}
 	<div class="field">
 		<label class="label">Theme</label>
-		<div class="select">
-			<select name="theme">
-				<option hidden disabled selected value> -- Select an option -- </option>
-				<option value="default">Default</option>
-				<option value="card">Card</option>
-			</select>
+		<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>
+	</div>
 {/block}
 {/embed}

components/themes/card.latte

@@ -3,18 +3,18 @@
 <section class="section">
   <div class="columns is-multiline is-vcentered">
 		{foreach $data->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, true)}"
+			data-video_download_nowatermark="{url_download($item->video->playAddr, $item->author->uniqueId, 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}
 		{if empty($data->feed->items)}

components/themes/common/download.latte

@@ -6,8 +6,8 @@
 	</div>
 	<div class="dropdown-menu" role="menu">
 		<div class="dropdown-content">
-			<a target="_blank" href="{path('/download?url=' . urlencode($playAddr) . '&id=' . $id . '&user=' . $uniqueId) . '&watermark=1'}" class="dropdown-item">Watermark</a>
-			<a target="_blank" href="{path('/download?id=' . $id . '&user=' . $uniqueId)}" class="dropdown-item">No watermark</a>
+			<a target="_blank" href="{url_download($playAddr, $uniqueId, true)}" class="dropdown-item">Watermark</a>
+			<a target="_blank" href="{url_download(url_video_external($uniqueId, $id), $uniqueId, false)}" class="dropdown-item">No watermark</a>
 		</div>
 	</div>
 </div>

components/themes/common/share.latte

@@ -1,5 +1,5 @@
 {do $endpoint = '/@' . $uniqueId . '/video/' . $id}
 <div class="buttons is-centered">
-	<a class="button is-success is-small" href="{path($endpoint)}">Instance Link</a>
-	<a class="button is-danger is-small" href="https://www.tiktok.com{$endpoint}">Original Link</a>
+	<a class="button is-success is-small" href="{url_video_internal($uniqueId, $id)}">Instance Link</a>
+	<a class="button is-danger is-small" href="{url_video_external($uniqueId, $id)}">Original Link</a>
 </div>

components/themes/default.latte

@@ -3,7 +3,7 @@
 	<article class="media">
   	<figure class="media-left">
     	<p class="image is-64x64">
-      	<img src="{path('/stream?url=' . urlencode($item->author->avatarThumb))}" />
+      	<img src="{url_stream($item->author->avatarThumb)}" />
     	</p>
   	</figure>
   	<div class="media-content">
@@ -11,7 +11,7 @@
       	<p>
         	<strong>{$item->author->nickname}</strong>
 					<small>
-						<a href="{path('/@' . $item->author->uniqueId)}">@{$item->author->uniqueId}</a>
+						<a href="{url_user($item->author->uniqueId)}">@{$item->author->uniqueId}</a>
 					</small>
 					<small title="{date('M d, Y H:i:s e', $item->createTime)}">{date('M d, Y', $item->createTime)}</small>
       	</p>
@@ -22,8 +22,8 @@
 				{include './common/stats.latte', playCount: $item->stats->playCount, diggCount: $item->stats->diggCount, commentCount: $item->stats->commentCount, shareCount: $item->stats->shareCount}
     	</div>
 			<div class="has-text-centered">
-				<video width="{$item->video->width}" height="{$item->video->height}" controls preload="none" poster="{path('/stream?url=' . urlencode($item->video->originCover))}">
-					<source src="{path('/stream?url=' . $item->video->playAddr)}" type="video/mp4" />
+				<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">

composer.json

@@ -1,7 +1,7 @@
 {
     "name": "pablouser1/proxitok",
     "description": "An alternative frontend for TikTok",
-    "version": "2.3.2.2",
+    "version": "2.4.2.2",
     "license": "AGPL-3.0-or-later",
     "type": "project",
     "authors": [
@@ -24,7 +24,7 @@
         "latte/latte": "^2.11",
         "bramus/router": "^1.6",
         "josegonzalez/dotenv": "dev-master",
-        "pablouser1/tikscraper": "^2.1"
+        "pablouser1/tikscraper": "^2.3"
     },
     "autoload": {
         "psr-4": {

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": "15ff00ea59afbf0d6d064d4cbefb05fb",
+    "content-hash": "cba94cb83e29611d014cde3b5d1e1e67",
     "packages": [
         {
             "name": "bramus/router",
@@ -263,16 +263,16 @@
         },
         {
             "name": "pablouser1/tikscraper",
-            "version": "v2.1.2.0",
+            "version": "v2.3.1.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/pablouser1/TikScraperPHP.git",
-                "reference": "96326226e54de2d1feedcc708200ba023a0553e5"
+                "reference": "5baf0106bd4b86e92f092f7d17e6fc2d24aabf8a"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/pablouser1/TikScraperPHP/zipball/96326226e54de2d1feedcc708200ba023a0553e5",
-                "reference": "96326226e54de2d1feedcc708200ba023a0553e5",
+                "url": "https://api.github.com/repos/pablouser1/TikScraperPHP/zipball/5baf0106bd4b86e92f092f7d17e6fc2d24aabf8a",
+                "reference": "5baf0106bd4b86e92f092f7d17e6fc2d24aabf8a",
                 "shasum": ""
             },
             "require": {
@@ -284,7 +284,7 @@
                 "sapistudio/seleniumstealth": "^1.0"
             },
             "require-dev": {
-                "phpunit/phpunit": "^9.5"
+                "pestphp/pest": "^1.22"
             },
             "type": "library",
             "autoload": {
@@ -298,28 +298,29 @@
             ],
             "authors": [
                 {
-                    "name": "Pablo Ferreiro"
+                    "name": "Pablo Ferreiro",
+                    "homepage": "https://pabloferreiro.es"
                 }
             ],
             "description": "Get data from TikTok API",
             "support": {
                 "issues": "https://github.com/pablouser1/TikScraperPHP/issues",
-                "source": "https://github.com/pablouser1/TikScraperPHP/tree/v2.1.2.0"
+                "source": "https://github.com/pablouser1/TikScraperPHP/tree/v2.3.1.1"
             },
-            "time": "2022-08-11T21:32:02+00:00"
+            "time": "2022-10-23T19:33:37+00:00"
         },
         {
             "name": "php-webdriver/webdriver",
-            "version": "1.12.1",
+            "version": "1.13.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/php-webdriver/php-webdriver.git",
-                "reference": "b27ddf458d273c7d4602106fcaf978aa0b7fe15a"
+                "reference": "6dfe5f814b796c1b5748850aa19f781b9274c36c"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/php-webdriver/php-webdriver/zipball/b27ddf458d273c7d4602106fcaf978aa0b7fe15a",
-                "reference": "b27ddf458d273c7d4602106fcaf978aa0b7fe15a",
+                "url": "https://api.github.com/repos/php-webdriver/php-webdriver/zipball/6dfe5f814b796c1b5748850aa19f781b9274c36c",
+                "reference": "6dfe5f814b796c1b5748850aa19f781b9274c36c",
                 "shasum": ""
             },
             "require": {
@@ -369,9 +370,9 @@
             ],
             "support": {
                 "issues": "https://github.com/php-webdriver/php-webdriver/issues",
-                "source": "https://github.com/php-webdriver/php-webdriver/tree/1.12.1"
+                "source": "https://github.com/php-webdriver/php-webdriver/tree/1.13.1"
             },
-            "time": "2022-05-03T12:16:34+00:00"
+            "time": "2022-10-11T11:49:44+00:00"
         },
         {
             "name": "sapistudio/seleniumstealth",

docker-compose.yml

@@ -11,6 +11,7 @@ services:
       - API_CACHE=redis
       - REDIS_HOST=proxitok-redis
       - REDIS_PORT=6379
+      - API_SIGNER=remote
       - API_SIGNER_URL=http://proxitok-signer:8080/signature
     volumes:
       - proxitok-cache:/cache

routes.php

@@ -1,9 +1,15 @@
 <?php
 /** @var \Bramus\Router\Router $router */
+
+use App\Helpers\ErrorHandler;
 use App\Helpers\Misc;
 use App\Helpers\Wrappers;
 use App\Models\BaseTemplate;
 
+$router->set404(function () {
+    ErrorHandler::showText(404, "That endpoint doesn't exist");
+});
+
 $router->get('/', function () {
     $latte = Wrappers::latte();
     $latte->render(Misc::getView('home'), new BaseTemplate('Home'));

scss/bulma.scss

@@ -10,6 +10,7 @@ $bulmaswatch-import-font: false;
 @import "./node_modules/bulma/sass/base/_all.sass";
 
 // Elements
+@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/icon.sass";

scss/cssgg.scss

@@ -1,6 +1,7 @@
 @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";
 
 // Home
@@ -13,3 +14,6 @@
 @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";
+
+// Video
+@import "./node_modules/css.gg/icons/scss/music.scss";

site.webmanifest

@@ -0,0 +1,23 @@
+{
+  "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"
+}

styles/vendor/cssgg.min.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/node_modules/css.gg/icons/scss/home.scss","../../scss/node_modules/css.gg/icons/scss/info.scss","../../scss/node_modules/css.gg/icons/scss/search.scss","../../scss/node_modules/css.gg/icons/scss/feed.scss","../../scss/node_modules/css.gg/icons/scss/eye.scss","../../scss/node_modules/css.gg/icons/scss/heart.scss","../../scss/node_modules/css.gg/icons/scss/comment.scss","../../scss/node_modules/css.gg/icons/scss/share.scss","../../scss/node_modules/css.gg/icons/scss/software-download.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,SACI,sBACA,kBACA,cACA,+BACA,WACA,YACA,iBACA,mBAEA,iCACE,WACA,cACA,sBACA,kBACA,kBACA,UACA,wBACA,SAGF,gBACE,WACA,WAGF,iBACE,WACA,QC5BN,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","file":"cssgg.min.css"}
+{"version":3,"sourceRoot":"","sources":["../../scss/node_modules/css.gg/icons/scss/home.scss","../../scss/node_modules/css.gg/icons/scss/options.scss","../../scss/node_modules/css.gg/icons/scss/info.scss","../../scss/node_modules/css.gg/icons/scss/search.scss","../../scss/node_modules/css.gg/icons/scss/feed.scss","../../scss/node_modules/css.gg/icons/scss/eye.scss","../../scss/node_modules/css.gg/icons/scss/heart.scss","../../scss/node_modules/css.gg/icons/scss/comment.scss","../../scss/node_modules/css.gg/icons/scss/share.scss","../../scss/node_modules/css.gg/icons/scss/software-download.scss","../../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,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,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"}

views/error.latte

@@ -2,9 +2,17 @@
 
 {block content}
 	<p class="title">There was an error processing your request!</p>
-	<p class="subtitle">HTTP Code: {$error->http_code}</p>
-	<p class="subtitle">API error code {$error->tiktok_code} ({$error->tiktok_msg})</p>
-	{if $error->tiktok_code === 10000 || $error->tiktok_code === -1}
-		<a href="{path('/verify')}">What does this mean?</a>
-	{/if}
+	<div class="content">
+		<p>HTTP Code: {$http_code}</p>
+		{if isset($tiktok_code)}
+		<p>
+			<span>API error code {$tiktok_code} ({$msg})</span>
+			{if $tiktok_code === 10000 || $tiktok_code === -1}
+				<a href="{path('/verify')}">What does this mean?</a>
+			{/if}
+		</p>
+		{else}
+		<p>{$msg}</p>
+		{/if}
+	</div>
 {/block}

views/rss.latte

@@ -1,6 +1,6 @@
 {contentType application/rss+xml}
 {do header('Content-Disposition: attachment; filename="' . $title . '.rss' . '"')}
-{do $full_link = path($link)}
+{var $full_link = path($link)}
 <?xml version="1.0" encoding="utf-8" ?>
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
 	<channel>

views/video.latte

@@ -1,22 +1,24 @@
 {layout "../layouts/{$layout}.latte"}
 
 {block content}
-	<div class="columns is-centered is-vcentered is-gapless">
-		<div class="column is-three-quarters">
-			<video controls autoplay playsinline poster="{path('/stream?url=' . urlencode($item->video->originCover))}">
-				<source src="{path('/stream?url=' . urlencode($item->video->playAddr))}" type="video/mp4" />
+	<div class="columns has-text-centered is-centered is-vcentered is-gapless">
+		<div class="column">
+			<video controls autoplay poster="{url_stream($item->video->originCover)}">
+				<source src="{url_stream($item->video->playAddr)}" type="video/mp4" />
 			</video>
 		</div>
-		<div class="column has-text-centered">
+		<div class="column">
 			<div class="box">
-				<p class="title">Video by <a href="{path('/@'.$detail->uniqueId)}">{$detail->uniqueId}</a></p>
+				<p class="title">Video by <a href="{url_user($detail->uniqueId)}">{$detail->uniqueId}</a></p>
 				<p class="subtitle">{$item->desc}</p>
 				{include '../components/themes/common/stats.latte', playCount: $item->stats->playCount, diggCount: $item->stats->diggCount, commentCount: $item->stats->commentCount, shareCount: $item->stats->shareCount}
+				<div class="container mt-4">
+					<p>{include '../components/icon.latte', icon: 'music', text: $item->music->title}</p>
+      		<audio src="{url_stream($item->music->playUrl)}" controls preload="none"></audio>
+				</div>
 				<hr />
 				{include '../components/themes/common/share.latte', uniqueId: $detail->uniqueId, id: $item->id}
 				{include '../components/themes/common/download.latte', playAddr: $item->video->playAddr, id: $item->id, uniqueId: $detail->uniqueId}
-      	<p>{$item->music->title}</p>
-      	<audio src="{path('/stream?url=' . urlencode($item->music->playUrl))}" controls preload="none"></audio>
 			</div>
 		</div>
 	</div>