Merge pull request #74 from bhavya32/yt_speedload

YouTube Embeds And Styling Improvement
SundarbansWebOps · Sep 16, 2024 · 7c36541 · 7c36541 · vercel · Sep 16, 2024
2 parents 9dcaf21 + 7b0b728
commit 7c36541
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 86 deletions.
diff --git a/public/index.html b/public/index.html
@@ -75,9 +75,9 @@
             <!-- Chennai, Tamil Nadu, India - 600036 -->
           </p>
         </div>
-        <div>
+   <!-- <div>
           <a href="https://www.freecounterstat.com" title="website counter"><img src="https://counter8.optistats.ovh/private/freecounterstat.php?c=kpjrmmec7ej82depy5xffy9xf1k5gt5s" border="0" title="website counter" alt="website counter"></a>
-        </div>
+        </div> -->
 
         <div class="flex -mx-2">
           <!-- Instagram -->

diff --git a/src/components/ClubPage.vue b/src/components/ClubPage.vue
@@ -1,7 +1,7 @@
 <template>
   <NavBar />
 
-  <body class=" dark:bg-black">
+  <body class="dark:bg-black flex-grow">
     <section
       v-if="access"
       class="container px-4 mx-auto"

diff --git a/src/components/EventsPage.vue b/src/components/EventsPage.vue
@@ -1,7 +1,7 @@
 <template>
   <NavBar />
 
-  <body class="dark:bg-black">
+  <body class="dark:bg-black dark:text-white">
     <!-- caraousal -->
     <div id="carouselExampleCaptions" class="relative" data-te-carousel-init data-te-ride="carousel">
       <!--Carousel indicators-->

diff --git a/src/components/GoogleLogin.vue b/src/components/GoogleLogin.vue
@@ -20,11 +20,11 @@
         </div>
 
         <p class="mt-3 text-xl text-center text-gray-600 dark:text-gray-200">
-          Welcome back! , Sign in with your IITM Google Account to access this page.
+          Welcome back! Sign in with your IITM Google Account to access this page.
         </p>
 
         <button
-          class="flex items-center justify-center mt-4 text-gray-600 transition-colors duration-300 transform border rounded-lg dark:border-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600"
+          class="flex items-center justify-center mt-4 text-gray-600 transition-colors duration-300 transform border rounded-lg dark:border-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 mx-auto"
           @click="login"
         >
           <div class="px-4 py-2">

diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
@@ -121,22 +121,16 @@
             class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
             style="padding-top: 56.25%"
           >
-            <iframe
-              class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full"
-              src="https://www.youtube.com/embed/6N-PfwyjsIQ?si=9TZ9-A541tzlhkCU"
-              allowfullscreen
-            />
+          <YoutubeVid videoId="6N-PfwyjsIQ" />
+
           </div>
 
           <div
             class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
             style="padding-top: 56.25%"
           >
-            <iframe
-              class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full"
-              src="https://www.youtube.com/embed/RLBxlaK_aU4?si=NF0U6NkSsvkvSNHZ"
-              allowfullscreen
-            />
+          <YoutubeVid videoId="RLBxlaK_aU4" />
+
           </div>
         </div>
       </div>
@@ -148,47 +142,35 @@
               class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
               style="padding-top: 56.25%"
             >
-              <iframe
-                class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full"
-                src="https://www.youtube.com/embed/TvkTrLJonbw?si=4k-pqv4Sm3IxT1J3"
-                allowfullscreen
-              />
+            <YoutubeVid videoId="TvkTrLJonbw" />
+
             </div>
           </div>
           <div class="p-4 md:w-1/2 lg:w-1/4 w-full">
             <div
               class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
               style="padding-top: 56.25%"
             >
-              <iframe
-                class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full"
-                src="https://www.youtube.com/embed/kEsry2TSVKU?si=AvUDyr9nmcz3wMjv"
-                allowfullscreen
-              />
+            <YoutubeVid videoId="kEsry2TSVKU" />
+
             </div>
           </div>
           <div class="p-4 md:w-1/2 lg:w-1/4 w-full">
             <div
               class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
               style="padding-top: 56.25%"
             >
-              <iframe
-                class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full"
-                src="https://www.youtube.com/embed/QW4T_FQzi2I?si=AozEo2ZoQhIfZHas"
-                allowfullscreen
-              />
+            <YoutubeVid videoId="QW4T_FQzi2I" />
+
             </div>
           </div>
           <div class="p-4 md:w-1/2 lg:w-1/4 w-full">
             <div
               class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
               style="padding-top: 56.25%"
             >
-              <iframe
-                class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full"
-                src="https://www.youtube.com/embed/rZdih019rz4?si=Bi5QHuM6YXaO0uTX"
-                allowfullscreen
-              />
+            <YoutubeVid videoId="rZdih019rz4" />
+
             </div>
           </div>
         </div>
@@ -209,42 +191,38 @@
           latest happenings and exciting activities within our community.
         </p>
 
-        <div
-          class="grid grid-cols-1 gap-8 mt-8 xl:mt-12 xl:gap-12 md:grid-cols-2 xl:grid-cols-3"
-        >
+        <div class="dark:text-white grid grid-cols-1 gap-8 mt-8 xl:mt-12 xl:gap-12 md:grid-cols-2 xl:grid-cols-3">
           <div v-for="event in latestEvents" :key="event.slug">
