From 79f57e6a110ff9931876bffb1dd4ec0f8b474cae Mon Sep 17 00:00:00 2001
From: Ben Goldsworthy <admin@track.bengoldsworthy.net>
Date: Thu, 2 Mar 2023 17:10:55 -0500
Subject: [PATCH] Add icons to checkins to show media

---
 public/css/app.css                            |  8 +++
 .../views/partials/checkins-list.blade.php    | 67 ++++++++++++-------
 2 files changed, 50 insertions(+), 25 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index a21d377..d9af480 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -351,3 +351,11 @@ body {
     margin-top: 1em;
   }
 }
+
+.checkin-icon {
+  color: black;
+}
+
+.checkin-icon--missing {
+  opacity: 0.4;
+}
diff --git a/resources/views/partials/checkins-list.blade.php b/resources/views/partials/checkins-list.blade.php
index 69bb147..f18d5f3 100644
--- a/resources/views/partials/checkins-list.blade.php
+++ b/resources/views/partials/checkins-list.blade.php
@@ -1,35 +1,52 @@
 @foreach($checkinsList as $checkin)
     <li>
+        @php
+        $hasEmbed = null;
+        $embedMissing = null;
+        if (preg_match("/\[\[([^\]]+)\]\]/", $checkin->note, $filepath)) {
+          if (preg_match("/\.webm/", $filepath[1])) {
+              $hasEmbed = 'video';
+              if (file_exists(public_path() . "/videos/" . $filepath[1])) {
+                  $embed = '<video class="popup__video" controls>';
+                  $embed .= '<source src="' . url("/videos/" . $filepath[1]) . '" type="video/webm">';
+                  $embed .= '<p>Your browser doesn\'t support HTML video. Here is a <a href="' . url("/videos/" . $filepath[1]) . '">link to the video</a> instead.</p>';
+                  $embed .= '</video>'; 
+              } else {
+                  $embed = '<p>[The video \'' . $filepath[1] . '\' has not yet been uploaded, try again later.]</p>';
+                  $embedMissing = true;
+              }
+          } elseif (preg_match("/\.ogg/", $filepath[1])) {
+              $hasEmbed = 'audio';
+              if (file_exists(public_path() . "/audio/" . $filepath[1])) {
+                  $embed = '<audio class="popup__audio" controls>';
+                  $embed .= '<source src="' . url("/audio/" . $filepath[1]) . '" type="audio/ogg">';
+                  $embed .= '<p>Download <a href="' . url("/audio/" . $filepath[1]) . '">OGG</a> audio.</p>';
+                  $embed .= '</audio>'; 
+              } else {
+                  $embed = '<p>[The recording \'' . $filepath[1] . '\' has not yet been uploaded, try again later.]</p>';
+                  $embedMissing = true;
+              }
+          }
+          $checkin->note = preg_replace("/\[\[[^\]]+\]\]/", $embed, $checkin->note);
+        }
+        @endphp
         <details class="checkin" id="{{ $checkin->id }}" ontoggle="toggleCheckin(this.open, this.id)">
             <summary class="checkin__summary">
-                <h2 class="checkin__title">{!! $checkin->title ?? "<i>Untitled</i>" !!}</h2>
+                <h2 class="checkin__title">
+                  {!! $checkin->title ?? "<i>Untitled</i>" !!}
+                  @if($hasEmbed)
+                    @if($hasEmbed === 'video')
+                      <span class="checkin-icon @if($embedMissing) checkin-icon--missing @endif">&#128249;</span>                    
+                    @endif
+                    @if($hasEmbed === 'audio')
+                      <span class="checkin-icon @if($embedMissing) checkin-icon--missing @endif">&#128264;</span>                    
+                    @endif
+
+                  @endif
+                </h2>
                 <p class="checkin__meta">{!! render_date_difference($checkin->date) !!}</p>
             </summary>
             @if($checkin->note)
-              @php
-              if (preg_match("/\[\[([^\]]+)\]\]/", $checkin->note, $filepath)) {
-                if (preg_match("/\.webm/", $filepath[1])) {
-                    if (file_exists(public_path() . "/videos/" . $filepath[1])) {
-                        $embed = '<video class="popup__video" controls>';
-                        $embed .= '<source src="' . url("/videos/" . $filepath[1]) . '" type="video/webm">';
-                        $embed .= '<p>Your browser doesn\'t support HTML video. Here is a <a href="' . url("/videos/" . $filepath[1]) . '">link to the video</a> instead.</p>';
-                        $embed .= '</video>'; 
-                    } else {
-                        $embed = '<p>[The video \'' . $filepath[1] . '\' has not yet been uploaded, try again later.]</p>';
-                    }
-                } elseif (preg_match("/\.ogg/", $filepath[1])) {
-                    if (file_exists(public_path() . "/audio/" . $filepath[1])) {
-                        $embed = '<audio class="popup__audio" controls>';
-                        $embed .= '<source src="' . url("/audio/" . $filepath[1]) . '" type="audio/ogg">';
-                        $embed .= '<p>Download <a href="' . url("/audio/" . $filepath[1]) . '">OGG</a> audio.</p>';
-                        $embed .= '</audio>'; 
-                    } else {
-                        $embed = '<p>[The recording \'' . $filepath[1] . '\' has not yet been uploaded, try again later.]</p>';
-                    }
-                }
-                $checkin->note = preg_replace("/\[\[[^\]]+\]\]/", $embed, $checkin->note);
-              }
-              @endphp
 
               @if($checkin->id === 3930)
                 @include('partials.abolition-checkin')