TWS/proxitok
8
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Layout system

Browse source
This commit is contained in:
Pablo Ferreiro 2022-01-25 14:08:31 +01:00
parent ba719e45b2
commit dde4185ad7
No known key found for this signature in database
GPG key ID: 41FBCE65B779FA24
22 changed files with 228 additions and 274 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
views/components/feed.latte → components/feed.latte
View file

0
views/components/following_tags.latte → components/following_tags.latte
View file

0
views/components/footer.latte → components/footer.latte
View file

0
views/components/head.latte → components/head.latte
View file

0
views/components/navbar.latte → components/navbar.latte
View file

0
views/components/settings/following.latte → components/settings/following.latte
View file

0
views/components/settings/proxy.latte → components/settings/proxy.latte
View file

21
layouts/default.latte Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
{include '../components/head.latte'}
<body>
{include '../components/navbar.latte'}
<section class="hero is-primary">
<div class="hero-body">
<div class="container has-text-centered">
{block header}{/block}
</div>
</div>
</section>
<section class="section">
{block content}{/block}
</section>
{include '../components/footer.latte'}
</body>
{block extra}{/block}
</html>

23
layouts/hero.latte Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
{include '../components/head.latte'}
<body>
<section class="hero is-fullheight">
<div class="hero-head">
{include '../components/navbar.latte'}
</div>
<div class="hero-body">
<div class="container has-text-centered">
{block content}{/block}
</div>
</div>
<div class="hero-foot">
{include '../components/footer.latte'}
</div>
</section>
{block extra}{/block}
</body>
</html>

6
routes/following.php
View file

@ -28,5 +28,9 @@ Route::add('/following', function () {
'hasMore' => false 'hasMore' => false
]; ];
$latte = Misc::latte(); $latte = Misc::latte();
$latte->render(Misc::getView('following'), ['following' => $following, 'feed' => $feed]); $latte->render(Misc::getView('following'), [
'following' => $following,
'feed' => $feed,
'title' => 'Following'
]);
}); });

29
routes/index.php
View file

