Update more views to use images directly from Kitsu

app/templates/anime-cover.php

@@ -6,7 +6,7 @@
 	<?php if ($auth->isAuthenticated()): ?>
 		<button title="Increment episode count" class="plus-one" hidden>+1 Episode</button>
 	<?php endif ?>
-	<?= $helper->picture($item['anime']['cover_image'], '.jpg', ['width' => 220], ['width' => 220]) ?>
+	<?= $helper->img($item['anime']['cover_image'], ['width' => 220, 'loading' => 'lazy']) ?>
 
 	<div class="name">
 		<a href="<?= $url->generate('anime.details', ['id' => $item['anime']['slug']]) ?>">

app/templates/manga-cover.php

@@ -4,7 +4,7 @@
 			<button class="plus-one-chapter">+1 Chapter</button>
 		</div>
 	<?php endif ?>
-	<?= $helper->picture("images/manga/{$item['manga']['id']}.webp") ?>
+	<?= $helper->img($item['manga']['image'], ['width' => 220, 'loading' => 'lazy']) ?>
 	<div class="name">
 		<a href="<?= $url->generate('manga.details', ['id' => $item['manga']['slug']]) ?>">
 			<?= $escape->html($item['manga']['title']) ?>

app/views/anime/details.php

@@ -7,7 +7,7 @@ use function Aviat\AnimeClient\getLocalImg;
 <main class="details fixed">
 	<section class="flex" unselectable>
 		<aside class="info">
-			<?= $helper->picture($data['cover_image'], '.jpg', ['width' => '390'], ['width' => '390']) ?>
+			<?= $helper->img($data['cover_image'], ['width' => '390']) ?>
 
 			<br />
 

app/views/anime/edit.php

@@ -16,7 +16,7 @@
 				<tbody>
 					<tr>
 						<td rowspan="9">
-							<?= $helper->picture($item['anime']['cover_image'], "jpg", [], ["width" => "390"]) ?>
+							<?= $helper->img($item['anime']['cover_image'], ["width" => "390"]) ?>
 						</td>
 					</tr>
 					<tr>

app/views/character/details.php

@@ -7,7 +7,7 @@ use Aviat\AnimeClient\Kitsu;
 <main class="character-page details fixed">
 	<section class="flex flex-no-wrap">
 		<aside>
-			<?= $helper->picture("images/characters/{$data['id']}-original.webp") ?>
+			<?= $helper->img($data['image']) ?>
 		</aside>
 		<div>
 			<h2 class="toph"><?= $data['name'] ?></h2>

app/views/manga/details.php

@@ -1,7 +1,7 @@
 <main class="details fixed">
 	<section class="flex flex-no-wrap">
 		<aside class="info">
-			<?= $helper->picture("images/manga/{$data['id']}-original.webp", 'jpg', ['class' => 'cover']) ?>
+			<?= $helper->img($data['cover_image'], ['class' => 'cover', 'width' => '350']) ?>
 
 			<br />
 

app/views/manga/edit.php

@@ -18,7 +18,7 @@
 				<tbody>
 				<tr>
 					<td rowspan="9">
-						<?= $helper->picture("images/manga/{$item['manga']['id']}-original.webp", "jpg", [], ["width" => "390"]) ?>
+						<?= $helper->image($item['manga']['image'], ["width" => "390"]) ?>
 					</td>
 				</tr>
 				<tr>

app/views/person/details.php

@@ -4,7 +4,7 @@ use function Aviat\AnimeClient\getLocalImg;
 <main class="details fixed">
 	<section class="flex flex-no-wrap">
 		<div>
-			<?= $helper->picture("images/people/{$data['id']}-original.webp", 'jpg', ['class' => 'cover' ]) ?>
+			<?= $helper->img($data['image'], ['class' => 'cover' ]) ?>
 		</div>
 		<div>
 			<h2 class="toph"><?= $data['name'] ?></h2>
@@ -40,7 +40,7 @@ use function Aviat\AnimeClient\getLocalImg;
 									<?= $component->media(
 											$series['titles'],
 											$url->generate("{$mediaType}.details", ['id' => $series['slug']]),
-											$helper->picture("images/{$type}/{$sid}.webp")
+											$helper->img($series['image'], ['width' => 220])
 									) ?>
 								<?php endforeach; ?>
 							</section>
