Update views to show streaming links

app/views/anime/cover.php

@@ -11,7 +11,7 @@
 			<section class="media-wrap">
 				<?php foreach($items as $item): ?>
 				<?php if ($item['private'] && ! $auth->is_authenticated()) continue; ?>
-				<article class="media" id="<?= $item['id'] ?>" data-kitsu-id="<?= $item['id'] ?>" data-mal-id="<?= $item['mal_id'] ?>">
+				<article class="media" data-kitsu-id="<?= $item['id'] ?>" data-mal-id="<?= $item['mal_id'] ?>">
 					<?php if ($auth->is_authenticated()): ?>
 					<button title="Increment episode count" class="plus_one" hidden>+1 Episode</button>
 					<?php endif ?>
@@ -32,6 +32,7 @@
 							</span>
 						</div>
 						<?php endif ?>
+						
 						<?php if ($item['private'] || $item['rewatching']): ?>
 						<div class="row">
 							<?php foreach(['private', 'rewatching'] as $attr): ?>
@@ -41,11 +42,29 @@
 							<?php endforeach ?>
 						</div>
 						<?php endif ?>
+						
 						<?php if ($item['rewatched'] > 0): ?>
 						<div class="row">
 							<div>Rewatched <?= $item['rewatched'] ?> time(s)</div>
 						</div>
 						<?php endif ?>
+						
+						<?php if (count($item['anime']['streaming_links']) > 0): ?>
+						<div class="row">
+							<?php foreach($item['anime']['streaming_links'] as $link): ?>
+								<div class="cover_streaming_link">
+									<?php if($link['meta']['link']): ?>
+										<a href="<?= $link['link']?>">
+											<?= $link['meta']['logo'] ?>
+										</a>
+									<?php else: ?>
+										<?= $link['meta']['logo'] ?>
+									<?php endif ?>
+								</div>
+							<?php endforeach ?>
+						</div>
+						<?php endif ?>
+						
 						<div class="row">
 							<div class="user_rating">Rating: <?= $item['user_rating'] ?> / 10</div>
 							<div class="completion">Episodes:

app/views/anime/details.php

@@ -1,10 +1,10 @@
 <main class="details">
 	<section class="flex flex-no-wrap">
 		<div>
-			<img class="cover" src="<?= $data['cover_image'] ?>" alt="<?= $data['title'] ?> cover image" />
+			<img class="cover" src="<?= $data['cover_image'] ?>" alt="" />
 			<br />
 			<br />
-			<table>
+			<table class="media_details">
 				<tr>
 					<td class="align_right">Airing Status</td>
 					<td><?= $data['status'] ?></td>
@@ -42,7 +42,39 @@
             <?php endforeach ?>
 			<br />
 			<p><?= nl2br($data['synopsis']) ?></p>
-			<?php /*<pre><?= json_encode($data['included'], \JSON_PRETTY_PRINT) ?></pre> */ ?>
+			<?php if (count($data['streaming_links']) > 0): ?>
+			<hr />
+			<h4>Streaming on:</h4>
+			<table class="full_width invisible">
+				<thead>
+					<tr>
+						<th class="align_left">Service</th>
+						<th>Subtitles</th>
+						<th>Dubs</th>
+					</tr>
+				</thead>
+				<tbody>
+				<?php foreach($data['streaming_links'] as $streaming_link): ?>
+					<tr>
+						<td class="align_left">
+							<?php if ($streaming_link['meta']['link'] !== FALSE): ?>
+							<a href="<?= $streaming_link['link'] ?>">
+								<?= $streaming_link['meta']['logo'] ?>
+								&nbsp;&nbsp;<?= $streaming_link['meta']['name'] ?>
+							</a>
+							<?php else: ?>
+								<?= $streaming_link['meta']['logo'] ?>
+								&nbsp;&nbsp;<?= $streaming_link['meta']['name'] ?>
+							<?php endif ?>
+						</td>
+						<td><?= implode(', ', $streaming_link['subs']) ?></td>
+						<td><?= implode(', ', $streaming_link['dubs']) ?></td>
+					</tr>
+				<?php endforeach ?>
+				</tbody>
+			</table>
+			<?php endif ?>
+			<?php /*<pre><?= print_r($data, TRUE) ?></pre> */ ?>
 		</div>
 	</section>
 </main>

