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

6
routes/settings.php
View file

@ -7,7 +7,11 @@ use Steampixel\Route;
Route::add("/settings", function () {
$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 () {

23
views/about.latte
View file

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

30
views/error.latte
View file

@ -1,25 +1,9 @@
<!DOCTYPE html>
<html lang="en">
{layout '../layouts/hero.latte'}
{include 'components/head.latte', title: 'ERROR'}
<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="subtitle">HTTP Code: {$error->http_code}</p>
{if $error->tiktok_code}
{block content}
<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>
{/if}
{/block}

27
views/following.latte
View file

@ -1,24 +1,13 @@
<!DOCTYPE html>
<html lang="en">
{layout '../layouts/default.latte'}
{include 'components/head.latte', title: 'Following'}
{block header}
<p class="title">Following</p>
{/block}
<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>
</div>
</div>
</section>
<section class="section">
{block content}
<p class="title">Following:</p>
{include 'components/following_tags.latte'}
{include '../components/following_tags.latte'}
<p>You can add/remove follows on settings</p>
</section>
<hr />
{include 'components/feed.latte'}
{include 'components/footer.latte'}
</body>
</html>
{include '../components/feed.latte'}
{/block}

66
views/home.latte
View file

@ -1,19 +1,10 @@
<!DOCTYPE html>
<html lang="en">
{layout '../layouts/hero.latte'}
{include 'components/head.latte', title: 'Home'}
<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="subtitle">An alternative open source frontend for TikTok</p>
<p>Search user:</p>
<form id="username_form">
{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 />
@ -22,10 +13,10 @@
<button class="button is-success" type="submit">Go</button>
</div>
</div>
</form>
<hr />
<p>Search video by id:</p>
<form id="video_form">
</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 />
@ -34,10 +25,10 @@
<button class="button is-success" type="submit">Go</button>
</div>
</div>
</form>
<hr />
<p>Search tag:</p>
<form id="tag_form">
</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 />
@ -46,10 +37,10 @@
<button class="button is-success" type="submit">Go</button>
</div>
</div>
</form>
<hr />
<p>Search music videos by id:</p>
<form id="music_form">
</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 />
@ -58,17 +49,12 @@
<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>
</body>
</form>
<hr />
<p>Trending:</p>
<a class="button is-success" href="./trending">Go</a>
{/block}
</html>
{block extra}
<script src="{assets('home.js', 'scripts')}"></script>
{/block}

27
views/music.latte
View file

@ -1,20 +1,11 @@
<!DOCTYPE html>
<html lang="en">
{layout '../layouts/default.latte'}
{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>
{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="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>
{block content}
{include '../components/feed.latte'}
{/block}

37
views/settings.latte
View file

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

27
views/tag.latte
View file

@ -1,20 +1,11 @@
<!DOCTYPE html>
<html lang="en">
{layout '../layouts/default.latte'}
{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>
{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="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>
{block content}
{include '../components/feed.latte'}
{/block}

23
views/trending.latte
View file

@ -1,18 +1,9 @@
<!DOCTYPE html>
<html lang="en">
{layout '../layouts/default.latte'}
{include 'components/head.latte', title: 'Trending'}
{block header}
<p class="title">Trending</p>
{/block}
<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>
</div>
</div>
</section>
{include 'components/feed.latte'}
{include 'components/footer.latte'}
</body>
</html>
{block content}
{include '../components/feed.latte'}
{/block}

35
views/user.latte
View file

@ -1,24 +1,15 @@
<!DOCTYPE html>
<html lang="en">
{layout '../layouts/default.latte'}
{include 'components/head.latte', title: $feed->info->detail->user->nickname}
<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">
{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>
</div>
</div>
</section>
{include 'components/feed.latte'}
{include 'components/footer.latte'}
</body>
</html>
</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}
{block content}
{include '../components/feed.latte'}
{/block}

30
views/video.latte
View file

@ -1,20 +1,12 @@
<!DOCTYPE html>
<html lang="en">
{layout '../layouts/hero.latte'}
{include 'components/head.latte', title: $item->info->detail->user->nickname}
<body>
<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">
{block content}
<div class="columns is-centered is-vcentered">
<div class="column">
<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">
<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>
@ -25,11 +17,5 @@
<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>
</div>
{/block}