-            <img
-              class="relative z-10 object-cover w-full rounded-md h-96"
-              :src="prependBackendLink(event.image)"
-              alt="Event Image"
-            />
-            <div
-              class="relative z-20 max-w-lg p-6 mx-auto -mt-20 bg-white rounded-md shadow dark:bg-black"
-            >
-              <a
-                :href="event.form_url"
-                class="font-semibold text-gray-800 hover:underline dark:text-white md:text-xl"
-              >
+            <router-link :to="'/event/' + event.slug" class="block relative">
+              <img class="relative z-10 object-cover w-full rounded-md h-96" :src="prependBackendLink(event.image)"
+                alt="Event Image">
+              <div class="relative z-20 max-w-lg p-6 mx-auto -mt-20 bg-white rounded-md shadow dark:bg-black">
+
                 {{ event.title }}
-              </a>
-              <p class="mt-3 text-sm text-[#eab308]">
-                {{ event.timestamp }}
-              </p>
-            </div>
+                <p class="mt-3 text-sm text-[#eab308]">
+                  {{ event.timestamp }}
+                </p>
+              </div>
+            </router-link>
           </div>
-        </div>
       </div>
+    </div>
     </section>
   </body>
 </template>
 
 <script>
 import NavBar from "./NavBar.vue";
-
+import YoutubeVid from "./YoutubeVid.vue";
+import axios from 'axios'
+const api = axios.create({
+  baseURL: "https://backend-sundarbans.iitmbs.org",
+});
 export default {
   name: "HomePage",
   components: {
     NavBar,
+    YoutubeVid,
   },
   data() {
     return {
@@ -255,40 +233,32 @@ export default {
   },
   async mounted() {
     // Fetch admin data and events when the component is mounted
-    await Promise.all([this.fetchAdmins(), this.fetchEvents()]);
+    await Promise.all([this.fetchEvents()]);
   },
   methods: {
-    async fetchAdmins() {
-      try {
-        const response = await axios.get("https://sundarbans.camlio.shop/council");
-        const data = await response.json();
-        this.admins = data.admins;
-      } catch (error) {
-        console.error("Error fetching admin data:", error);
-      }
-    },
     async fetchEvents() {
       try {
-        const response = await axios.get("https://sundarbans.camlio.shop/events", {
+        const response = await api.get("/events", {
           mode: "cors",
         });
-        if (!response.ok) {
+        if (response.status!=200) {
           throw new Error(`HTTP error! Status: ${response.status}`);
         }
-        const data = await response.json();
+        const data = response.data
         console.log("API Response:", data); // Log the entire response
         // Separate events into latest and upcoming
-        this.latestEvents = data.latest_events || [];
+        this.latestEvents = (data.latest_events || []).slice(0, 3);
         this.upcomingEvents = data.upcoming_events || [];
       } catch (error) {
         console.error("Error fetching events:", error);
       }
     },
     prependBackendLink(url) {
       // Replace with your actual backend link
-      const backendLink = "https://sundarbans.camlio.shop";
+      //const backendLink = "https://sundarbans.camlio.shop";
       // Check if the URL already starts with 'http' or '/'
-      return url && url.startsWith("/") ? backendLink + url : url;
+      //return url && url.startsWith("/") ? backendLink + url : url;
+      return url && url.startsWith('/') ? api.defaults.baseURL + url : url;
     },
     truncateDescription(description) {
       const maxLength = 100;

diff --git a/src/components/VideoGallery.vue b/src/components/VideoGallery.vue
@@ -48,11 +48,8 @@
             class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
             style="padding-top: 56.25%"
           >
-            <iframe
-              class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full"
-              :src="video.video_url"
-              allowfullscreen
-            />
+          <YoutubeVid :videoId="video.video_url" />
+
           </div>
         </div>
       </div>
@@ -68,11 +65,8 @@
               class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
               style="padding-top: 56.25%"
             >
-              <iframe
-                class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full"
-                :src="video.video_url"
-                allowfullscreen
-              />
+            <YoutubeVid :videoId="video.video_url" />
+
             </div>
           </div>
         </div>
@@ -84,11 +78,12 @@
 <script>
 import axios from 'axios';
 import NavBar from './NavBar.vue';
-
+import YoutubeVid from './YoutubeVid.vue';
 export default {
     name: 'VideoGallery',
     components: {
-        NavBar
+        NavBar,
+        YoutubeVid,
     },
     data() {
         return {
@@ -106,6 +101,12 @@ export default {
                 }
             };
             const result = await axios.get(url, config);
+            
+            //parse the video_url to get the video id
+            for (let vid of result.data.videos) {
+                vid.video_url = vid.video_url.split("/")[4].split("?")[0]
+            }
+            
             this.videos = result.data.videos;
             console.log(this.videos);
         } catch (error) {

diff --git a/src/components/YoutubeVid.vue b/src/components/YoutubeVid.vue
@@ -0,0 +1,51 @@
+<template>
+  <template v-if="!loaded">
+
+    <img class="absolute inset-0 bottom-0 left-0 right-0 top-0 h-full w-full"
+      :src="`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`" alt="Youtube video thumbnail"
+      style="z-index:1" title="Please wait for the YT Player to load" />
+
+    <div class="absolute spinner" style="z-index:1"></div>
+
+  </template>
+
+  <iframe class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full" :src="videoUrl"
+    style="z-index: 0" allowfullscreen @load="loaded=true" />
+
+</template>
+
+<script>
+export default {
+  name: 'YoutubeVid',
+  props: {
+    videoId: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loaded: false,
+      videoUrl: `https://www.youtube.com/embed/${this.videoId}`
+    }
+  },
+}
+</script>
+<style scoped>
+.spinner {
+  width: 50px;
+  height: 50px;
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-left-color: #910404;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  top: calc(50% - 25px);
+  left: calc(50% - 25px);
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>