Fix staff section on Anime detail pages, center unusually sized images instead of stretching them

app/views/anime/details.php

@@ -89,6 +89,7 @@
 	</section>
 
 	<?php if (count($characters) > 0): ?>
+	<br />
 	<hr />
 	<h2>Characters</h2>
 	<?php foreach($characters as $role => $list): ?>
@@ -112,5 +113,41 @@
 		<?php endif ?>
 	<?php endforeach ?>
 	</section>
+	<?php endforeach ?>
+	<?php endif ?>
+
+	<?php if (count($staff) > 0): ?>
+	<br />
+	<hr />
+	<h2>Staff</h2>
+
+	<?php foreach($staff as $role => $people): ?>
+		<h3><?= $role ?></h3>
+		<section class='media-wrap flex flex-wrap flex-justify-start'>
+		<?php foreach($people as $pid => $person): ?>
+			<article class='character person'>
+				<?php $link = $url->generate('person', ['id' => $pid]) ?>
+				<div class="name">
+					<a href="<?= $link ?>">
+						<?= $person['name'] ?>
+					</a>
+				</div>
+				<a href="<?= $link ?>">
+					<picture>
+						<source
+							srcset="<?= $urlGenerator->assetUrl("images/people/{$pid}.webp") ?>"
+							type="image/webp"
+						>
+						<source
+							srcset="<?= $urlGenerator->assetUrl("images/people/{$pid}.jpg") ?>"
+							type="image/jpeg"
+						>
+						<img src="<?= $urlGenerator->assetUrl("images/people/{$pid}.jpg") ?>" alt="" />
+					</picture>
+				</a>
+			</article>
+		<?php endforeach ?>
+		</section>
+	<?php endforeach ?>
 	<?php endif ?>
 </main>

app/views/character.php

@@ -43,7 +43,20 @@ use Aviat\AnimeClient\API\Kitsu;
 						$titles = Kitsu::filterTitles($anime['attributes']);
 					?>
 					<a href="<?= $link ?>">
-						<img src="<?= $urlGenerator->assetUrl("images/anime/{$id}.jpg") ?>" width="220" alt="" />
+						<picture>
+							<source
+								srcset="<?= $urlGenerator->assetUrl("images/anime/{$id}.webp") ?>"
+								type="image/webp"
+							>
+							<source
+								srcset="<?= $urlGenerator->assetUrl("images/anime/{$id}.jpg") ?>"
+								type="image/jpeg"
+							>
+							<img
+								src="<?= $urlGenerator->assetUrl("images/anime/{$id}.jpg") ?>"
+								alt=""
+							/>
+						</picture>
 					</a>
 					<div class="name">
 						<a href="<?= $link ?>">

app/views/manga/details.php

@@ -41,9 +41,13 @@
 	</section>
 
 	<?php if (count($characters) > 0): ?>
+		<br />
+		<hr />
 		<h2>Characters</h2>
+		<?php foreach ($characters as $role => $list): ?>
+			<h3><?= ucfirst($role) ?></h3>
 			<section class="media-wrap flex flex-wrap flex-justify-start">
-	<?php foreach($characters as $id => $char): ?>
+				<?php foreach ($list as $id => $char): ?>
 					<?php if ( ! empty($char['image']['original'])): ?>
 						<article class="character">
 							<?php $link = $url->generate('character', ['slug' => $char['slug']]) ?>
@@ -52,8 +56,14 @@
 							</div>
 							<a href="<?= $link ?>">
 								<picture>
-					<source srcset="<?= $urlGenerator->assetUrl("images/characters/{$id}.webp") ?>" type="image/webp">
+									<source
-					<source srcset="<?= $urlGenerator->assetUrl("images/characters/{$id}.jpg") ?>" type="image/jpeg">
+										srcset="<?= $urlGenerator->assetUrl("images/characters/{$id}.webp") ?>"
+										type="image/webp"
+									>
+									<source
+										srcset="<?= $urlGenerator->assetUrl("images/characters/{$id}.jpg") ?>"
+										type="image/jpeg"
+									>
 									<img src="<?= $urlGenerator->assetUrl("images/characters/{$id}.jpg") ?>" alt="" />
 								</picture>
 							</a>
@@ -61,5 +71,6 @@
 					<?php endif ?>
 				<?php endforeach ?>
 			</section>
+		<?php endforeach ?>
 	<?php endif ?>
 </main>

public/css/base.css

@@ -725,12 +725,23 @@ picture.cover {
 }
 
 .character,
