WIP embed.js support and robots.txt

README.md

@@ -34,7 +34,7 @@ Apply to: Main window (address bar)
 
 ## TODO / Known issues
 * Make video on /video fit screen and don't overflow
-* Search
+* Fix embed styling
 
 ## 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/Controllers/EmbedController.php

@@ -0,0 +1,20 @@
+<?php
+namespace App\Controllers;
+
+use App\Helpers\ErrorHandler;
+use App\Helpers\Misc;
+use App\Helpers\Wrappers;
+use App\Models\VideoTemplate;
+
+class EmbedController {
+    static public function v2(int $id) {
+        $api = Wrappers::api();
+        $feed = $api->getVideoByID($id);
+        if ($feed->meta->success) {
+            $latte = Wrappers::latte();
+            $latte->render(Misc::getView('video'), new VideoTemplate($feed->items[0], $feed->info->detail, true));
+        } else {
+            ErrorHandler::show($feed->meta);
+        }
+    }
+}

app/Controllers/UserController.php

@@ -6,6 +6,7 @@ use App\Helpers\Misc;
 use App\Helpers\Wrappers;
 use App\Models\FeedTemplate;
 use App\Models\RSSTemplate;
+use App\Models\VideoTemplate;
 
 class UserController {
     static public function get(string $username) {
@@ -30,7 +31,7 @@ class UserController {
         $feed = $api->getVideoByID($video_id);
         if ($feed->meta->success) {
             $latte = Wrappers::latte();
-            $latte->render(Misc::getView('video'), new FeedTemplate('Video', $feed));
+            $latte->render(Misc::getView('video'), new VideoTemplate($feed->items[0], $feed->info->detail));
         } else {
             ErrorHandler::show($feed->meta);
         }

app/Models/VideoTemplate.php

@@ -0,0 +1,22 @@
+<?php
+namespace App\Models;
+
+/**
+* Base for templates with a feed
+*/
+class VideoTemplate extends BaseTemplate {
+    public object $item;
+    public object $detail;
+    public string $layout = 'hero';
+
+    function __construct(object $item, object $detail, bool $isEmbed = false) {
+        parent::__construct('Video');
+        $this->item = $item;
+        $this->detail = $detail;
+        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>

composer.json

@@ -1,7 +1,7 @@
 {
     "name": "pablouser1/proxitok",
     "description": "An alternative frontend for TikTok",
-    "version": "2.2.0.0",
+    "version": "2.2.1.0",
     "license": "AGPL-3.0-or-later",
     "type": "project",
     "homepage": "https://github.com/pablouser1/ProxiTok",

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": "def7d3d4bbdae6916d99e50b33b3595a",
+    "content-hash": "417e49088860de4bd40099b5cef1e215",
     "packages": [
         {
             "name": "bramus/router",
@@ -121,16 +121,16 @@
         },
         {
             "name": "latte/latte",
-            "version": "v2.11.0",
+            "version": "v2.11.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/nette/latte.git",
-                "reference": "a815687bfadaf3af51ae99f92edb4ea310c43426"
+                "reference": "21316b42fb0a4e43df01f73c55d52bd531823fda"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/nette/latte/zipball/a815687bfadaf3af51ae99f92edb4ea310c43426",
+                "url": "https://api.github.com/repos/nette/latte/zipball/21316b42fb0a4e43df01f73c55d52bd531823fda",
-                "reference": "a815687bfadaf3af51ae99f92edb4ea310c43426",
+                "reference": "21316b42fb0a4e43df01f73c55d52bd531823fda",
                 "shasum": ""
             },
             "require": {
@@ -199,22 +199,22 @@
             ],
             "support": {
                 "issues": "https://github.com/nette/latte/issues",
-                "source": "https://github.com/nette/latte/tree/v2.11.0"
+                "source": "https://github.com/nette/latte/tree/v2.11.1"
             },
-            "time": "2022-02-22T18:39:58+00:00"
+            "time": "2022-04-07T13:21:53+00:00"
         },
         {
             "name": "pablouser1/tikscraper",
-            "version": "v1.3.2.0",
+            "version": "v1.3.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/pablouser1/TikScraperPHP.git",
-                "reference": "8aa4524d3f11c4087dcae565a874b9440b1468c7"
+                "reference": "412bbbe5415e13207fe24b8e8274c527c82f01d6"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/pablouser1/TikScraperPHP/zipball/8aa4524d3f11c4087dcae565a874b9440b1468c7",
+                "url": "https://api.github.com/repos/pablouser1/TikScraperPHP/zipball/412bbbe5415e13207fe24b8e8274c527c82f01d6",
-                "reference": "8aa4524d3f11c4087dcae565a874b9440b1468c7",
+                "reference": "412bbbe5415e13207fe24b8e8274c527c82f01d6",
                 "shasum": ""
             },
             "require": {
@@ -240,9 +240,9 @@
             "description": "Get data from TikTok API",
             "support": {
                 "issues": "https://github.com/pablouser1/TikScraperPHP/issues",
-                "source": "https://github.com/pablouser1/TikScraperPHP/tree/v1.3.2.0"
+                "source": "https://github.com/pablouser1/TikScraperPHP/tree/v1.3.3.0"
             },
-            "time": "2022-03-29T17:10:36+00:00"
+            "time": "2022-04-10T10:08:40+00:00"
         },
         {
             "name": "php-webdriver/webdriver",
@@ -660,16 +660,16 @@
         },
         {
             "name": "symfony/process",
-            "version": "v6.0.5",
+            "version": "v6.0.7",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/process.git",
-                "reference": "1ccceccc6497e96f4f646218f04b97ae7d9fa7a1"
+                "reference": "e13f6757e267d687e20ec5b26ccfcbbe511cd8f4"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/process/zipball/1ccceccc6497e96f4f646218f04b97ae7d9fa7a1",
+                "url": "https://api.github.com/repos/symfony/process/zipball/e13f6757e267d687e20ec5b26ccfcbbe511cd8f4",
-                "reference": "1ccceccc6497e96f4f646218f04b97ae7d9fa7a1",
+                "reference": "e13f6757e267d687e20ec5b26ccfcbbe511cd8f4",
                 "shasum": ""
             },
             "require": {
@@ -701,7 +701,7 @@
             "description": "Executes commands in sub-processes",
             "homepage": "https://symfony.com",
             "support": {
-                "source": "https://github.com/symfony/process/tree/v6.0.5"
+                "source": "https://github.com/symfony/process/tree/v6.0.7"
             },
             "funding": [
                 {
@@ -717,7 +717,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2022-01-30T18:19:12+00:00"
+            "time": "2022-03-18T16:21:55+00:00"
         },
         {
             "name": "vlucas/phpdotenv",
@@ -811,5 +811,5 @@
         "ext-mbstring": "*"
     },
     "platform-dev": [],
-    "plugin-api-version": "2.2.0"
+    "plugin-api-version": "2.3.0"
 }

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)
+  }
+}

layouts/default.latte

@@ -15,7 +15,6 @@
   <section class="section">
 		{block content}{/block}
   </section>
-  {include '../components/footer.latte'}
 	{block extra}{/block}
 </body>
 </html>

layouts/embed.latte

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+
+{include '../components/head.latte'}
+
+<body>
+	{block content}{/block}
+	{block extra}{/block}
+</body>
+</html>

layouts/hero.latte

@@ -12,9 +12,6 @@
 			<div class="container has-text-centered">
 				{block content}{/block}
 			</div>
-    </div>
-    <div class="hero-foot">
-			{include '../components/footer.latte'}
     </div>
 	</section>
 	{block extra}{/block}

robots.txt

@@ -0,0 +1,3 @@
+User-agent: *
+Allow: /$
+Disallow: /

routes.php

@@ -54,3 +54,6 @@ $router->mount('/settings', function () use ($router) {
 });
 
 $router->get('/discover', 'DiscoverController@get');
+
+// -- EMBED -- //
+$router->get('/embed/v2/(\d+)', 'EmbedController@v2');

views/about.latte

@@ -2,11 +2,14 @@
 
 {block header}
 	<p class="title">Welcome to Proxitok!</p>
-	<p class="subtitle">An alternative frontend for TikTok</p>
+	<p class="subtitle">
+    Made with <span style="color: #e25555;">&#9829;</span> in <a href="https://github.com/pablouser1/ProxiTok">Github</a>
+	</p>
 {/block}
 
 {block content}
 	<p class="title">About this instance</p>
+	<p>Version: {version()}</p>
 	<p>Forcing Legacy mode: {isset($_ENV['API_FORCE_LEGACY']) ? 'yes' : 'no'}</p>
 	<hr />
 	<p class="title">Why would I want to use ProxiTok?</p>

views/video.latte

@@ -1,21 +1,20 @@
-{layout '../layouts/hero.latte'}
+{layout "../layouts/{$layout}.latte"}
 
 {block content}
-	{do $item = $feed->items[0]}
+	<div class="columns is-centered is-vcentered is-gapless">
-	<div class="columns is-centered is-vcentered">
+		<div class="column is-three-quarters">
-		<div class="column">
+			<video controls autoplay playsinline poster="{path('/stream?url=' . urlencode($item->video->originCover))}">
-			<video width="{$item->video->width}" height="{$item->video->height}" controls poster="{path('/stream?url=' . urlencode($item->video->originCover))}">
 				<source src="{path('/stream?url=' . urlencode($item->video->playAddr))}" type="video/mp4" />
 			</video>
 		</div>
 		<div class="column has-text-centered">
 			<div class="box">
-				<p class="title">Video by <a href="{path('/@'.$feed->info->detail->uniqueId)}">{$feed->info->detail->uniqueId}</a></p>
+				<p class="title">Video by <a href="{path('/@'.$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}
 				<hr />
-				{include '../components/themes/common/share.latte', uniqueId: $feed->info->detail->uniqueId, id: $item->id}
+				{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: $feed->info->detail->uniqueId}
+				{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>