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

web manifest tweaks and .latte structure

Browse source
This commit is contained in:
Pablo Ferreiro 2022-11-04 18:02:57 +01:00
parent 4bfc4c9434
commit 1176bc35fe
No known key found for this signature in database
GPG key ID: 41FBCE65B779FA24
34 changed files with 3 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

11
templates/components/card.latte Normal file
View file

@ -0,0 +1,11 @@
<div class="card">
<header class="card-header" n:ifcontent>
<p class="card-header-title" n:ifcontent>{block title}{/block}</p>
</header>
<div class="card-content">
{block content}{/block}
</div>
<footer class="card-footer" n:ifcontent>
{block footer}{/block}
</footer>
</div>

1
templates/components/feed.latte Normal file
View file

@ -0,0 +1 @@
{include './themes/' . theme() . '.latte'}

10
templates/components/form.latte Normal file
View file

@ -0,0 +1,10 @@
<form action="{path($path)}" method="{$method}">
{block fields}{/block}
{ifset $submit}
<div class="field">
<div class="control">
<button class="button is-success" type="submit">Submit</button>
</div>
</div>
{/ifset}
</form>

19
templates/components/head.latte Normal file
View file

@ -0,0 +1,19 @@
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" sizes="180x180" href="{path('/apple-touch-icon.png')}">
<link rel="icon" type="image/png" sizes="32x32" href="{path('/favicon-32x32.png')}">
<link rel="icon" type="image/png" sizes="16x16" href="{path('/favicon-16x16.png')}">
<link rel="manifest" href="{path('/site.webmanifest')}">
<meta property="og:site_name" content="ProxiTok" />
<meta property="og:title" content="{$title}" />
<meta property="og:description" content="Alternative frontend for TikTok" />
<meta property="og:type" content="website" />
{if isset($has_rss)}
<link rel="alternate" type="application/rss+xml" title="{$title}" href="{$_SERVER['REQUEST_URI'] . '/rss'}" />
{/if}
<link rel="stylesheet" href="{path('/styles/vendor/cssgg.min.css')}">
<link rel="stylesheet" href="{path('/styles/vendor/bulma.min.css')}">
<title>{$title} - ProxiTok</title>
</head>

14
templates/components/icon.latte Normal file
View file

@ -0,0 +1,14 @@
{define icon_common, $icon}
<span class="icon">
<i class="gg-{$icon}"></i>
</span>
{/define}
{if isset($text)}
<span class="icon-text">
{include icon_common, icon: $icon}
<span>{$text}</span>
</span>
{else}
{include icon_common, icon: $icon}
{/if}

29
templates/components/navbar.latte Normal file
View file

@ -0,0 +1,29 @@
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a href="{path('/')}" class="navbar-item">
{include './icon.latte', icon: 'home', text: 'ProxiTok'}
</a>
<a role="button" id="navbar-burger" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbar-menu" class="navbar-menu">
<div class="navbar-start">
<a href="{path('/settings')}" class="navbar-item">
{include './icon.latte', icon: 'options', text: 'Settings'}
</a>
<a href="{path('/about')}" class="navbar-item">
{include './icon.latte', icon: 'info', text: 'About'}
</a>
</div>
<div class="navbar-end">
<a href="https://github.com/pablouser1/ProxiTok" class="navbar-item" target="_blank">
{include './icon.latte', icon: 'code-slash', text: 'Source'}
</a>
</div>
</div>
</nav>
<script src="{path('/scripts/navbar.js')}"></script>

3
templates/components/rss.latte Normal file
View file

@ -0,0 +1,3 @@
<a href="{$_SERVER['REQUEST_URI'] . '/rss'}">
{include './icon.latte', icon: 'feed', text: 'RSS Feed'}
</a>

31
templates/components/settings/api.latte Normal file
View file