@@ -69,7 +69,7 @@ use function Aviat\AnimeClient\getLocalImg;
 						$medias[] = $component->media(
 							$series['titles'],
 							$url->generate('anime.details', ['id' => $series['slug']]),
-							$helper->picture("images/anime/{$sid}.webp")
+							$helper->img($series['image'], ['width' => 220])
 						);
 					}
 					$media = implode('', array_map('mb_trim', $medias));

frontEndSrc/js/base/sort-tables.js

@@ -9,8 +9,8 @@ const LightTableSorter = (() => {
 		console.log("Comparing " + textA + " and " + textB)
 
 		if(th.classList.contains("numeric")){
-			arrayA = textA.replace('episodes:  ','').replace('-',0).split("/");
+			let arrayA = textA.replace('episodes:  ','').replace('-',0).split("/");
-			arrayB = textB.replace('episodes:  ','').replace('-',0).split("/");
+			let arrayB = textB.replace('episodes:  ','').replace('-',0).split("/");
 			if(arrayA.length > 1) {
 				textA = parseInt(arrayA[0],10) / parseInt(arrayA[1],10);
 				textB = parseInt(arrayB[0],10) / parseInt(arrayB[1],10);

frontEndSrc/js/template-helpers.js

@@ -58,9 +58,7 @@ export function renderSearchResults (type, data, isCollection = false) {
 					<input type="radio" class="mal-check" id="mal_${item.slug}" name="mal_id" value="${item.mal_id}" ${disabled} />
 					<input type="radio" class="big-check" id="${item.slug}" name="id" value="${item.id}" ${disabled} />
 					<label for="${item.slug}">
-						<picture width="220">
+						<img src="${item.coverImage}" alt="" width="220" />
-							<img src="${item.coverImage}" alt="" width="220" />
-						</picture>
 						<span class="name">
 							${item.canonicalTitle}<br />
 							<small>${titles}</small>

public/js/tables.min.js

@@ -1 +1 @@
-var LightTableSorter=function(){var th=null;var cellIndex=null;var order='';var text=function(row){return row.cells.item(cellIndex).textContent.toLowerCase()};var sort=function(a,b){var textA=text(a);var textB=text(b);console.log("Comparing "+textA+" and "+textB);if(th.classList.contains("numeric")){arrayA=textA.replace('episodes:  ','').replace('-',0).split("/");arrayB=textB.replace('episodes:  ','').replace('-',0).split("/");if(arrayA.length>1){textA=parseInt(arrayA[0],10)/parseInt(arrayA[1],10);textB=parseInt(arrayB[0],10)/parseInt(arrayB[1],10)}else{textA=parseInt(arrayA[0],10);textB=parseInt(arrayB[0],10)}}else if(parseInt(textA,10)){textA=parseInt(textA,10);textB=parseInt(textB,10)}if(textA>textB)return 1;if(textA<textB)return -1;return 0};var toggle=function(){var c=order!=='sorting-asc'?'sorting-asc':'sorting-desc';th.className=(th.className.replace(order,'')+' '+c).trim();return order=c};var reset=function(){th.classList.remove('sorting-asc','sorting-desc');th.classList.add('sorting');return order=''};var onClickEvent=function(e){if(th&&cellIndex!==e.target.cellIndex)reset();th=e.target;if(th.nodeName.toLowerCase()==='th'){cellIndex=th.cellIndex;var tbody=th.offsetParent.getElementsByTagName('tbody')[0];var rows=Array.from(tbody.rows);if(rows){rows.sort(sort);if(order==='sorting-asc')rows.reverse();toggle();tbody.innerHtml='';rows.forEach(function(row){tbody.appendChild(row)})}}};return{init:function(){var ths=document.getElementsByTagName('th');var results=[];for(var i=0,len=ths.length;i<len;i++){var th=ths[i];th.classList.add('sorting');th.classList.add('testing');results.push(th.onclick=onClickEvent)}return results}}}();LightTableSorter.init()
+var LightTableSorter=function(){var th=null;var cellIndex=null;var order='';var text=function(row){return row.cells.item(cellIndex).textContent.toLowerCase()};var sort=function(a,b){var textA=text(a);var textB=text(b);console.log("Comparing "+textA+" and "+textB);if(th.classList.contains("numeric")){var arrayA=textA.replace('episodes:  ','').replace('-',0).split("/");var arrayB=textB.replace('episodes:  ','').replace('-',0).split("/");if(arrayA.length>1){textA=parseInt(arrayA[0],10)/parseInt(arrayA[1],10);textB=parseInt(arrayB[0],10)/parseInt(arrayB[1],10)}else{textA=parseInt(arrayA[0],10);textB=parseInt(arrayB[0],10)}}else if(parseInt(textA,10)){textA=parseInt(textA,10);textB=parseInt(textB,10)}if(textA>textB)return 1;if(textA<textB)return -1;return 0};var toggle=function(){var c=order!=='sorting-asc'?'sorting-asc':'sorting-desc';th.className=(th.className.replace(order,'')+' '+c).trim();return order=c};var reset=function(){th.classList.remove('sorting-asc','sorting-desc');th.classList.add('sorting');return order=''};var onClickEvent=function(e){if(th&&cellIndex!==e.target.cellIndex)reset();th=e.target;if(th.nodeName.toLowerCase()==='th'){cellIndex=th.cellIndex;var tbody=th.offsetParent.getElementsByTagName('tbody')[0];var rows=Array.from(tbody.rows);if(rows){rows.sort(sort);if(order==='sorting-asc')rows.reverse();toggle();tbody.innerHtml='';rows.forEach(function(row){tbody.appendChild(row)})}}};return{init:function(){var ths=document.getElementsByTagName('th');var results=[];for(var i=0,len=ths.length;i<len;i++){var th=ths[i];th.classList.add('sorting');th.classList.add('testing');results.push(th.onclick=onClickEvent)}return results}}}();LightTableSorter.init()

src/AnimeClient/API/Kitsu/Transformer/CharacterTransformer.php

@@ -58,6 +58,7 @@ final class CharacterTransformer extends AbstractTransformer {
 			'castings' => $castings,
 			'description' => $data['description']['en'],
 			'id' => $data['id'],
+			'image' => $data['image']['original']['url'] ?? 'images/placeholder.png',
 			'media' => $media,
 			'name' => $name,
 			'names' => $names,

src/AnimeClient/API/Kitsu/Transformer/PersonTransformer.php

@@ -41,6 +41,7 @@ final class PersonTransformer extends AbstractTransformer {
 		return Person::from([
 			'id' => $data['id'],
 			'name' => $canonicalName,
+			'image' => $data['image']['original']['url'],
 			'names' => array_diff($data['names']['localized'], [$canonicalName]),
 			'description' => $data['description']['en'] ?? '',
 			'characters' => $orgData['characters'],
@@ -83,9 +84,7 @@ final class PersonTransformer extends AbstractTransformer {
 					'id' => $media['id'],
 					'title' => $title,
 					'titles' => array_merge([$title], Kitsu::getFilteredTitles($media['titles'])),
-					'image' => [
+					'image' => Kitsu::getPosterImage($media),
-						'original' => Kitsu::getPosterImage($media)
-					],
 					'slug' => $media['slug'],
 				];
 
@@ -124,9 +123,7 @@ final class PersonTransformer extends AbstractTransformer {
 						'character' => [
 							'id' => $character['id'],
 							'slug' => $character['slug'],
-							'image' => [
+							'image' => Kitsu::getPosterImage($character),
-								'original' => $character['image']['original']['url'] ?? '',
-							],
 							'canonicalName' => $character['names']['canonical'],
 						],
 						'media' => [

src/AnimeClient/Kitsu.php

@@ -345,9 +345,13 @@ final class Kitsu {
 	 */
 	public static function getPosterImage(array $base, int $size = 1): string
 	{
-		return $base['posterImage']['views'][$size]['url']
+		$rawUrl =  $base['posterImage']['views'][$size]['url']
 			?? $base['posterImage']['original']['url']
 			?? '/public/images/placeholder.png';
+
+		$parts = explode('?', $rawUrl);
+
+		return ( ! empty($parts)) ? $parts[0] : $rawUrl;
 	}
 
 	/**

src/AnimeClient/Types/Character.php

@@ -28,6 +28,8 @@ final class Character extends AbstractType {
 
 	public ?Media $media;
 
+	public string $image;
+
 	public ?string $name;
 
 	public array $names = [];

src/AnimeClient/Types/Person.php

@@ -25,6 +25,8 @@ final class Person extends AbstractType {
 
 	public ?string $name;
 
+	public string $image;
+
 	public array $names = [];
 
 	public ?string $description;