Icons, themes, removed instance proxy and more
This commit is contained in:
Pablo Ferreiro
parent
9a35c61023
commit
44ee065ec6
52 changed files with 476 additions and 511 deletions
|
|
@ -1,74 +1 @@
|
|||
<link rel="stylesheet" href="{path('/styles/feed.css')}">
|
||||
<noscript>JavaScript is required for this section to work!</noscript>
|
||||
<section class="section">
|
||||
<div class="columns is-multiline is-vcentered">
|
||||
{foreach $feed->items as $item}
|
||||
{do $share_url = 'https://tiktok.com/@' . $item->author->uniqueId . '/video/' . $item->id}
|
||||
<div class="column is-one-quarter clickable-img" id="{$item->id}" onclick="openVideo(this.id)"
|
||||
data-video_url="{path('/stream?url=' . urlencode($item->video->playAddr))}"
|
||||
data-video_download_watermark="{path('/download?url=' . urlencode($item->video->playAddr) . '&id=' . $item->id . '&user=' . $item->author->uniqueId) . '&watermark='}"
|
||||
data-video_download_nowatermark="{path('/download?id=' . $item->id . '&user=' . $item->author->uniqueId)}"
|
||||
data-video_share_url="{$share_url}"
|
||||
data-desc="{$item->desc}"
|
||||
data-music_title="{$item->music->title}"
|
||||
data-music_url="{path('/stream?url=' . urlencode($item->music->playUrl))}">
|
||||
<img loading="lazy" src="{path('/stream?url=' . urlencode($item->video->originCover))}" />
|
||||
<img class="hidden" loading="lazy" data-src="{path('/stream?url=' . urlencode($item->video->dynamicCover))}" />
|
||||
</div>
|
||||
{/foreach}
|
||||
{if empty($feed->items)}
|
||||
<p class="title">No items sent by TikTok!</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div n:ifset="$feed->info" class="buttons">
|
||||
{if isset($_GET['cursor']) && $_GET['cursor'] != 0 }
|
||||
<a class="button is-danger" href="?">First</a>
|
||||
<button class="button is-danger" onclick="history.back()">Back</button>
|
||||
{/if}
|
||||
<a n:attr="disabled => !$feed->hasMore" class="button is-success" href="?cursor={$feed->maxCursor}">Next</a>
|
||||
</div>
|
||||
</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">
|
||||
<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/feed.js')}"></script>
|
||||
{include './themes/' . theme() . '.latte'}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<form action="{path($path)}" method="POST">
|
||||
<form action="{path($path)}" method="{$method}">
|
||||
{block fields}{/block}
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<button class="button is-success" type="submit">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
{ifset $submit}
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<button class="button is-success" type="submit">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
{/ifset}
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<meta property="og:title" content="ProxiTok" />
|
||||
<meta property="og:description" content="Alternative frontend for TikTok" />
|
||||
<meta property="og:type" content="website" />
|
||||
<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
components/icon.latte
Normal file
14
components/icon.latte
Normal 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}
|
||||
|
|
@ -9,9 +9,13 @@
|
|||
|
||||
<div id="navbar-menu" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a href="{path('/')}" class="navbar-item">Home</a>
|
||||
<a href="{path('/')}" class="navbar-item">
|
||||
{include './icon.latte', icon: 'home', text: 'Home'}
|
||||
</a>
|
||||
<a href="{path('/settings')}" class="navbar-item">Settings</a>
|
||||
<a href="{path('/about')}" class="navbar-item">About</a>
|
||||
<a href="{path('/about')}" class="navbar-item">
|
||||
{include './icon.latte', icon: 'info', text: 'About'}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
<a href="{path($_SERVER['REQUEST_URI'] . '/rss')}">RSS Feed</a>
|
||||
<a href="{path($_SERVER['REQUEST_URI'] . '/rss')}">
|
||||
{include './icon.latte', icon: 'feed', text: 'RSS Feed'}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{embed '../form.latte', path: '/settings/api'}
|
||||
{embed '../form.latte', path: '/settings/api', method: 'POST', submit: true}
|
||||
{block fields}
|
||||
<div class="field">
|
||||
<label class="label">Legacy mode</label>
|
||||
|
|
|
|||
14
components/settings/general.latte
Normal file
14
components/settings/general.latte
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
{embed '../form.latte', path: '/settings/general', method: 'POST', submit: true}
|
||||
{block fields}
|
||||
<div class="field">
|
||||
<label class="label">Theme</label>
|
||||
<div class="select">
|
||||
<select name="theme">
|
||||
<option hidden disabled selected value> -- Select an option -- </option>
|
||||
<option value="default">Default</option>
|
||||
<option value="card">Card</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{/block}
|
||||
{/embed}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
{embed '../form.latte', path: '/settings/proxy'}
|
||||
{block fields}
|
||||
{foreach $proxy_elements as $proxy_element}
|
||||
<div class="field">
|
||||
<label class="label">{$proxy_element|firstUpper}</label>
|
||||
<div class="control">
|
||||
<input name="{$proxy_element}" class="input" value="{isset($_COOKIE[$proxy_element]) ? $_COOKIE[$proxy_element] : ''}" required />
|
||||
</div>
|
||||
</div>
|
||||
{/foreach}
|
||||
{/block}
|
||||
{/embed}
|
||||
68
components/themes/card.latte
Normal file
68
components/themes/card.latte
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<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 $feed->items as $item}
|
||||
{do $share_url = 'https://tiktok.com/@' . $item->author->uniqueId . '/video/' . $item->id}
|
||||
<div class="column is-one-quarter clickable-img" id="{$item->id}" onclick="openVideo(this.id)"
|
||||
data-video_url="{path('/stream?url=' . urlencode($item->video->playAddr))}"
|
||||
data-video_download_watermark="{path('/download?url=' . urlencode($item->video->playAddr) . '&id=' . $item->id . '&user=' . $item->author->uniqueId) . '&watermark='}"
|
||||
data-video_download_nowatermark="{path('/download?id=' . $item->id . '&user=' . $item->author->uniqueId)}"
|
||||
data-video_share_url="{$share_url}"
|
||||
data-desc="{$item->desc}"
|
||||
data-music_title="{$item->music->title}"
|
||||
data-music_url="{path('/stream?url=' . urlencode($item->music->playUrl))}">
|
||||
<img loading="lazy" src="{path('/stream?url=' . urlencode($item->video->originCover))}" />
|
||||
<img class="hidden" loading="lazy" data-src="{path('/stream?url=' . urlencode($item->video->dynamicCover))}" />
|
||||
</div>
|
||||
{/foreach}
|
||||
{if empty($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">
|
||||
<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>
|
||||
8
components/themes/common/controls.latte
Normal file
8
components/themes/common/controls.latte
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<div n:ifset="$feed->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>
|
||||
<a class="button is-danger" href="?cursor={$feed->minCursor}">Back</a>
|
||||
{/if}
|
||||
<a n:attr="disabled => !$feed->hasMore" class="button is-success" href="?cursor={$feed->maxCursor}">Next</a>
|
||||
</div>
|
||||
13
components/themes/common/download.latte
Normal file
13
components/themes/common/download.latte
Normal 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="{path('/download?url=' . urlencode($playAddr) . '&id=' . $item->id . '&user=' . $uniqueId) . '&watermark=1'}" class="dropdown-item">Watermark</a>
|
||||
<a target="_blank" href="{path('/download?id=' . $id . '&user=' . $uniqueId)}" class="dropdown-item">No watermark</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
5
components/themes/common/share.latte
Normal file
5
components/themes/common/share.latte
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{do $endpoint = '/@' . $uniqueId . '/video/' . $id}
|
||||
<div class="buttons is-centered">
|
||||
<a class="button is-success is-small" href="{path($endpoint)}">Instace Link</a>
|
||||
<a class="button is-danger is-small" href="https://www.tiktok.com{$endpoint}">Original Link</a>
|
||||
</div>
|
||||
6
components/themes/common/stats.latte
Normal file
6
components/themes/common/stats.latte
Normal 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
components/themes/common/tags.latte
Normal file
5
components/themes/common/tags.latte
Normal 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>
|
||||
36
components/themes/default.latte
Normal file
36
components/themes/default.latte
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<div class="container">
|
||||
{foreach $feed->items as $item}
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="{path('/stream?url=' . urlencode($item->author->avatarThumb))}" />
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>{$item->author->nickname}</strong> <small><a href="{path('/@' . $item->author->uniqueId)}">@{$item->author->uniqueId}</a></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>
|
||||
<div class="has-text-centered">
|
||||
<video width="{$item->video->width}" height="{$item->video->height}" controls preload="none" poster="{path('/stream?url=' . urlencode($item->video->originCover))}">
|
||||
<source src="{path('/stream?url=' . $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($feed->items)}
|
||||
<p class="title">No items sent by TikTok!</p>
|
||||
{/if}
|
||||
</div>
|
||||
{include './common/controls.latte'}
|
||||
Loading…
Add table
Add a link
Reference in a new issue