@ -0,0 +1,31 @@
{embed '../form.latte', path: '/settings/api', method: 'POST', submit: true}
{block fields}
<div class="field">
<label class="label">Use test endpoints</label>
<div class="control">
<label class="radio">
<input type="radio" name="api-test_endpoints" value="yes" n:attr="checked => $isTestEndpoints" />
<span>Yes</span>
</label>
<label class="radio">
<input type="radio" name="api-test_endpoints" value="no" n:attr="checked => !$isTestEndpoints" />
<span>No</span>
</label>
</div>
<p class="help">This <i>may</i> help bypass rate limits</p>
</div>
<div class="field">
<label class="label">Downloader</label>
<div class="control">
<div class="select">
<select name="api-downloader">
{foreach $downloaders as $downloader}
<option value="{$downloader}" n:attr="selected => $currentDownloader === $downloader">{$downloader|firstUpper}</option>
{/foreach}
</select>
</div>
</div>
<p class="help">Watermark downloads will <i>not</i> use third party methods</p>
</div>
{/block}
{/embed}

16
templates/components/settings/general.latte Normal file
View file

@ -0,0 +1,16 @@
{embed '../form.latte', path: '/settings/general', method: 'POST', submit: true}
{block fields}
<div class="field">
<label class="label">Theme</label>
<div class="control">
<div class="select">
<select name="theme">
{foreach $themes as $theme}
<option value="{$theme}" n:attr="selected => $currentTheme === $theme">{$theme|firstUpper}</option>
{/foreach}
</select>
</div>
</div>
</div>
{/block}
{/embed}

18
templates/components/settings/misc.latte Normal file
View file

@ -0,0 +1,18 @@
{embed '../form.latte', path: '/settings/misc', method: 'POST', submit: true}
{block fields}
<div class="field">
<label class="label">Enable service worker</label>
<div class="control">
<label class="radio">
<input type="radio" name="misc-sw" value="yes" n:attr="checked => $isServiceWorker" />
<span>Yes</span>
</label>
<label class="radio">
<input type="radio" name="misc-sw" value="no" n:attr="checked => !$isServiceWorker" />
<span>No</span>
</label>
</div>
<p class="help">This can be used to install the PWA version of ProxiTok</p>
</div>
{/block}
{/embed}

70
templates/components/themes/card.latte Normal file
View file

@ -0,0 +1,70 @@
<link rel="stylesheet" href="{path('/styles/themes/card.css')}">
<noscript>JavaScript is required for this section to work!</noscript>
<section class="section">
<div class="columns is-multiline is-vcentered">
{foreach $data->feed->items as $item}
{do $share_url = url_video_external($item->author->uniqueId, $item->id)}
<div class="column is-one-quarter clickable-img" id="{$item->id}" onclick="openVideo(this.id)"
data-video_url="{url_stream($item->video->playAddr)}"
data-video_download_watermark="{url_download($item->video->playAddr, $item->author->uniqueId, $item->id, true)}"
data-video_download_nowatermark="{url_download(url_video_external($item->author->uniqueId, $item->id), $item->author->uniqueId, $item->id, false)}"
data-video_share_url="{$share_url}"
data-desc="{$item->desc}"
data-createtime="{$item->createTime}"
data-music_title="{$item->music->title}"
data-music_url="{url_stream($item->music->playUrl)}">
<img loading="lazy" src="{url_stream($item->video->originCover)}" />
<img class="hidden" loading="lazy" data-src="{url_stream($item->video->dynamicCover)}" />
</div>
{/foreach}
{if empty($data->feed->items)}
<p class="title">No items sent by TikTok!</p>
{/if}
</div>
{include './common/controls.latte'}
</section>
<!-- MODAL -->
<div id="modal" class="modal">
<div id="modal-background" class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<button id="modal-close" class="delete" aria-label="close"></button>
<p class="modal-card-title" id="item_title"></p>
</header>
<section class="modal-card-body has-text-centered" style="overflow: hidden;">
<video id="video" autoplay controls></video>
</section>
<footer class="modal-card-foot has-text-centered">
<div class="container">
<p id="item_date"></p>
<div class="field has-addons has-addons-centered">
<div class="control">
<input id="share_input" class="input" readonly />
</div>
<div class="control">
<button class="button is-primary" onclick="copyShare()">Copy</button>
</div>
</div>
<div id="download_dropdown" class="dropdown is-hoverable">
<div class="dropdown-trigger">
<button id="download_button" class="button" aria-haspopup="true" aria-controls="dropdown-menu">Download</button>
</div>
<div class="dropdown-menu" role="menu">
<div class="dropdown-content">
<a id="download_watermark" target="_blank" class="dropdown-item">With watermark</a>
<a id="download_nowatermark" target="_blank" class="dropdown-item">Without watermark</a>
</div>
</div>
</div>
<p id="audio_title"></p>
<audio id="audio" controls preload="none"></audio>
<div class="buttons is-centered">
<button id="back-button" class="button is-danger">Back</button>
<button id="next-button" class="button is-success">Next</button>
</div>
</div>
</footer>
</div>
</div>
<script src="{path('/scripts/themes/card.js')}"></script>

