Mobile-friendly

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,6 +49,24 @@ 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.
      */

composer.json

@@ -1,7 +1,7 @@
 {
     "name": "pablouser1/proxitok",
     "description": "An alternative frontend for TikTok",
-    "version": "2.4.3.6",
+    "version": "2.4.4.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": "70740f443fa52ad70a8ceb507c30e801",
+    "content-hash": "f9cec7d0ed07b8f1d6db885ceefd3226",
     "packages": [
         {
             "name": "bramus/router",

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

@@ -53,7 +53,8 @@ $router->get('/manifest', function () {
 
 $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');

templates/components/themes/common/download.latte

@@ -1,13 +1,22 @@
-<div class="dropdown is-hoverable">
+{embed '../../form.latte', path: '/redirect/download', method: 'GET'}
-	<div class="dropdown-trigger">
+	{block fields}
-		<button class="button is-success" aria-haspopup="true" aria-controls="dropdown-menu">
+		<div class="field has-addons has-addons-centered">
+			<div class="control">
+				<div class="select">
+					<select name="watermark">
+						<option value="yes">WM</option>
+						<option value="no">No WM</option>
+					</select>
+				</div>
+			</div>
+			<div class="control">
+				<button type="submit" class="button is-success">
 					{include '../../icon.latte', icon: 'software-download', text: 'Download'}
-		</button>
+				</a>
-	</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>
+		<input type="hidden" name="playAddr" value="{$playAddr}" />
+		<input type="hidden" name="videoId" value="{$id}" />
+		<input type="hidden" name="authorUsername" value="{$uniqueId}" />
+	{/block}
+{/embed}

templates/components/themes/common/share.latte

@@ -1,17 +1,14 @@
-<div class="dropdown is-hoverable">
+<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
-	<div class="dropdown-trigger">
+  <ul>
-		<button class="button is-primary" aria-haspopup="true" aria-controls="dropdown-menu">
+    <li>
-			{include '../../icon.latte', icon: 'share', text: 'Share'}
+			<a class="has-text-success" href="{url_video_internal($uniqueId, $id)}">
-		</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">
+		</li>
+    <li>
+			<a class="has-text-warning" href="{url_video_external($uniqueId, $id)}">
 				{include '../../icon.latte', icon: 'lock-unlock', text: 'Original Link'}
 			</a>
-		</div>
+		</li>
-	</div>
+  </ul>
-</div>
+</nav>

templates/components/themes/default.latte

@@ -25,8 +25,8 @@
 				</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}
+				<div class="mt-2">{include './common/share.latte', uniqueId: $item->author->uniqueId, id: $item->id}</div>
 			</div>
   	</div>
 	</article>

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">