Added tmdb request and image proxies

public/logos/imdb.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 575 289.83" width="575" height="289.83"><defs><path d="M575 24.91C573.44 12.15 563.97 1.98 551.91 0C499.05 0 76.18 0 23.32 0C10.11 2.17 0 14.16 0 28.61C0 51.84 0 237.64 0 260.86C0 276.86 12.37 289.83 27.64 289.83C79.63 289.83 495.6 289.83 547.59 289.83C561.65 289.83 573.26 278.82 575 264.57C575 216.64 575 48.87 575 24.91Z" id="d1pwhf9wy2"></path><path d="M69.35 58.24L114.98 58.24L114.98 233.89L69.35 233.89L69.35 58.24Z" id="g5jjnq26yS"></path><path d="M201.2 139.15C197.28 112.38 195.1 97.5 194.67 94.53C192.76 80.2 190.94 67.73 189.2 57.09C185.25 57.09 165.54 57.09 130.04 57.09L130.04 232.74L170.01 232.74L170.15 116.76L186.97 232.74L215.44 232.74L231.39 114.18L231.54 232.74L271.38 232.74L271.38 57.09L211.77 57.09L201.2 139.15Z" id="i3Prh1JpXt"></path><path d="M346.71 93.63C347.21 95.87 347.47 100.95 347.47 108.89C347.47 115.7 347.47 170.18 347.47 176.99C347.47 188.68 346.71 195.84 345.2 198.48C343.68 201.12 339.64 202.43 333.09 202.43C333.09 190.9 333.09 98.66 333.09 87.13C338.06 87.13 341.45 87.66 343.25 88.7C345.05 89.75 346.21 91.39 346.71 93.63ZM367.32 230.95C372.75 229.76 377.31 227.66 381.01 224.67C384.7 221.67 387.29 217.52 388.77 212.21C390.26 206.91 391.14 196.38 391.14 180.63C391.14 174.47 391.14 125.12 391.14 118.95C391.14 102.33 390.49 91.19 389.48 85.53C388.46 79.86 385.93 74.71 381.88 70.09C377.82 65.47 371.9 62.15 364.12 60.13C356.33 58.11 343.63 57.09 321.54 57.09C319.27 57.09 307.93 57.09 287.5 57.09L287.5 232.74L342.78 232.74C355.52 232.34 363.7 231.75 367.32 230.95Z" id="a4ov9rRGQm"></path><path d="M464.76 204.7C463.92 206.93 460.24 208.06 457.46 208.06C454.74 208.06 452.93 206.98 452.01 204.81C451.09 202.65 450.64 197.72 450.64 190C450.64 185.36 450.64 148.22 450.64 143.58C450.64 135.58 451.04 130.59 451.85 128.6C452.65 126.63 454.41 125.63 457.13 125.63C459.91 125.63 463.64 126.76 464.6 129.03C465.55 131.3 466.03 136.15 466.03 143.58C466.03 146.58 466.03 161.58 466.03 188.59C465.74 197.84 465.32 203.21 464.76 204.7ZM406.68 231.21L447.76 231.21C449.47 224.5 450.41 220.77 450.6 220.02C454.32 224.52 458.41 227.9 462.9 230.14C467.37 232.39 474.06 233.51 479.24 233.51C486.45 233.51 492.67 231.62 497.92 227.83C503.16 224.05 506.5 219.57 507.92 214.42C509.34 209.26 510.05 201.42 510.05 190.88C510.05 185.95 510.05 146.53 510.05 141.6C510.05 131 509.81 124.08 509.34 120.83C508.87 117.58 507.47 114.27 505.14 110.88C502.81 107.49 499.42 104.86 494.98 102.98C490.54 101.1 485.3 100.16 479.26 100.16C474.01 100.16 467.29 101.21 462.81 103.28C458.34 105.35 454.28 108.49 450.64 112.7C450.64 108.89 450.64 89.85 450.64 55.56L406.68 55.56L406.68 231.21Z" id="fk968BpsX"></path></defs><g><g><g><use xlink:href="#d1pwhf9wy2" opacity="1" fill="#f6c700" fill-opacity="1"></use><g><use xlink:href="#d1pwhf9wy2" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#g5jjnq26yS" opacity="1" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#g5jjnq26yS" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#i3Prh1JpXt" opacity="1" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#i3Prh1JpXt" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#a4ov9rRGQm" opacity="1" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#a4ov9rRGQm" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#fk968BpsX" opacity="1" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#fk968BpsX" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></g></svg>

