Properly implemented OG

app/Controllers/EmbedController.php

@@ -11,8 +11,9 @@ class EmbedController {
         $video = $api->video($id);
         $video->feed();
         if ($video->ok()) {
-            $data = $video->getFull();
+            $item = $video->getFeed()->items[0];
-            Wrappers::latte('video', new VideoTemplate($data->feed->items[0], $data->info->detail, true));
+            $info = $video->getInfo();
+            Wrappers::latte('video', new VideoTemplate($item, $info, true));
         } else {
             ErrorHandler::showMeta($video->error());
         }

app/Controllers/MusicController.php

@@ -14,8 +14,9 @@ class MusicController {
         $music = $api->music($music_id);
         $music->feed($cursor);
         if ($music->ok()) {
-            $data = $music->getFull();
+            $info = $music->getInfo();
-            Wrappers::latte('music', new FullTemplate('Music', $data));
+            $feed = $music->getFeed();
+            Wrappers::latte('music', new FullTemplate('Music', $info, $feed));
         } else {
             ErrorHandler::showMeta($music->error());
         }

app/Controllers/ProxyController.php

@@ -2,7 +2,6 @@
 namespace App\Controllers;
 
 use App\Helpers\Cookies;
-use TikScraper\Helpers\Converter;
 
 class ProxyController {
     const VALID_TIKTOK_DOMAINS = [

app/Controllers/TagController.php

@@ -15,8 +15,9 @@ class TagController {
         $hashtag = $api->hashtag($name);
         $hashtag->feed($cursor);
         if ($hashtag->ok()) {
-            $data = $hashtag->getFull();
+            $info = $hashtag->getInfo();
-            Wrappers::latte('tag', new FullTemplate($data->info->detail->title, $data));
+            $feed = $hashtag->getFeed();
+            Wrappers::latte('tag', new FullTemplate($info->detail->title, $info, $feed));
         } else {
             ErrorHandler::showMeta($hashtag->error());
         }

app/Controllers/UserController.php

@@ -16,12 +16,13 @@ class UserController {
         $user = $api->user($username);
         $user->feed($cursor);
         if ($user->ok()) {
-            $data = $user->getFull();
+            $info = $user->getInfo();
-            if ($data->info->detail->privateAccount) {
+            $feed = $user->getFeed();
+            if ($info->detail->privateAccount) {
                 ErrorHandler::showText(401, "Private account detected! Not supported");
                 return;
             }
-            Wrappers::latte('user', new FullTemplate($data->info->detail->nickname, $data));
+            Wrappers::latte('user', new FullTemplate($info->detail->nickname, $info, $feed));
         } else {
             ErrorHandler::showMeta($user->error());
         }
@@ -32,8 +33,9 @@ class UserController {
         $video = $api->video($video_id);
         $video->feed();
         if ($video->ok()) {
-            $data = $video->getFull();
+            $item = $video->getFeed()->items[0];
-            Wrappers::latte('video', new VideoTemplate($data->feed->items[0], $data->info->detail));
+            $info = $video->getInfo();
+            Wrappers::latte('video', new VideoTemplate($item, $info));
         } else {
             ErrorHandler::showMeta($video->error());
         }

app/Models/FullTemplate.php

@@ -1,16 +1,19 @@
 <?php
 namespace App\Models;
 
-use TikScraper\Models\Full;
+use TikScraper\Models\Feed;
+use TikScraper\Models\Info;
 
 /**
 * Base for templates with both info and feed
 */
 class FullTemplate extends BaseTemplate {
-    public Full $data;
+    public Info $info;
+    public Feed $feed;
 
-    function __construct(string $title, Full $data) {
+    function __construct(string $title, Info $info, Feed $feed) {
         parent::__construct($title);
-        $this->data = $data;
+        $this->info = $info;
+        $this->feed = $feed;
     }
 }

app/Models/VideoTemplate.php

@@ -1,18 +1,20 @@
 <?php
 namespace App\Models;
 
+use TikScraper\Models\Info;
+
 /**
 * Base for templates with a feed
 */
 class VideoTemplate extends BaseTemplate {
     public object $item;
-    public object $detail;
+    public Info $info;
     public string $layout = 'hero';
 
-    function __construct(object $item, object $detail, bool $isEmbed = false) {
+    function __construct(object $item, Info $info, bool $isEmbed = false) {
         parent::__construct('Video');
         $this->item = $item;
-        $this->detail = $detail;
+        $this->info = $info;
         if ($isEmbed) {
             $this->layout = 'embed';
         } else {

composer.json

@@ -1,7 +1,7 @@
 {
     "name": "pablouser1/proxitok",
     "description": "An alternative frontend for TikTok",
-    "version": "2.4.3.3",
+    "version": "2.4.3.5",
     "license": "AGPL-3.0-or-later",
     "type": "project",
     "authors": [

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "8100904920dbc589a80f80dd56cd6faf",
+    "content-hash": "5ed78859acc6f451f60b75dca1887104",
     "packages": [
         {
             "name": "bramus/router",
@@ -263,16 +263,16 @@
         },
         {
             "name": "pablouser1/tikscraper",
-            "version": "v2.3.2.2",
+            "version": "v2.3.3.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/pablouser1/TikScraperPHP.git",
-                "reference": "2016443571f87265ca8e37897d88009affdcd0b6"
+                "reference": "b62fad1c00a4d62eda3e86811d35f7241cac097e"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/pablouser1/TikScraperPHP/zipball/2016443571f87265ca8e37897d88009affdcd0b6",
+                "url": "https://api.github.com/repos/pablouser1/TikScraperPHP/zipball/b62fad1c00a4d62eda3e86811d35f7241cac097e",
-                "reference": "2016443571f87265ca8e37897d88009affdcd0b6",
+                "reference": "b62fad1c00a4d62eda3e86811d35f7241cac097e",
                 "shasum": ""
             },
             "require": {
@@ -305,9 +305,9 @@
             "description": "Get data from TikTok API",
             "support": {
                 "issues": "https://github.com/pablouser1/TikScraperPHP/issues",
-                "source": "https://github.com/pablouser1/TikScraperPHP/tree/v2.3.2.2"
+                "source": "https://github.com/pablouser1/TikScraperPHP/tree/v2.3.3.1"
             },
-            "time": "2022-11-22T19:43:57+00:00"
+            "time": "2022-11-26T22:50:46+00:00"
         },
         {
             "name": "php-webdriver/webdriver",

templates/components/head.latte

@@ -6,10 +6,26 @@
 	<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" />
+	{if isset($og, $og_content, $og_url)}
+		<!-- Using TikTok's meta config -->
+		<meta property="og:title" content="{$og->title}" />
+		<meta property="og:description" content="{$og->description}" />
+		<meta property="og:url" content="{$og_url}" />
+		<meta property="og:image" content="{url_stream($og_content)}" />
+		<meta property="twitter:title" content="{$og->title}" />
+		<meta property="twitter:description" content="{$og->description}" />
+		<meta property="twitter:image" content="{url_stream($og_content)}" />
+	{else}
+		<!-- Using predifined ProxiTok config -->
 		<meta property="og:title" content="{$title}" />
 		<meta property="og:description" content="Alternative frontend for TikTok" />
+		<meta property="twitter:title" content="{$title}" />
+		<meta property="twitter:description" content="Alternative frontend for TikTok" />
+	{/if}
+	<meta property="og:site_name" content="ProxiTok" />
 	<meta property="og:type" content="website" />
+	<meta property="twitter:card" content="summary" />
+	<meta property="twitter:site" content="ProxiTok" />
 	{if isset($has_rss)}
 		<link rel="alternate" type="application/rss+xml" title="{$title}" href="{$_SERVER['REQUEST_URI'] . '/rss'}" />
 	{/if}

templates/components/themes/card.latte

@@ -2,7 +2,7 @@
 <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}
+		{foreach $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)}"
@@ -17,7 +17,7 @@
 			<img class="hidden" loading="lazy" data-src="{url_stream($item->video->dynamicCover)}" />
     </div>
     {/foreach}
-		{if empty($data->feed->items)}
+		{if empty($feed->items)}
 		<p class="title">No items sent by TikTok!</p>
 		{/if}
   </div>

templates/components/themes/default.latte

@@ -1,5 +1,5 @@
 <div class="container">
-	{foreach $data->feed->items as $item}
+	{foreach $feed->items as $item}
 	<article class="media">
   	<figure class="media-left">
     	<p class="image is-64x64">
@@ -31,7 +31,7 @@
   	</div>
 	</article>
 	{/foreach}
-	{if empty($data->feed->items)}
+	{if empty($feed->items)}
 		<p class="title">No items sent by TikTok!</p>
 	{/if}
 </div>

templates/views/music.latte

@@ -1,9 +1,9 @@
 {layout '../layouts/default.latte'}
 
 {block header}
-	<p class="title">{$data->info->detail->title}</p>
+	<p class="title">{$info->detail->title}</p>
-	<p class="subtitle">{$data->info->detail->desc}</p>
+	<p class="subtitle">{$info->detail->desc}</p>
-	<p>Videos: {number($data->info->stats->videoCount)}</p>
+	<p>Videos: {number($info->stats->videoCount)}</p>
 {/block}
 
 {block content}

templates/views/tag.latte

@@ -2,15 +2,19 @@
 
 {var $has_rss = true}
 
+{var $og = $info->meta->og}
+{var $og_content = $info->detail->profileLarger}
+{var $og_url = url_tag($info->detail->title)}
+
 {block header}
-	{if $data->info->detail->profileLarger !== ''}
+	{if $info->detail->profileLarger !== ''}
 	<figure class="image is-inline-block is-128x128">
-		<img class="is-rounded" src="{url_stream($data->info->detail->profileLarger)}" />
+		<img class="is-rounded" src="{url_stream($info->detail->profileLarger)}" />
 	</figure>
 	{/if}
-	<p class="title">{$data->info->detail->title}</p>
+	<p class="title">{$info->detail->title}</p>
 	<p class="subtitle">{include '../components/rss.latte'}</p>
-	<p>Videos: {number($data->info->stats->videoCount)} / Views: {number($data->info->stats->viewCount)}</p>
+	<p>Videos: {number($info->stats->videoCount)} / Views: {number($info->stats->viewCount)}</p>
 {/block}
 
 {block content}

templates/views/user.latte

@@ -2,15 +2,19 @@
 
 {var $has_rss = true}
 
+{var $og = $info->meta->og}
+{var $og_content = $info->detail->avatarLarger}
+{var $og_url = url_user($info->detail->uniqueId)}
+
 {block header}
 	<figure class="image is-inline-block is-128x128">
-		<img class="is-rounded" src="{url_stream($data->info->detail->avatarLarger)}" />
+		<img class="is-rounded" src="{url_stream($info->detail->avatarLarger)}" />
 	</figure>
-	<p class="title">{$data->info->detail->uniqueId}</p>
+	<p class="title">{$info->detail->uniqueId}</p>
 	<p class="subtitle">{include '../components/rss.latte'}</p>
-	<p>{$data->info->detail->signature}</p>
+	<p>{$info->detail->signature}</p>
-	<p>Following: {number($data->info->stats->followingCount)} / Followers: {number($data->info->stats->followerCount)}</p>
+	<p>Following: {number($info->stats->followingCount)} / Followers: {number($info->stats->followerCount)}</p>
-	<p>Hearts: {number($data->info->stats->heartCount)} / Videos: {$data->info->stats->videoCount}</p>
+	<p>Hearts: {number($info->stats->heartCount)} / Videos: {$info->stats->videoCount}</p>
 {/block}
 
 {block content}

templates/views/video.latte

@@ -1,5 +1,9 @@
 {layout "../layouts/{$layout}.latte"}
 
+{var $og = $info->meta->og}
+{var $og_content = $item->video->originCover}
+{var $og_url = url_video_internal($info->detail->uniqueId, $item->id)}
+
 {block content}
 	<div class="columns is-centered is-vcentered is-gapless">
 		<div class="column has-text-centered">
@@ -12,14 +16,14 @@
 				<article class="media">
   				<figure class="media-left">
   			  	<p class="image is-64x64">
-  			    	<img src="{url_stream($detail->avatarThumb)}" />
+  			    	<img src="{url_stream($info->detail->avatarThumb)}" />
   			  	</p>
   				</figure>
   				<div class="media-content">
   			    <p>
-  			    	<strong>{$detail->nickname}</strong>
+  			    	<strong>{$info->detail->nickname}</strong>
 							<small>
-								<a href="{url_user($detail->uniqueId)}">@{$detail->uniqueId}</a>
+								<a href="{url_user($info->detail->uniqueId)}">@{$info->detail->uniqueId}</a>
 							</small>
 							<small title="{date('M d, Y H:i:s e', $item->createTime)}">{date('M d, Y', $item->createTime)}</small>
   			    </p>
@@ -30,8 +34,8 @@
 							<p n:ifcontent>{$item->desc}</p>
 							{include '../components/themes/common/stats.latte', playCount: $item->stats->playCount, diggCount: $item->stats->diggCount, commentCount: $item->stats->commentCount, shareCount: $item->stats->shareCount}
 							<div class="has-text-centered">
-								{include '../components/themes/common/share.latte', uniqueId: $detail->uniqueId, id: $item->id}
+								{include '../components/themes/common/share.latte', uniqueId: $info->detail->uniqueId, id: $item->id}
-								{include '../components/themes/common/download.latte', playAddr: $item->video->playAddr, id: $item->id, uniqueId: $detail->uniqueId}
+								{include '../components/themes/common/download.latte', playAddr: $item->video->playAddr, id: $item->id, uniqueId: $info->detail->uniqueId}
 							</div>
 						</div>
   				</div>