7
templates/components/themes/common/controls.latte Normal file
View file

@ -0,0 +1,7 @@
<div n:ifset="$data->info" class="buttons">
{* is_numeric is used to avoid having a back button with ttwid cursors *}
{if isset($_GET['cursor']) && is_numeric($_GET['cursor']) && $_GET['cursor'] != 0}
<a class="button is-danger" href="?cursor=0">First</a>
{/if}
<a n:attr="disabled => !$data->feed->hasMore" class="button is-success" href="?cursor={$data->feed->maxCursor}">Next</a>
</div>

13
templates/components/themes/common/download.latte Normal file
View file

@ -0,0 +1,13 @@
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
{include '../../icon.latte', icon: 'software-download', text: 'Download'}
</button>
</div>
<div class="dropdown-menu" role="menu">
<div class="dropdown-content">
<a target="_blank" href="{url_download($playAddr, $uniqueId, $id, true)}" class="dropdown-item">Watermark</a>
<a target="_blank" href="{url_download(url_video_external($uniqueId, $id), $uniqueId, $id, false)}" class="dropdown-item">No watermark</a>
</div>
</div>
</div>

5
templates/components/themes/common/share.latte Normal file
View file

@ -0,0 +1,5 @@
{do $endpoint = '/@' . $uniqueId . '/video/' . $id}
<div class="buttons is-centered">
<a class="button is-success is-small" href="{url_video_internal($uniqueId, $id)}">Instance Link</a>
<a class="button is-danger is-small" href="{url_video_external($uniqueId, $id)}">Original Link</a>
</div>

6
templates/components/themes/common/stats.latte Normal file
View file

@ -0,0 +1,6 @@
<p>
{include '../../icon.latte', icon: 'eye', text: number($playCount)}
{include '../../icon.latte', icon: 'heart', text: number($diggCount)}
{include '../../icon.latte', icon: 'comment', text: number($commentCount)}
{include '../../icon.latte', icon: 'share', text: number($shareCount)}
</p>

5
templates/components/themes/common/tags.latte Normal file
View file

@ -0,0 +1,5 @@
<div class="tags">
{foreach $challenges as $challenge}
<a class="tag is-rounded is-info" href="{path('/tag/' . $challenge->title)}">{$challenge->title}</a>
{/foreach}
</div>

38
templates/components/themes/default.latte Normal file
View file

@ -0,0 +1,38 @@
<div class="container">
{foreach $data->feed->items as $item}
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="{url_stream($item->author->avatarThumb)}" />
</p>
</figure>
<div class="media-content">
<p>
<strong>{$item->author->nickname}</strong>
<small>
<a href="{url_user($item->author->uniqueId)}">@{$item->author->uniqueId}</a>
</small>
<small title="{date('M d, Y H:i:s e', $item->createTime)}">{date('M d, Y', $item->createTime)}</small>
</p>
{if !empty($item->challenges)}
<p>{include './common/tags.latte', challenges: $item->challenges}</p>
{/if}
<p n:ifcontent>{$item->desc}</p>
{include './common/stats.latte', playCount: $item->stats->playCount, diggCount: $item->stats->diggCount, commentCount: $item->stats->commentCount, shareCount: $item->stats->shareCount}
<div class="has-text-centered">
<video width="{$item->video->width}" height="{$item->video->height}" controls preload="none" poster="{url_stream($item->video->originCover)}">
<source src="{url_stream($item->video->playAddr)}" type="video/mp4" />
</video>
</div>
<div class="has-text-centered">
{include './common/share.latte', uniqueId: $item->author->uniqueId, id: $item->id}
{include './common/download.latte', playAddr: $item->video->playAddr, id: $item->id, uniqueId: $item->author->uniqueId}
</div>
</div>
</article>
{/foreach}
{if empty($data->feed->items)}
<p class="title">No items sent by TikTok!</p>
{/if}
</div>
{include './common/controls.latte'}