public/logos/tmdb.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 185.04 133.4"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" y1="66.7" x2="185.04" y2="66.7" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#90cea1"/><stop offset="0.56" stop-color="#3cbec9"/><stop offset="1" stop-color="#00b3e5"/></linearGradient></defs><title>Asset 4</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M51.06,66.7h0A17.67,17.67,0,0,1,68.73,49h-.1A17.67,17.67,0,0,1,86.3,66.7h0A17.67,17.67,0,0,1,68.63,84.37h.1A17.67,17.67,0,0,1,51.06,66.7Zm82.67-31.33h32.9A17.67,17.67,0,0,0,184.3,17.7h0A17.67,17.67,0,0,0,166.63,0h-32.9A17.67,17.67,0,0,0,116.06,17.7h0A17.67,17.67,0,0,0,133.73,35.37Zm-113,98h63.9A17.67,17.67,0,0,0,102.3,115.7h0A17.67,17.67,0,0,0,84.63,98H20.73A17.67,17.67,0,0,0,3.06,115.7h0A17.67,17.67,0,0,0,20.73,133.37Zm83.92-49h6.25L125.5,49h-8.35l-8.9,23.2h-.1L99.4,49H90.5Zm32.45,0h7.8V49h-7.8Zm22.2,0h24.95V77.2H167.1V70h15.35V62.8H167.1V56.2h16.25V49h-24ZM10.1,35.4h7.8V6.9H28V0H0V6.9H10.1ZM39,35.4h7.8V20.1H61.9V35.4h7.8V0H61.9V13.2H46.75V0H39Zm41.25,0h25V28.2H88V21h15.35V13.8H88V7.2h16.25V0h-24Zm-79,49H9V57.25h.1l9,27.15H24l9.3-27.15h.1V84.4h7.8V49H29.45l-8.2,23.1h-.1L13,49H1.2Zm112.09,49H126a24.59,24.59,0,0,0,7.56-1.15,19.52,19.52,0,0,0,6.35-3.37,16.37,16.37,0,0,0,4.37-5.5A16.91,16.91,0,0,0,146,115.8a18.5,18.5,0,0,0-1.68-8.25,15.1,15.1,0,0,0-4.52-5.53A18.55,18.55,0,0,0,133.07,99,33.54,33.54,0,0,0,125,98H113.29Zm7.81-28.2h4.6a17.43,17.43,0,0,1,4.67.62,11.68,11.68,0,0,1,3.88,1.88,9,9,0,0,1,2.62,3.18,9.87,9.87,0,0,1,1,4.52,11.92,11.92,0,0,1-1,5.08,8.69,8.69,0,0,1-2.67,3.34,10.87,10.87,0,0,1-4,1.83,21.57,21.57,0,0,1-5,.55H121.1Zm36.14,28.2h14.5a23.11,23.11,0,0,0,4.73-.5,13.38,13.38,0,0,0,4.27-1.65,9.42,9.42,0,0,0,3.1-3,8.52,8.52,0,0,0,1.2-4.68,9.16,9.16,0,0,0-.55-3.2,7.79,7.79,0,0,0-1.57-2.62,8.38,8.38,0,0,0-2.45-1.85,10,10,0,0,0-3.18-1v-.1a9.28,9.28,0,0,0,4.43-2.82,7.42,7.42,0,0,0,1.67-5,8.34,8.34,0,0,0-1.15-4.65,7.88,7.88,0,0,0-3-2.73,12.9,12.9,0,0,0-4.17-1.3,34.42,34.42,0,0,0-4.63-.32h-13.2Zm7.8-28.8h5.3a10.79,10.79,0,0,1,1.85.17,5.77,5.77,0,0,1,1.7.58,3.33,3.33,0,0,1,1.23,1.13,3.22,3.22,0,0,1,.47,1.82,3.63,3.63,0,0,1-.42,1.8,3.34,3.34,0,0,1-1.13,1.2,4.78,4.78,0,0,1-1.57.65,8.16,8.16,0,0,1-1.78.2H165Zm0,14.15h5.9a15.12,15.12,0,0,1,2.05.15,7.83,7.83,0,0,1,2,.55,4,4,0,0,1,1.58,1.17,3.13,3.13,0,0,1,.62,2,3.71,3.71,0,0,1-.47,1.95,4,4,0,0,1-1.23,1.3,4.78,4.78,0,0,1-1.67.7,8.91,8.91,0,0,1-1.83.2h-7Z"/></g></g></svg>