@ -8,12 +8,12 @@ use Helpers\Error;
Route::add('/', function () { Route::add('/', function () {
$latte = Misc::latte(); $latte = Misc::latte();
$latte->render(Misc::getView('home')); $latte->render(Misc::getView('home'), ['title' => 'Home']);
}); });
Route::add('/about', function () { Route::add('/about', function () {
$latte = Misc::latte(); $latte = Misc::latte();
$latte->render(Misc::getView('about')); $latte->render(Misc::getView('about'), ['title' => 'About']);
}); });
Route::add("/trending", function () { Route::add("/trending", function () {
@ -25,7 +25,10 @@ Route::add("/trending", function () {
$feed = $api->getTrendingFeed($cursor); $feed = $api->getTrendingFeed($cursor);
if ($feed->meta->success) { if ($feed->meta->success) {
$latte = Misc::latte(); $latte = Misc::latte();
$latte->render(Misc::getView('trending'), ['feed' => $feed]); $latte->render(Misc::getView('trending'), [
'feed' => $feed,
'title' => 'Trending'
]);
} else { } else {
Error::show($feed->meta); Error::show($feed->meta);
} }
@ -44,7 +47,10 @@ Route::add("/@([^/]+)", function (string $username) {
return 'Private account detected! Not supported'; return 'Private account detected! Not supported';
} }
$latte = Misc::latte(); $latte = Misc::latte();
$latte->render(Misc::getView('user'), ['feed' => $feed]); $latte->render(Misc::getView('user'), [
'feed' => $feed,
'title' => $feed->info->detail->user->nickname
]);
} else { } else {
Error::show($feed->meta); Error::show($feed->meta);
} }
@ -55,7 +61,10 @@ Route::add('/video/([^/]+)', function (string $video_id) {
$item = $api->getVideoByID($video_id); $item = $api->getVideoByID($video_id);
if ($item->meta->success) { if ($item->meta->success) {
$latte = Misc::latte(); $latte = Misc::latte();
$latte->render(Misc::getView('video'), ['item' => $item]); $latte->render(Misc::getView('video'), [
'item' => $item,
'title' => $item->info->detail->user->nickname
]);
} else { } else {
Error::show($item->meta); Error::show($item->meta);
} }
@ -71,7 +80,10 @@ Route::add('/music/([^/]+)', function (string $music_id) {
$feed = $api->getMusicFeed($music_id, $cursor); $feed = $api->getMusicFeed($music_id, $cursor);
if ($feed->meta->success) { if ($feed->meta->success) {
$latte = Misc::latte(); $latte = Misc::latte();
$latte->render(Misc::getView('music'), ['feed' => $feed]); $latte->render(Misc::getView('music'), [
'feed' => $feed,
'title' => 'Music'
]);
} else { } else {
Error::show($feed->meta); Error::show($feed->meta);
} }
@ -86,7 +98,10 @@ Route::add('/tag/(\w+)', function (string $name) {
$feed = $api->getChallengeFeed($name, $cursor); $feed = $api->getChallengeFeed($name, $cursor);
if ($feed->meta->success) { if ($feed->meta->success) {
$latte = Misc::latte(); $latte = Misc::latte();
$latte->render(Misc::getView('tag'), ['feed' => $feed]); $latte->render(Misc::getView('tag'), [
'feed' => $feed,
'title' => 'Tag'
]);
} else { } else {
Error::show($feed->meta); Error::show($feed->meta);
} }

6
routes/settings.php
View file

@ -7,7 +7,11 @@ use Steampixel\Route;
Route::add("/settings", function () { Route::add("/settings", function () {
$latte = Misc::latte(); $latte = Misc::latte();
$latte->render(Misc::getView('settings'), ["proxy_elements" => Settings::PROXY, "following" => Following::get()]); $latte->render(Misc::getView('settings'), [
"proxy_elements" => Settings::PROXY,
"following" => Following::get(),
"title" => "Settings"
]);
}); });
Route::add("/settings/proxy", function () { Route::add("/settings/proxy", function () {

25
views/about.latte
View file

@ -1,20 +1,9 @@
<!DOCTYPE html> {layout '../layouts/default.latte'}
<html lang="en">
{include 'components/head.latte', title: 'About'} {block header}
<p class="title">About</p>
{/block}
<body> {block content}
{include 'components/navbar.latte'} <p>TODO</p>
<section class="hero is-primary"> {/block}
<div class="hero-body">
<div class="container">
<p class="title">About</p>
</div>
</div>
</section>
<section class="section">
<p>TODO</p>
</section>
{include 'components/footer.latte'}
</body>
</html>

32
views/error.latte
View file

@ -1,25 +1,9 @@
<!DOCTYPE html> {layout '../layouts/hero.latte'}
<html lang="en">
{include 'components/head.latte', title: 'ERROR'} {block content}
<p class="title">There was an error processing your request!</p>
<body> <p class="subtitle">HTTP Code: {$error->http_code}</p>
<section class="hero is-danger is-fullheight"> {if $error->tiktok_code}
<div class="hero-head"> <p class="subtitle">API error code {$error->tiktok_code} ({$error->tiktok_msg})</p>
{include 'components/navbar.latte'} {/if}
</div> {/block}
<div class="hero-body">
<div class="container">
<p class="title">There was an error processing your request!</p>
<p class="subtitle">HTTP Code: {$error->http_code}</p>
{if $error->tiktok_code}
<p class="subtitle">API error code {$error->tiktok_code} ({$error->tiktok_msg})</p>
{/if}
</div>
</div>
<div class="hero-foot is-danger">
{include 'components/footer.latte'}
</div>
</section>
</body>
</html>

31
views/following.latte
View file

@ -1,24 +1,13 @@
<!DOCTYPE html> {layout '../layouts/default.latte'}
<html lang="en">
{include 'components/head.latte', title: 'Following'} {block header}
<p class="title">Following</p>
{/block}
<body> {block content}
{include 'components/navbar.latte'} <p class="title">Following:</p>
<section class="hero is-primary"> {include '../components/following_tags.latte'}
<div class="hero-body"> <p>You can add/remove follows on settings</p>
<div class="container has-text-centered">
<p class="title">Following</p>
</div>
</div>
</section>
<section class="section">
<p class="title">Following:</p>
{include 'components/following_tags.latte'}
<p>You can add/remove follows on settings</p>
</section>
<hr /> <hr />
{include 'components/feed.latte'} {include '../components/feed.latte'}
{include 'components/footer.latte'} {/block}
</body>
</html>

128
views/home.latte
View file

@ -1,74 +1,60 @@
<!DOCTYPE html> {layout '../layouts/hero.latte'}
<html lang="en">
{include 'components/head.latte', title: 'Home'} {block content}
<p class="title">Welcome to ProxiTok!</p>
<p class="subtitle">An alternative open source frontend for TikTok</p>
<p>Search user:</p>
<form id="username_form">
<div class="field has-addons has-addons-centered">
<div class="control">
<input name="username" class="input" type="text" placeholder="Type username" required />
</div>
<div class="control">
<button class="button is-success" type="submit">Go</button>
</div>
</div>
</form>
<hr />
<p>Search video by id:</p>
<form id="video_form">
<div class="field has-addons has-addons-centered">
<div class="control">
<input name="video_id" class="input" type="text" placeholder="Type video ID" required />
</div>
<div class="control">
<button class="button is-success" type="submit">Go</button>
</div>
</div>
</form>
<hr />
<p>Search tag:</p>
<form id="tag_form">
<div class="field has-addons has-addons-centered">
<div class="control">
<input name="tag" class="input" type="text" placeholder="Type tag" required />
</div>
<div class="control">
<button class="button is-success" type="submit">Go</button>
</div>
</div>
</form>
<hr />
<p>Search music videos by id:</p>
<form id="music_form">
<div class="field has-addons has-addons-centered">
<div class="control">
<input name="music_id" class="input" type="text" placeholder="Type music id" required />
</div>
<div class="control">
<button class="button is-success" type="submit">Go</button>
</div>
</div>
</form>
<hr />
<p>Trending:</p>
<a class="button is-success" href="./trending">Go</a>
{/block}
<body> {block extra}
<section class="hero is-fullheight">
<div class="hero-head">
{include 'components/navbar.latte'}
</div>
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">Welcome to ProxiTok!</p>
<p class="subtitle">An alternative open source frontend for TikTok</p>
<p>Search user:</p>
<form id="username_form">
<div class="field has-addons has-addons-centered">
<div class="control">
<input name="username" class="input" type="text" placeholder="Type username" required />
</div>
<div class="control">
<button class="button is-success" type="submit">Go</button>
</div>
</div>
</form>
<hr />
<p>Search video by id:</p>
<form id="video_form">
<div class="field has-addons has-addons-centered">
<div class="control">
<input name="video_id" class="input" type="text" placeholder="Type video ID" required />
</div>
<div class="control">
<button class="button is-success" type="submit">Go</button>
</div>
</div>
</form>
<hr />
<p>Search tag:</p>
<form id="tag_form">
<div class="field has-addons has-addons-centered">
<div class="control">
<input name="tag" class="input" type="text" placeholder="Type tag" required />
</div>
<div class="control">
<button class="button is-success" type="submit">Go</button>
</div>
</div>
</form>
<hr />
<p>Search music videos by id:</p>
<form id="music_form">
<div class="field has-addons has-addons-centered">
<div class="control">
<input name="music_id" class="input" type="text" placeholder="Type music id" required />
</div>
<div class="control">
<button class="button is-success" type="submit">Go</button>
</div>
</div>
</form>
<hr />
<p>Trending:</p>
<a class="button is-success" href="./trending">Go</a>
</div>
</div>
<div class="hero-foot">
{include 'components/footer.latte'}
</div>
</section>
<script src="{assets('home.js', 'scripts')}"></script> <script src="{assets('home.js', 'scripts')}"></script>
</body> {/block}
</html>

27
views/music.latte
View file

@ -1,20 +1,11 @@
<!DOCTYPE html> {layout '../layouts/default.latte'}
<html lang="en">
{include 'components/head.latte', title: 'Music'} {block header}
<p class="title">{$feed->info->detail->music->title}</p>
<p class="subtitle">{$feed->info->detail->music->desc}</p>
<p>Videos: {number($feed->info->detail->stats->videoCount)}</p>
{/block}
<body> {block content}
{include 'components/navbar.latte'} {include '../components/feed.latte'}
<section class="hero is-primary"> {/block}
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">{$feed->info->detail->music->title}</p>
<p class="subtitle">{$feed->info->detail->music->desc}</p>
<p>Videos: {number($feed->info->detail->stats->videoCount)}</p>
</div>
</div>
</section>
{include 'components/feed.latte'}
{include 'components/footer.latte'}
</body>
</html>

37
views/settings.latte
View file

@ -1,26 +1,15 @@
<!DOCTYPE html> {layout '../layouts/default.latte'}
<html lang="en">
{include 'components/head.latte', title: 'Settings'} {block header}
<p class="title">Settings</p>
{/block}
<body> {block content}
{include 'components/navbar.latte'} <!-- Proxy settings -->
<section class="hero is-primary"> <p class="title">Proxy</p>
<div class="hero-body"> {include '../components/settings/proxy.latte'}
<div class="container"> <hr />
<p class="title">Settings</p> <!-- Following -->
</div> <p class="title">Following</p>
</div> {include '../components/settings/following.latte'}
</section> {/block}
<section class="section">
<!-- Proxy settings -->
<p class="title">Proxy</p>
{include 'components/settings/proxy.latte'}
<hr />
<!-- Following -->
<p class="title">Following</p>
{include 'components/settings/following.latte'}
</section>
{include 'components/footer.latte'}
</body>
</html>

27
views/tag.latte
View file

@ -1,20 +1,11 @@
<!DOCTYPE html> {layout '../layouts/default.latte'}
<html lang="en">
{include 'components/head.latte', title: 'Tag'} {block header}
<p class="title">{$feed->info->detail->challenge->title}</p>
<p class="subtitle">{$feed->info->detail->challenge->desc}</p>
<p>Videos: {number($feed->info->detail->stats->videoCount)} / Views: {number($feed->info->detail->stats->viewCount)}</p>
{/block}
<body> {block content}
{include 'components/navbar.latte'} {include '../components/feed.latte'}
<section class="hero is-primary"> {/block}
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">{$feed->info->detail->challenge->title}</p>
<p class="subtitle">{$feed->info->detail->challenge->desc}</p>
<p>Videos: {number($feed->info->detail->stats->videoCount)} / Views: {number($feed->info->detail->stats->viewCount)}</p>
</div>
</div>
</section>
{include 'components/feed.latte'}
{include 'components/footer.latte'}
</body>
</html>

23
views/trending.latte
View file

@ -1,18 +1,9 @@
<!DOCTYPE html> {layout '../layouts/default.latte'}
<html lang="en">
{include 'components/head.latte', title: 'Trending'} {block header}
<p class="title">Trending</p>
{/block}
<body> {block content}
{include 'components/navbar.latte'} {include '../components/feed.latte'}
<section class="hero is-primary"> {/block}
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">Trending</p>
</div>
</div>
</section>
{include 'components/feed.latte'}
{include 'components/footer.latte'}
</body>
</html>

35
views/user.latte
View file

@ -1,24 +1,15 @@
<!DOCTYPE html> {layout '../layouts/default.latte'}
<html lang="en">
{include 'components/head.latte', title: $feed->info->detail->user->nickname} {block header}
<figure class="figure is-96x96">
<img src="{path('stream?url=' . urlencode($feed->info->detail->user->avatarThumb))}" />
</figure>
<p class="title">{$feed->info->detail->user->uniqueId}'s profile</p>
<p class="subtitle">{$feed->info->detail->user->signature}</p>
<p>Following: {number($feed->info->detail->stats->followingCount)} / Followers: {number($feed->info->detail->stats->followerCount)}</p>
<p>Hearts: {number($feed->info->detail->stats->heartCount)} / Videos: {$feed->info->detail->stats->videoCount}</p>
{/block}
<body> {block content}
{include 'components/navbar.latte'} {include '../components/feed.latte'}
<section class="hero is-primary"> {/block}
<div class="hero-body">
<div class="container has-text-centered">
<figure class="figure is-96x96">
<img src="{path('stream?url=' . urlencode($feed->info->detail->user->avatarThumb))}" />
</figure>
<p class="title">{$feed->info->detail->user->uniqueId}'s profile</p>
<p class="subtitle">{$feed->info->detail->user->signature}</p>
<p>Following: {number($feed->info->detail->stats->followingCount)} / Followers: {number($feed->info->detail->stats->followerCount)}</p>
<p>Hearts: {number($feed->info->detail->stats->heartCount)} / Videos: {$feed->info->detail->stats->videoCount}</p>
</div>
</div>
</section>
{include 'components/feed.latte'}
{include 'components/footer.latte'}
</body>
</html>

52
views/video.latte
View file

@ -1,35 +1,21 @@
<!DOCTYPE html> {layout '../layouts/hero.latte'}
<html lang="en">
{include 'components/head.latte', title: $item->info->detail->user->nickname} {block content}
<div class="columns is-centered is-vcentered">
<body> <div class="column">
<section class="hero is-fullheight"> <video autoplay controls src="{path('stream?url=' . urlencode($item->items[0]->video->playAddr))}"></video>
<div class="hero-head"> </div>
{include 'components/navbar.latte'} <div class="column has-text-centered">
<div class="box">
<p class="title">Video by <a href="{path('@'.$item->info->detail->user->uniqueId)}">{$item->info->detail->user->uniqueId}</a></p>
<p class="subtitle">{$item->items[0]->desc}</p>
<p>Played {number($item->info->detail->stats->playCount)} times</p>
<p>Shared {number($item->info->detail->stats->shareCount)} times / {number($item->info->detail->stats->commentCount)} comments</p>
<hr />
<a href="{path('stream?url=' . urlencode($item->items[0]->video->playAddr) . '&download=1')}" class="button is-info">Download video</a>
<p>{$item->items[0]->music->title}</p>
<audio src="{path('stream?url=' . urlencode($item->items[0]->music->playUrl))}" controls preload="none"></audio>
</div> </div>
<div class="hero-body"> </div>
<div class="columns"> </div>
<div class="column has-text-centered"> {/block}
<video autoplay controls src="{path('stream?url=' . urlencode($item->items[0]->video->playAddr))}"></video>
</div>
<div class="column is-one-quarter">
<div class="box container">
<p class="title">Video by <a href="{path('@'.$item->info->detail->user->uniqueId)}">{$item->info->detail->user->uniqueId}</a></p>
<p class="subtitle">{$item->items[0]->desc}</p>
<p>Played {number($item->info->detail->stats->playCount)} times</p>
<p>Shared {number($item->info->detail->stats->shareCount)} times / {number($item->info->detail->stats->commentCount)} comments</p>
<hr />
<a href="{path('stream?url=' . urlencode($item->items[0]->video->playAddr) . '&download=1')}" class="button is-info">Download video</a>
<p>{$item->items[0]->music->title}</p>
<audio src="{path('stream?url=' . urlencode($item->items[0]->music->playUrl))}" controls preload="none"></audio>
</div>
</div>
</div>
</div>
<div class="hero-foot">
{include 'components/footer.latte'}
</div>
</section>
</body>
</html>