From 30954f3d3acdf02bcaeeacfec2754db9223123c3 Mon Sep 17 00:00:00 2001 From: Pablo Ferreiro Date: Thu, 6 Jan 2022 00:11:00 +0100 Subject: [PATCH] Code cleanup, following and gif support --- README.md | 1 - composer.json | 5 ++ composer.lock | 54 +++++++++------- helpers/Following.php | 12 ++++ helpers/Misc.php | 54 ++++++++++++++++ helpers/Settings.php | 21 +++++++ helpers/settings_elements.php | 2 - index.php | 8 +-- routes/following.php | 32 ++++++++++ routes/index.php | 77 +++++------------------ routes/settings.php | 41 +++++++++--- scripts/feed.js | 22 +++++++ styles/feed.css | 10 ++- views/components/feed.latte | 7 ++- views/components/following_tags.latte | 9 +++ views/components/navbar.latte | 1 + views/components/settings/following.latte | 24 +++++++ views/components/settings/proxy.latte | 15 +++++ views/following.latte | 24 +++++++ views/settings.latte | 20 ++---- views/trending.latte | 2 +- 21 files changed, 318 insertions(+), 123 deletions(-) create mode 100644 helpers/Following.php create mode 100644 helpers/Misc.php create mode 100644 helpers/Settings.php delete mode 100644 helpers/settings_elements.php create mode 100644 routes/following.php create mode 100644 views/components/following_tags.latte create mode 100644 views/components/settings/following.latte create mode 100644 views/components/settings/proxy.latte create mode 100644 views/following.latte diff --git a/README.md b/README.md index effa539..2fa3dfc 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,6 @@ location /tiktok-viewer/.env { ## TODO * Allow searching for just one video using the ID -* Code cleanup ## Credits * [TikTok-API-PHP](https://github.com/ssovit/TikTok-API-PHP) diff --git a/composer.json b/composer.json index 8b2a088..dc83ce3 100644 --- a/composer.json +++ b/composer.json @@ -11,6 +11,11 @@ "latte/latte": "^2.10", "vlucas/phpdotenv": "^5.4" }, + "autoload": { + "psr-4": { + "Helpers\\": "helpers/" + } + }, "scripts": { "post-install-cmd": [ "php fix_api.php" diff --git a/composer.lock b/composer.lock index 83608bd..f273c6a 100644 --- a/composer.lock +++ b/composer.lock @@ -70,16 +70,16 @@ }, { "name": "latte/latte", - "version": "v2.10.7", + "version": "v2.10.8", "source": { "type": "git", "url": "https://github.com/nette/latte.git", - "reference": "a69d0b9598652438b5754ae5c1abc217d5003d98" + "reference": "596b28bf098ebb852732d60b00538139a009c4db" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/nette/latte/zipball/a69d0b9598652438b5754ae5c1abc217d5003d98", - "reference": "a69d0b9598652438b5754ae5c1abc217d5003d98", + "url": "https://api.github.com/repos/nette/latte/zipball/596b28bf098ebb852732d60b00538139a009c4db", + "reference": "596b28bf098ebb852732d60b00538139a009c4db", "shasum": "" }, "require": { @@ -148,9 +148,9 @@ ], "support": { "issues": "https://github.com/nette/latte/issues", - "source": "https://github.com/nette/latte/tree/v2.10.7" + "source": "https://github.com/nette/latte/tree/v2.10.8" }, - "time": "2021-12-21T11:22:49+00:00" + "time": "2022-01-04T14:13:28+00:00" }, { "name": "phpoption/phpoption", @@ -314,21 +314,24 @@ }, { "name": "symfony/polyfill-ctype", - "version": "v1.23.0", + "version": "v1.24.0", "source": { "type": "git", "url": "https://github.com/symfony/polyfill-ctype.git", - "reference": "46cd95797e9df938fdd2b03693b5fca5e64b01ce" + "reference": "30885182c981ab175d4d034db0f6f469898070ab" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/polyfill-ctype/zipball/46cd95797e9df938fdd2b03693b5fca5e64b01ce", - "reference": "46cd95797e9df938fdd2b03693b5fca5e64b01ce", + "url": "https://api.github.com/repos/symfony/polyfill-ctype/zipball/30885182c981ab175d4d034db0f6f469898070ab", + "reference": "30885182c981ab175d4d034db0f6f469898070ab", "shasum": "" }, "require": { "php": ">=7.1" }, + "provide": { + "ext-ctype": "*" + }, "suggest": { "ext-ctype": "For best performance" }, @@ -373,7 +376,7 @@ "portable" ], "support": { - "source": "https://github.com/symfony/polyfill-ctype/tree/v1.23.0" + "source": "https://github.com/symfony/polyfill-ctype/tree/v1.24.0" }, "funding": [ { @@ -389,25 +392,28 @@ "type": "tidelift" } ], - "time": "2021-02-19T12:13:01+00:00" + "time": "2021-10-20T20:35:02+00:00" }, { "name": "symfony/polyfill-mbstring", - "version": "v1.23.1", + "version": "v1.24.0", "source": { "type": "git", "url": "https://github.com/symfony/polyfill-mbstring.git", - "reference": "9174a3d80210dca8daa7f31fec659150bbeabfc6" + "reference": "0abb51d2f102e00a4eefcf46ba7fec406d245825" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/polyfill-mbstring/zipball/9174a3d80210dca8daa7f31fec659150bbeabfc6", - "reference": "9174a3d80210dca8daa7f31fec659150bbeabfc6", + "url": "https://api.github.com/repos/symfony/polyfill-mbstring/zipball/0abb51d2f102e00a4eefcf46ba7fec406d245825", + "reference": "0abb51d2f102e00a4eefcf46ba7fec406d245825", "shasum": "" }, "require": { "php": ">=7.1" }, + "provide": { + "ext-mbstring": "*" + }, "suggest": { "ext-mbstring": "For best performance" }, @@ -453,7 +459,7 @@ "shim" ], "support": { - "source": "https://github.com/symfony/polyfill-mbstring/tree/v1.23.1" + "source": "https://github.com/symfony/polyfill-mbstring/tree/v1.24.0" }, "funding": [ { @@ -469,20 +475,20 @@ "type": "tidelift" } ], - "time": "2021-05-27T12:26:48+00:00" + "time": "2021-11-30T18:21:41+00:00" }, { "name": "symfony/polyfill-php80", - "version": "v1.23.1", + "version": "v1.24.0", "source": { "type": "git", "url": "https://github.com/symfony/polyfill-php80.git", - "reference": "1100343ed1a92e3a38f9ae122fc0eb21602547be" + "reference": "57b712b08eddb97c762a8caa32c84e037892d2e9" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/polyfill-php80/zipball/1100343ed1a92e3a38f9ae122fc0eb21602547be", - "reference": "1100343ed1a92e3a38f9ae122fc0eb21602547be", + "url": "https://api.github.com/repos/symfony/polyfill-php80/zipball/57b712b08eddb97c762a8caa32c84e037892d2e9", + "reference": "57b712b08eddb97c762a8caa32c84e037892d2e9", "shasum": "" }, "require": { @@ -536,7 +542,7 @@ "shim" ], "support": { - "source": "https://github.com/symfony/polyfill-php80/tree/v1.23.1" + "source": "https://github.com/symfony/polyfill-php80/tree/v1.24.0" }, "funding": [ { @@ -552,7 +558,7 @@ "type": "tidelift" } ], - "time": "2021-07-28T13:41:28+00:00" + "time": "2021-09-13T13:58:33+00:00" }, { "name": "vlucas/phpdotenv", diff --git a/helpers/Following.php b/helpers/Following.php new file mode 100644 index 0000000..fe5e9ea --- /dev/null +++ b/helpers/Following.php @@ -0,0 +1,12 @@ +setTempDirectory(__DIR__ . '/../cache/views'); + $latte->addFunction('assets', function (string $name, string $type) use ($subdir) { + $path = "{$subdir}/{$type}/{$name}"; + return $path; + }); + $latte->addFunction('path', function (string $name) use ($subdir) { + $path = "{$subdir}/{$name}"; + return $path; + }); + // https://stackoverflow.com/a/36365553 + $latte->addFunction('number', function (int $x) { + if($x > 1000) { + $x_number_format = number_format($x); + $x_array = explode(',', $x_number_format); + $x_parts = array('K', 'M', 'B', 'T'); + $x_count_parts = count($x_array) - 1; + $x_display = $x; + $x_display = $x_array[0] . ((int) $x_array[1][0] !== 0 ? '.' . $x_array[1][0] : ''); + $x_display .= $x_parts[$x_count_parts - 1]; + return $x_display; + } + return $x; + }); + return $latte; + } +} diff --git a/helpers/Settings.php b/helpers/Settings.php new file mode 100644 index 0000000..87d9afb --- /dev/null +++ b/helpers/Settings.php @@ -0,0 +1,21 @@ +safeLoad(); -// -- HELPERS -- // -function getSubdir(): string { - return isset($_ENV['APP_SUBDIR']) && !empty($_ENV['APP_SUBDIR']) ? $_ENV['APP_SUBDIR'] : ''; -} - require __DIR__ . '/routes/index.php'; -Route::run(getSubdir()); +Route::run(Misc::getSubDir()); diff --git a/routes/following.php b/routes/following.php new file mode 100644 index 0000000..b189553 --- /dev/null +++ b/routes/following.php @@ -0,0 +1,32 @@ +getUserFeed($user); + if ($user_feed) { + $max = count($user_feed->items) > $max_items_per_user ? $max_items_per_user : count($user_feed->items); + for ($i = 0; $i < $max; $i++) { + $item = $user_feed->items[$i]; + array_push($items, $item); + } + } + } + } + + $feed = (object) [ + 'items' => $items, + 'hasMore' => false + ]; + $latte = Misc::latte(); + $latte->render(Misc::getView('following'), ['following' => $following, 'feed' => $feed]); +}); diff --git a/routes/index.php b/routes/index.php index a456def..9e9441a 100644 --- a/routes/index.php +++ b/routes/index.php @@ -1,104 +1,59 @@ setTempDirectory(__DIR__ . '/../cache/views'); - $latte->addFunction('assets', function (string $name, string $type) use ($subdir) { - $path = "{$subdir}/{$type}/{$name}"; - return $path; - }); - $latte->addFunction('path', function (string $name) use ($subdir) { - $path = "{$subdir}/{$name}"; - return $path; - }); - // https://stackoverflow.com/a/36365553 - $latte->addFunction('number', function (int $x) { - if($x > 1000) { - $x_number_format = number_format($x); - $x_array = explode(',', $x_number_format); - $x_parts = array('K', 'M', 'B', 'T'); - $x_count_parts = count($x_array) - 1; - $x_display = $x; - $x_display = $x_array[0] . ((int) $x_array[1][0] !== 0 ? '.' . $x_array[1][0] : ''); - $x_display .= $x_parts[$x_count_parts - 1]; - return $x_display; - } - return $x; - }); - return $latte; -} - -function getView(string $template): string { - return __DIR__ . "/../views/{$template}.latte"; -} +use Helpers\Misc; Route::add('/', function () { - $latte = getLatte(); - $latte->render(getView('home')); + $latte = Misc::latte(); + $latte->render(Misc::getView('home')); }); -Route::add("/trending", function () use ($proxy_elements) { +Route::add("/trending", function () { $cursor = 0; if (isset($_GET['cursor']) && is_numeric($_GET['cursor'])) { $cursor = (int) $_GET['cursor']; } - $latte = getLatte(); - $api = getApi($proxy_elements); + $latte = Misc::latte(); + $api = Misc::api(); $feed = $api->getTrendingFeed($cursor); if ($feed) { - $latte->render(getView('trending'), ['feed' => $feed]); + $latte->render(Misc::getView('trending'), ['feed' => $feed]); } else { return 'ERROR!'; } }); -Route::add("/@([^/]+)", function (string $username) use ($proxy_elements) { +Route::add("/@([^/]+)", function (string $username) { $cursor = 0; if (isset($_GET['cursor']) && is_numeric($_GET['cursor'])) { $cursor = (int) $_GET['cursor']; } - $latte = getLatte(); - $api = getApi($proxy_elements); + $latte = Misc::latte(); + $api = Misc::api(); $feed = $api->getUserFeed($username, $cursor); if ($feed) { if ($feed->info->detail->user->privateAccount) { http_response_code(400); return 'Private account detected! Not supported'; } - $latte->render(getView('user'), ['feed' => $feed]); + $latte->render(Misc::getView('user'), ['feed' => $feed]); } else { return 'ERROR!'; } }); -Route::add('/tag/(\w+)', function (string $name) use ($proxy_elements) { +Route::add('/tag/(\w+)', function (string $name) { $cursor = 0; if (isset($_GET['cursor']) && is_numeric($_GET['cursor'])) { $cursor = (int) $_GET['cursor']; } - $latte = getLatte(); - $api = getApi($proxy_elements); + $latte = Misc::latte(); + $api = Misc::api(); $feed = $api->getChallengeFeed($name, $cursor); if ($feed) { - $latte->render(getView('tag'), ['feed' => $feed]); + $latte->render(Misc::getView('tag'), ['feed' => $feed]); } else { return 'ERROR!'; } diff --git a/routes/settings.php b/routes/settings.php index 6614df7..a6d4d78 100644 --- a/routes/settings.php +++ b/routes/settings.php @@ -1,18 +1,43 @@ render(getView('settings'), ["proxy_elements" => $proxy_elements]); +Route::add("/settings", function () { + $latte = Misc::latte(); + $latte->render(Misc::getView('settings'), ["proxy_elements" => Settings::$proxy, "following" => Following::get()]); }); -Route::add("/settings", function () use ($proxy_elements) { - if (in_array($proxy_elements, $_POST)) { - foreach ($proxy_elements as $proxy_element) { - setcookie($proxy_element, $_POST[$proxy_element], time()+60*60*24*30, '/', '', true, true); +Route::add("/settings/proxy", function () { + if (in_array(Settings::$proxy, $_POST)) { + foreach (Settings::$proxy as $proxy_element) { + Settings::set($proxy_element, $_POST[$proxy_element]); } } http_response_code(302); header('Location: ./home'); }, 'POST'); + + +Route::add("/settings/following", function () { + $following = Following::get(); + + if (isset($_POST['add'])) { + // Add following + array_push($following, $_POST['account']); + } elseif (isset($_POST['remove'])) { + $index = array_search($_POST['account'], $following); + if ($index !== false) { + unset($following[$index]); + } + } else { + return 'You need to send a mode!'; + } + + // Build string + $following_string = implode(',', $following); + Settings::set('following', $following_string); + header('Location: ../settings'); +}, 'POST'); diff --git a/scripts/feed.js b/scripts/feed.js index 7d7375d..7a051f9 100644 --- a/scripts/feed.js +++ b/scripts/feed.js @@ -101,10 +101,32 @@ const hashChange = () => { } } +const swapImages = (e, mode) => { + if (mode === 'gif') { + const a = e.target + const img = a.children[0] + const gif = a.children[1] + img.classList.add('hidden') + gif.classList.remove('hidden') + } else if (mode === 'img') { + const gif = e.target + const img = e.target.parentElement.children[0] + img.classList.remove('hidden') + gif.classList.add('hidden') + } +} + document.getElementById('modal-background').addEventListener('click', hideModel, false) document.getElementById('modal-close').addEventListener('click', hideModel, false) document.getElementById('back-button').addEventListener('click', () => moveVideo(false)) document.getElementById('next-button').addEventListener('click', () => moveVideo(true)) window.addEventListener('hashchange', hashChange, false) +// Image hover +const images = document.getElementsByClassName("clickable-img") +for (let i = 0; i < images.length; i++) { + images[i].addEventListener('mouseenter', e => swapImages(e, 'gif'), false) + images[i].addEventListener('mouseout', e => swapImages(e, 'img'), false) +} + hashChange() diff --git a/styles/feed.css b/styles/feed.css index 1616e19..da41ca8 100644 --- a/styles/feed.css +++ b/styles/feed.css @@ -3,6 +3,12 @@ overflow: hidden; } -.clickable-img { - cursor: pointer; +.hidden { + display: none; +} + +/* Make gifs take all available space */ +.clickable-img img { + width: 100%; + height: 100%; } diff --git a/views/components/feed.latte b/views/components/feed.latte index c51b619..3336a27 100644 --- a/views/components/feed.latte +++ b/views/components/feed.latte @@ -3,7 +3,7 @@
{foreach $feed->items as $item}
- - + +
{/foreach}
-
+
First Back {if $feed->hasMore} diff --git a/views/components/following_tags.latte b/views/components/following_tags.latte new file mode 100644 index 0000000..a6afc3e --- /dev/null +++ b/views/components/following_tags.latte @@ -0,0 +1,9 @@ +
+ {if !empty($following)} + {foreach $following as $user} + {$user} + {/foreach} + {else} +

None

+ {/if} +
diff --git a/views/components/navbar.latte b/views/components/navbar.latte index 92a87e2..606c69c 100644 --- a/views/components/navbar.latte +++ b/views/components/navbar.latte @@ -10,6 +10,7 @@ diff --git a/views/components/settings/following.latte b/views/components/settings/following.latte new file mode 100644 index 0000000..4444ec1 --- /dev/null +++ b/views/components/settings/following.latte @@ -0,0 +1,24 @@ +{include '../following_tags.latte'} +
+
+ +
+ +
+
+
+
+ + +
+
+
+
+ +
+
+
diff --git a/views/components/settings/proxy.latte b/views/components/settings/proxy.latte new file mode 100644 index 0000000..97a9e22 --- /dev/null +++ b/views/components/settings/proxy.latte @@ -0,0 +1,15 @@ +
+ {foreach $proxy_elements as $proxy_element} +
+ +
+ +
+
+ {/foreach} +
+
+ +
+
+
diff --git a/views/following.latte b/views/following.latte new file mode 100644 index 0000000..53b7e51 --- /dev/null +++ b/views/following.latte @@ -0,0 +1,24 @@ + + + +{include 'components/head.latte', title: 'Following'} + + + {include 'components/navbar.latte'} +
+
+
+

Following

+
+
+
+
+

Following:

+ {include 'components/following_tags.latte'} +

You can add/remove follows on settings

+
+
+ {include 'components/feed.latte'} + {include 'components/footer.latte'} + + diff --git a/views/settings.latte b/views/settings.latte index f3e2891..e82efb6 100644 --- a/views/settings.latte +++ b/views/settings.latte @@ -15,21 +15,11 @@

Proxy

-
- {foreach $proxy_elements as $proxy_element} -
- -
- -
-
- {/foreach} -
-
- -
-
-
+ {include 'components/settings/proxy.latte'} +
+ +

Following

+ {include 'components/settings/following.latte'}
{include 'components/footer.latte'} diff --git a/views/trending.latte b/views/trending.latte index e870568..a4d7e9e 100644 --- a/views/trending.latte +++ b/views/trending.latte @@ -8,7 +8,7 @@
-

Trending page

+

Trending