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 () {

23
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}
<body>
{include 'components/navbar.latte'}
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<p class="title">About</p> <p class="title">About</p>
</div> {/block}
</div>
</section> {block content}
<section class="section">
<p>TODO</p> <p>TODO</p>
</section> {/block}
{include 'components/footer.latte'}
</body>
</html>

22
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}
<body>
<section class="hero is-danger is-fullheight">
<div class="hero-head">
{include 'components/navbar.latte'}
</div>
<div class="hero-body">
<div class="container">
<p class="title">There was an error processing your request!</p> <p class="title">There was an error processing your request!</p>
<p class="subtitle">HTTP Code: {$error->http_code}</p> <p class="subtitle">HTTP Code: {$error->http_code}</p>
{if $error->tiktok_code} {if $error->tiktok_code}
<p class="subtitle">API error code {$error->tiktok_code} ({$error->tiktok_msg})</p> <p class="subtitle">API error code {$error->tiktok_code} ({$error->tiktok_msg})</p>
{/if} {/if}
</div> {/block}
</div>
<div class="hero-foot is-danger">
{include 'components/footer.latte'}
</div>
</section>
</body>
</html>

27
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}
<body>
{include 'components/navbar.latte'}
<section class="hero is-primary">
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">Following</p> <p class="title">Following</p>
</div> {/block}
</div>
</section> {block content}
<section class="section">
<p class="title">Following:</p> <p class="title">Following:</p>
{include 'components/following_tags.latte'} {include '../components/following_tags.latte'}
<p>You can add/remove follows on settings</p> <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>

26
views/home.latte
View file

@ -1,15 +1,6 @@
<!DOCTYPE html> {layout '../layouts/hero.latte'}
<html lang="en">
{include 'components/head.latte', title: 'Home'} {block content}
<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">
<p class="title">Welcome to ProxiTok!</p> <p class="title">Welcome to ProxiTok!</p>
<p class="subtitle">An alternative open source frontend for TikTok</p> <p class="subtitle">An alternative open source frontend for TikTok</p>
<p>Search user:</p> <p>Search user:</p>
@ -62,13 +53,8 @@
<hr /> <hr />
<p>Trending:</p> <p>Trending:</p>
<a class="button is-success" href="./trending">Go</a> <a class="button is-success" href="./trending">Go</a>
</div> {/block}
</div>
<div class="hero-foot">
{include 'components/footer.latte'}
</div>
</section>
<script src="{assets('home.js', 'scripts')}"></script>
</body>
</html> {block extra}
<script src="{assets('home.js', 'scripts')}"></script>
{/block}

23
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}
<body>
{include 'components/navbar.latte'}
<section class="hero is-primary">
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">{$feed->info->detail->music->title}</p> <p class="title">{$feed->info->detail->music->title}</p>
<p class="subtitle">{$feed->info->detail->music->desc}</p> <p class="subtitle">{$feed->info->detail->music->desc}</p>
<p>Videos: {number($feed->info->detail->stats->videoCount)}</p> <p>Videos: {number($feed->info->detail->stats->videoCount)}</p>
</div> {/block}
</div>
</section> {block content}
{include 'components/feed.latte'} {include '../components/feed.latte'}
{include 'components/footer.latte'} {/block}
</body>
</html>

27
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}
<body>
{include 'components/navbar.latte'}
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<p class="title">Settings</p> <p class="title">Settings</p>
</div> {/block}
</div>
</section> {block content}
<section class="section">
<!-- Proxy settings --> <!-- Proxy settings -->
<p class="title">Proxy</p> <p class="title">Proxy</p>
{include 'components/settings/proxy.latte'} {include '../components/settings/proxy.latte'}
<hr /> <hr />
<!-- Following --> <!-- Following -->
<p class="title">Following</p> <p class="title">Following</p>
{include 'components/settings/following.latte'} {include '../components/settings/following.latte'}
</section> {/block}
{include 'components/footer.latte'}
</body>
</html>

23
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}
<body>
{include 'components/navbar.latte'}
<section class="hero is-primary">
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">{$feed->info->detail->challenge->title}</p> <p class="title">{$feed->info->detail->challenge->title}</p>
<p class="subtitle">{$feed->info->detail->challenge->desc}</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> <p>Videos: {number($feed->info->detail->stats->videoCount)} / Views: {number($feed->info->detail->stats->viewCount)}</p>
</div> {/block}
</div>
</section> {block content}
{include 'components/feed.latte'} {include '../components/feed.latte'}
{include 'components/footer.latte'} {/block}
</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}
<body>
{include 'components/navbar.latte'}
<section class="hero is-primary">
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">Trending</p> <p class="title">Trending</p>
</div> {/block}
</div>
</section> {block content}
{include 'components/feed.latte'} {include '../components/feed.latte'}
{include 'components/footer.latte'} {/block}
</body>
</html>

23
views/user.latte
View file

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

28
views/video.latte
View file

@ -1,20 +1,12 @@
<!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">
<div class="hero-head">
{include 'components/navbar.latte'}
</div>
<div class="hero-body">
<div class="columns">
<div class="column has-text-centered">
<video autoplay controls src="{path('stream?url=' . urlencode($item->items[0]->video->playAddr))}"></video> <video autoplay controls src="{path('stream?url=' . urlencode($item->items[0]->video->playAddr))}"></video>
</div> </div>
<div class="column is-one-quarter"> <div class="column has-text-centered">
<div class="box container"> <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="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 class="subtitle">{$item->items[0]->desc}</p>
<p>Played {number($item->info->detail->stats->playCount)} times</p> <p>Played {number($item->info->detail->stats->playCount)} times</p>
@ -26,10 +18,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> {/block}
<div class="hero-foot">
{include 'components/footer.latte'}
</div>
</section>
</body>
</html>