WIP embed.js support and robots.txt

This commit is contained in:
Pablo Ferreiro 2022-04-10 12:10:48 +02:00
parent 5368c08039
commit d0d36c26f3
No known key found for this signature in database
GPG key ID: 41FBCE65B779FA24
15 changed files with 108 additions and 44 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

40
composer.lock generated
View file

@ -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",
"reference": "a815687bfadaf3af51ae99f92edb4ea310c43426",
"url": "https://api.github.com/repos/nette/latte/zipball/21316b42fb0a4e43df01f73c55d52bd531823fda",
"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",
"reference": "8aa4524d3f11c4087dcae565a874b9440b1468c7",
"url": "https://api.github.com/repos/pablouser1/TikScraperPHP/zipball/412bbbe5415e13207fe24b8e8274c527c82f01d6",
"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",
"reference": "1ccceccc6497e96f4f646218f04b97ae7d9fa7a1",
"url": "https://api.github.com/repos/symfony/process/zipball/e13f6757e267d687e20ec5b26ccfcbbe511cd8f4",
"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"
}

15
embed.js Normal file
View file

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

View file

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

10
layouts/embed.latte Normal file
View file

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

View file

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

3
robots.txt Normal file
View file

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

View file

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

View file

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

View file

@ -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">
<div class="column">
<video width="{$item->video->width}" height="{$item->video->height}" controls poster="{path('/stream?url=' . urlencode($item->video->originCover))}">
<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" />
</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/download.latte', playAddr: $item->video->playAddr, id: $item->id, uniqueId: $feed->info->detail->uniqueId}
{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>