app/views/anime/edit.php

@@ -1,4 +1,5 @@
 <?php if ($auth->is_authenticated()): ?>
+    <?php /* <pre><?= json_encode($item, \JSON_PRETTY_PRINT); ?></pre> */ ?>
 	<main>
 		<h2>Edit Anime List Item</h2>
 		<form action="<?= $action ?>" method="post">

app/views/anime/list.php

@@ -19,7 +19,7 @@
 				<th>Type</th>
 				<th>Progress</th>
 				<th>Rated</th>
-				<th>Attributes</th>
+				<th colspan="2">Attributes</th>
 				<th>Notes</th>
 				<th>Genres</th>
 			</tr>
@@ -61,6 +61,17 @@
 					<?php endforeach ?>
                     </ul>
 				</td>
+				<td>
+					<?php foreach($item['anime']['streaming_links'] as $link): ?>
+						<?php if ($link['meta']['link'] !== FALSE): ?>
+							<a href="<?= $link['link'] ?>">
+								<?= $link['meta']['logo'] ?>
+							</a>
+						<?php else: ?>
+							<?= $link['meta']['logo'] ?>
+						<?php endif ?>
+					<?php endforeach ?>
+				</td>
 				<td>
 					<p><?= $escape->html($item['notes']) ?></p>
 				</td>

public/css/base.css

@@ -794,6 +794,10 @@ a:hover, a:active {
 	background-color:#db7d12;
 }
 
+.full_width {
+	width: 100%;
+}
+
 /* -----------------------------------------------------------------------------
 	CSS loading icon
 ------------------------------------------------------------------------------*/
@@ -1208,7 +1212,7 @@ a:hover, a:active {
 	text-align:center;
 	color: greenyellow;
 	position:absolute;
-	top:5px;
+	top:147px;
 	left:0;
 	height:100%;
 	width:100%;
@@ -1248,8 +1252,9 @@ a:hover, a:active {
 }
 
 .details .cover {
-	max-width: 300px;
+	display: block;
-	max-height: 435px;
+	width: 284px;
+	height: 402px;
 }
 
 .details h2 {
@@ -1261,11 +1266,11 @@ a:hover, a:active {
 	margin: 1rem;
 }
 
-.details table {
+.details .media_details {
 	max-width:300px;
 }
 
-.details td {
+.details .media_details td {
 		padding:0 15px;
 		padding:0 1.5rem;
 	}
@@ -1274,13 +1279,13 @@ a:hover, a:active {
 	text-align:justify;
 }
 
-.details td:nth-child(odd) {
+.details .media_details td:nth-child(odd) {
 	width:1%;
 	white-space:nowrap;
 	text-align:right;
 }
 
-.details td:nth-child(even) {
+.details .media_details td:nth-child(even) {
 	text-align:left;
 }
 

public/css/base.myth.css

@@ -115,6 +115,10 @@ a:hover, a:active {
 	background-color: var(--edit-link-hover-color);
 }
 
+.full_width {
+	width: 100%;
+}
+
 /* -----------------------------------------------------------------------------
 	CSS loading icon
 ------------------------------------------------------------------------------*/
@@ -471,7 +475,7 @@ a:hover, a:active {
 	text-align:center;
 	color: greenyellow;
 	position:absolute;
-	top:5px;
+	top:147px;
 	left:0;
 	height:100%;
 	width:100%;
@@ -505,8 +509,9 @@ a:hover, a:active {
 }
 
 .details .cover {
-	max-width: 300px;
+	display: block;
-	max-height: 435px;
+	width: 284px;
+	height: 402px;
 }
 
 .details h2 {
@@ -517,10 +522,10 @@ a:hover, a:active {
 	margin: 1rem;
 }
 
-.details table {
+.details .media_details {
 	max-width:300px;
 }
-	.details td {
+	.details .media_details td {
 		padding:0 1.5rem;
 	}
 
@@ -528,12 +533,12 @@ a:hover, a:active {
 	text-align:justify;
 }
 
-.details td:nth-child(odd) {
+.details .media_details td:nth-child(odd) {
 	width:1%;
 	white-space:nowrap;
 	text-align:right;
 }
-.details td:nth-child(even) {
+.details .media_details td:nth-child(even) {
 	text-align:left;
 }