-.small_character {
+.small_character,
+.person {
 	/* background: rgba(0,0,0,0.5); */
 	width: 225px;
 	height: 350px;
 	vertical-align: middle;
 	white-space: nowrap;
+	position: relative;
+}
+
+.person {
+	width: 225px;
+	height: 338px;
+}
+
+.character a {
+	height: 350px;
 }
 
 .character:hover .name,
@@ -753,12 +764,23 @@ picture.cover {
 }
 
 .small_character img,
-.character img {
+.character img,
-	position: relative;
+.small_character picture,
+.character picture,
+.person img,
+.person picture {
+	position: absolute;
 	top: 50%;
-	transform: translateY(-50%);
+	left: 50%;
+	transform: translate(-50%, -50%);
 	z-index: 5;
-	width: 100%;
+	max-height: 350px;
+	max-width: 225px;
+}
+
+.person img,
+.person picture {
+	max-height: 338px;
 }
 
 .min-table {

src/API/JsonAPI.php

@@ -324,13 +324,13 @@ final class JsonAPI {
 
 		foreach($relationships as $key => $data)
 		{
+			$organized[$key] = $organized[$key] ?? [];
+
 			if ( ! array_key_exists('data', $data))
 			{
 				continue;
 			}
 
-			$organized[$key] = $organized[$key] ?? [];
-
 			foreach ($data['data'] as $item)
 			{
 				if (\is_array($item) && array_key_exists('id', $item))

src/API/Kitsu/Model.php

@@ -966,10 +966,11 @@ final class Model {
 					'characters' => 'slug,name,image',
 					'mappings' => 'externalSite,externalId',
 					'animeCharacters' => 'character,role',
+					'mediaCharacters' => 'character,role',
 				],
 				'include' => ($type === 'anime')
 					? 'staff,staff.person,categories,mappings,streamingLinks,animeCharacters.character'
-					: 'staff,staff.person,categories,mappings,mangaCharacters.character',
+					: 'staff,staff.person,categories,mappings,characters.character',
 			]
 		];
 

src/Controller/Anime.php

@@ -309,31 +309,39 @@ final class Anime extends BaseController {
 
 		if (array_key_exists('mediaStaff', $data['included']))
 		{
-			foreach ($data['included']['mediaStaff'] as $id => $person)
+			foreach ($data['included']['mediaStaff'] as $id => $staffing)
 			{
-				$personId = $person['relationships']['person']['data']['id'];
+				$personId = $staffing['relationships']['person']['data']['id'];
 				$personDetails = $data['included']['people'][$personId];
 
-				$role = $person['role'];
+				$role = $staffing['role'];
 
 				if ( ! array_key_exists($role, $staff))
 				{
 					$staff[$role] = [];
 				}
 
-				$staff[$role][$id] = [
+				$staff[$role][$personId] = [
+					'id' => $personId,
 					'name' => $personDetails['name'] ?? '??',
 					'image' => $personDetails['image'],
 				];
 			}
 		}
 
+		if ( ! empty($characters['main']))
+		{
 			uasort($characters['main'], function ($a, $b) {
 				return $a['name'] <=> $b['name'];
 			});
+		}
+
+		if ( ! empty($characters['supporting']))
+		{
 			uasort($characters['supporting'], function ($a, $b) {
 				return $a['name'] <=> $b['name'];
 			});
+		}
 
 		ksort($characters);
 		ksort($staff);

src/Controller/Manga.php

@@ -294,11 +294,25 @@ final class Manga extends Controller {
 			return;
 		}
 
-		if (array_key_exists('characters', $data['included']))
+		// dd($data['included']);
+
+		if (array_key_exists('mediaCharacters', $data['included']))
 		{
-			foreach ($data['included']['characters'] as $id => $character)
+			$mediaCharacters = $data['included']['mediaCharacters'];
+
+			foreach ($mediaCharacters as $rel)
 			{
-				$characters[$id] = $character['attributes'];
+				// dd($rel);
+				// $charId = $rel['relationships']['character']['data']['id'];
+				$role = $rel['attributes']['role'];
+
+				foreach($rel['relationships']['character']['characters'] as $charId => $char)
+				{
+					if (array_key_exists($charId, $data['included']['characters']))
+					{
+						$characters[$role][$charId] = $char['attributes'];
+					}
+				}
 			}
 		}
 
@@ -326,11 +340,22 @@ final class Manga extends Controller {
 			}
 		}
 
-		uasort($characters, function ($a, $b) {
+		if ( ! empty($characters['main']))
+		{
+			uasort($characters['main'], function ($a, $b) {
 				return $a['name'] <=> $b['name'];
 			});
+		}
 
-		// dump($staff);
+		if ( ! empty($characters['supporting']))
+		{
+			uasort($characters['supporting'], function ($a, $b) {
+				return $a['name'] <=> $b['name'];
+			});
+		}
+
+		ksort($characters);
+		ksort($staff);
 
 		$this->outputHTML('manga/details', [
 			'title' => $this->formatTitle(