Pictures support

composer.json

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

templates/components/themes/common/content.latte

@@ -0,0 +1,19 @@
+{if !isset($item->imagePost)}
+<video controls n:attr="autoplay => $isAutoplay" poster="{url_stream($item->video->originCover)}" preload="none">
+	<source src="{url_stream($item->video->playAddr)}" type="video/mp4" />
+</video>
+{else}
+<div n:class="columns, is-centered, is-vcentered, is-multiline, $isBig ? is-mobile">
+	{foreach $item->imagePost->images as $image}
+	{if $isBig}
+	<div class="column is-half">
+	{else}
+	<div class="column is-one-third-tablet is-one-third-desktop is-one-quarter-widescreen is-one-fifth-fullhd">
+	{/if}
+		<figure class="image">
+			<img width="{$image->imageWidth}" height="{$image->imageHeight}" src="{$image->imageURL->urlList[0]}" />
+		</figure>
+	</div>
+	{/foreach}
+</div>
+{/if}

templates/components/themes/default.latte

@@ -18,11 +18,11 @@
 			<p>{include './common/tags.latte', challenges: $item->challenges}</p>
 			{/if}
 			<p n:ifcontent>{$item->desc}</p>
+			<p>Song: {$item->music->title}</p>
+			<audio controls preload="none" src="{$item->music->playUrl}"></audio>
 			{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>
+				{include './common/content.latte', item: $item, isAutoplay: false, isBig: false}
 			</div>
 			<p class="has-text-centered"><b>Download video</b></p>
 			{include './common/download.latte', playAddr: $item->video->playAddr, id: $item->id, uniqueId: $item->author->uniqueId}

templates/views/video.latte

@@ -9,11 +9,9 @@
 {/if}
 
 {block content}
-	<div class="columns is-centered is-vcentered is-gapless">
+	<div class="columns is-centered is-vcentered">
 		<div class="column has-text-centered">
-			<video controls autoplay poster="{url_stream($item->video->originCover)}">
-				<source src="{url_stream($item->video->playAddr)}" type="video/mp4" />
-			</video>
+			{include '../components/themes/common/content.latte', item: $item, isAutoplay: true, isBig: true}
 		</div>
 		<div class="column">
 			<div class="box">
@@ -36,6 +34,8 @@
 						{/if}
 						<div class="content">
 							<p n:ifcontent>{$item->desc}</p>
+							<p>Song: {$item->music->title}</p>
+							<audio controls preload="none" src="{$item->music->playUrl}"></audio>
 							{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: $info->detail->uniqueId, id: $item->id}