src/components/ImageWithFallback.vue

@@ -18,7 +18,7 @@ const imageSource = computed(() => {
   if (!props.src) {
     return ''
   }
-  return `https://image.tmdb.org/t/p/${props.size}${props.src}`
+  return `https://6909aa3d0001d5d30ff1.fra.appwrite.run/t/p/${props.size}${props.src}` // Image proxy
 })
 </script>
 

src/components/MediaTypeBadge.vue

@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 <template>
   <span
-    :class="`px-3 py-1 rounded-md text-sm bg-linear-to-r from-gray-100 to-gray-200 ${type ? 'badge-' + type : ''} text-gray-700 border border-gray-300`"
+    :class="`flex items-center w-max px-3 py-1 rounded-md text-sm bg-linear-to-r from-gray-100 to-gray-200 ${type ? 'badge-' + type : ''} text-gray-700 border border-gray-300`"
   >
     {{ props.text }}
   </span>

src/components/MovieDetails.vue

@@ -29,7 +29,7 @@ const alreadyAdded = computed(() =>
       :src="props.movie!.PosterPath"
       alt="Poster"
       size="w500"
-      class="shrink-0 w-full max-w-sm rounded-lg shadow-lg transform transition-transform duration-500 hover:scale-105"
+      class="shrink-0 w-full max-w-sm rounded-lg shadow-lg transform transition-transform duration-500 hover:scale-101"
     />
 
     <!-- Text -->
@@ -45,14 +45,68 @@ const alreadyAdded = computed(() =>
         {{ props.movie!.Tagline }}
       </p>
 
-      <p class="text-gray-600 leading-relaxed mb-6">
+      <p class="text-accent leading-relaxed mb-6">
         {{ props.movie!.Overview }}
       </p>
 
       <!-- Badges -->
       <div class="flex flex-wrap gap-2 mb-6">
         <MediaTypeBadge v-for="g in props.movie!.Genres" :key="g.id" :text="g.name" />
-        <MediaTypeBadge :text="`Runtime: ${props.movie!.Runtime} min`" />
+      </div>
+
+      <div class="card bg-base-200 w-full lg:w-96 shadow-sm mb-6 mt-6">
+        <div class="card-body">
+          <p class="font-semibold text-gray-900">
+            Runtime: <span class="text-gray-600">{{ props.movie!.Runtime }} minutes</span>
+          </p>
+          <p class="font-semibold text-gray-900">
+            Language:
+            <span class="text-gray-600">{{ props.movie!.SpokenLanguages[0]?.englishName }}</span>
+          </p>
+          <p class="font-semibold text-gray-900">
+            Release Date:
+            <time
+              class="text-sm font-semibold text-gray-600"
+              :datetime="
+                props.movie!.ReleaseDate === ''
+                  ? 'unknown'
+                  : new Date(props.movie!.ReleaseDate).toISOString()
+              "
+            >
+              {{
+                props.movie!.ReleaseDate === ''
+                  ? 'unknown'
+                  : new Intl.DateTimeFormat('default', {
+                      year: 'numeric',
+                      month: 'long',
+                      day: 'numeric',
+                    }).format(new Date(props.movie!.ReleaseDate))
+              }}
+            </time>
+          </p>
+          <div class="card-actions justify-start mt-2 gap-3">
+            <!-- TMDB button -->
+            <a
+              :href="`https://www.themoviedb.org/movie/${props.movie?.Id}`"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="btn btn-square btn-md bg-accent border-none"
+            >
+              <img src="/logos/tmdb.svg" alt="TMDB" class="m-0.5" />
+            </a>
+
+            <!-- IMDB button -->
+            <a
+              v-if="props.movie?.ImdbId"
+              :href="`https://www.imdb.com/title/${props.movie.ImdbId}`"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="btn btn-square btn-md bg-[#f5c518] border-none"
+            >
+              <img src="/logos/imdb.svg" alt="IMDB" class="m-0.5" />
+            </a>
+          </div>
+        </div>
       </div>
 
       <!-- Actions -->
@@ -60,17 +114,43 @@ const alreadyAdded = computed(() =>
         <template v-if="props.movie && props.media">
           <button
             v-if="!alreadyAdded"
-            class="btn px-6 bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300"
+            class="btn btn-square bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300"
             @click="store.addMedia(props.media)"
           >
-            Add to list
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="size-6"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z"
+              />
+            </svg>
           </button>
           <button
             v-else
-            class="btn px-6 bg-linear-to-r from-red-50 to-red-100 border border-red-200 text-red-600 hover:from-red-100 hover:to-red-200"
+            class="btn btn-square bg-linear-to-r from-red-50 to-red-100 border border-red-200 text-red-600 hover:from-red-100 hover:to-red-200"
             @click="store.removeMedia(props.media.Id)"
           >
-            Remove from library
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="size-6"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="m3 3 1.664 1.664M21 21l-1.5-1.5m-5.485-1.242L12 17.25 4.5 21V8.742m.164-4.078a2.15 2.15 0 0 1 1.743-1.342 48.507 48.507 0 0 1 11.186 0c1.1.128 1.907 1.077 1.907 2.185V19.5M4.664 4.664 19.5 19.5"
+              />
+            </svg>
           </button>
         </template>
 

src/components/TVSeriesDetails.vue

@@ -29,7 +29,7 @@ const alreadyAdded = computed(() =>
       :src="props.tvSeries!.PosterPath"
       alt="Poster"
       size="w500"
-      class="shrink-0 w-full max-w-sm rounded-lg shadow-lg transform transition-transform duration-500 hover:scale-105"
+      class="shrink-0 w-full max-w-sm rounded-lg shadow-lg transform transition-transform duration-500 hover:scale-101"
     />
 
     <!-- Text -->
@@ -45,7 +45,7 @@ const alreadyAdded = computed(() =>
         {{ props.tvSeries!.Tagline }}
       </p>
 
-      <p class="text-gray-600 leading-relaxed mb-6">
+      <p class="text-accent leading-relaxed mb-6">
         {{ props.tvSeries!.Overview }}
       </p>
 
@@ -56,26 +56,108 @@ const alreadyAdded = computed(() =>
         <MediaTypeBadge :text="`Episodes: ${props.tvSeries!.NumberOfEpisodes}`" />
       </div>
 
+      <div class="card bg-base-200 w-full lg:w-96 shadow-sm mb-6 mt-6">
+        <div class="card-body">
+          <p class="font-semibold text-gray-900">
+            Last Episode:
+            <span class="text-gray-600">{{ props.tvSeries!.LastEpisodeToAir?.name }}</span>
+          </p>
+          <p class="font-semibold text-gray-900">
+            Language:
+            <span class="text-gray-600">{{ props.tvSeries!.SpokenLanguages[0]?.englishName }}</span>
+          </p>
+          <p class="font-semibold text-gray-900">
+            First Air Date:
+            <time
+              class="text-sm font-semibold text-gray-600"
+              :datetime="
+                props.tvSeries!.FirstAirDate === ''
+                  ? 'unknown'
+                  : new Date(props.tvSeries!.FirstAirDate).toISOString()
+              "
+            >
+              {{
+                props.tvSeries!.FirstAirDate === ''
+                  ? 'unknown'
+                  : new Intl.DateTimeFormat('default', {
+                      year: 'numeric',
+                      month: 'long',
+                      day: 'numeric',
+                    }).format(new Date(props.tvSeries!.FirstAirDate))
+              }}
+            </time>
+          </p>
+          <div class="card-actions justify-start mt-2 gap-3">
+            <!-- TMDB button -->
+            <a
+              :href="`https://www.themoviedb.org/tv/${props.tvSeries?.Id}`"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="btn btn-square btn-md bg-accent border-none"
+            >
+              <img src="/logos/tmdb.svg" alt="TMDB" class="m-0.5" />
+            </a>
+
+            <!-- IMDB button -->
+            <a
+              v-if="props.tvSeries?.Homepage"
+              :href="props.tvSeries.Homepage"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="btn btn-square btn-md bg-[#f5c518] border-none"
+            >
+              <img src="/logos/imdb.svg" alt="IMDB" class="m-0.5" />
+            </a>
+          </div>
+        </div>
+      </div>
+
       <!-- Actions -->
       <div class="card-actions" v-auto-animate>
         <template v-if="props.tvSeries && props.media">
           <button
             v-if="!alreadyAdded"
-            class="btn px-6 bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300"
+            class="btn btn-square bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300"
             @click="store.addMedia(props.media)"
           >
-            Add to list
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="size-6"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z"
+              />
+            </svg>
           </button>
           <button
             v-else
-            class="btn px-6 bg-linear-to-r from-red-50 to-red-100 border border-red-200 text-red-600 hover:from-red-100 hover:to-red-200"
+            class="btn btn-square bg-linear-to-r from-red-50 to-red-100 border border-red-200 text-red-600 hover:from-red-100 hover:to-red-200"
             @click="store.removeMedia(props.media.Id)"
           >
-            Remove from library
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="size-6"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="m3 3 1.664 1.664M21 21l-1.5-1.5m-5.485-1.242L12 17.25 4.5 21V8.742m.164-4.078a2.15 2.15 0 0 1 1.743-1.342 48.507 48.507 0 0 1 11.186 0c1.1.128 1.907 1.077 1.907 2.185V19.5M4.664 4.664 19.5 19.5"
+              />
+            </svg>
           </button>
         </template>
 
-        <!-- <RouterLink
+        <RouterLink
           :to="{
             name: 'watch',
             params: {
@@ -102,7 +184,7 @@ const alreadyAdded = computed(() =>
             <span>Watch</span>
             <span class="badge badge-sm badge-secondary absolute -top-2 -right-2">Beta</span>
           </button>
-        </RouterLink> -->
+        </RouterLink>
       </div>
     </div>
   </div>

src/lib/api.ts

@@ -8,15 +8,11 @@ import type { TvSeriesDetailsType } from '@/types/TvSeries'
 import { mapTvSeriesDetails } from '@/types/TvSeriesMap'
 import axios from 'axios'
 
-const TMDB_READ_API_KEY =
-  'eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIzZjY3MDNmM2UyYTBiMmI0MGZlNGZiYjNlMTU0NjI0NCIsIm5iZiI6MTc2MDU3NDcwNi45MjQsInN1YiI6IjY4ZjAzY2YyNGZmNGM0NjI1NmM3N2EyNyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.HHReb_7Oue_o1wkgH2mmbCgdMJ8buFfRdCtwQqj_1Us' // This is a read only key and I dont see the need for hiding it, ONLY IN THIS PARTICULAR CASE
-
 const instance = axios.create({
-  baseURL: 'https://api.themoviedb.org/3',
+  baseURL: 'https://6909aa3d0001d5d30ff1.fra.appwrite.run/3',
   timeout: 6969,
   headers: {
-    'Content-Type': 'application/json',
-    Authorization: `Bearer ${TMDB_READ_API_KEY}`,
+    'Content-Type': 'application/json'
   },
 })