object movies array - carnegie hall - plaza hotel

README.md

@@ -1,84 +1,5 @@
-<p style="text-align: center">
-  <img style="width: 900px" src="Nuxtwind Daisy Banner.jpg"/>
-</p>
 
-<h1 align="center">Nuxtwind Daisy 🟢💨🌼</h1>
-<p style="text-align: center">
-Nuxtwind Daisy is a starter template for Nuxt.js 3 + Tailwind CSS + Daisy UI with additional installed setup for custom font, icons, animation, and more.
-</p>
+# New York Movies
 
-- [Showcase](#showcase)
-- [Getting Started Guide](#getting-started-guide)
+[Check online](https://new-york-movies.vercel.app/)
 
-# Showcase
-
-Brag your modified version from this template. 💪
-
-- [jofftiquez.dev](https://jofftiquez.dev) 
-
-# Getting Started Guide
-
-## Installation
-
-Nope. No installation needed.
-
-## Fork
-
-Fork this repository to your own GitHub account.
-
-<img width="800" src="fork.png">
-
-Make it yours. Rename it. Change the description. Hit Create fork.
-
-<img width="800" src="make-it-yours.png">
-
-## Make changes
-
-I will assume that you already know the basic of nuxt.js. If not, you can check out their [documentation](https://nuxt.com/docs/getting-started/introduction).
-
-Now that it's yours, you can make changes to it. Be creative you can start by removing the contents in the `pages/index.vue`. Feel free to utilize the `GenericPanel.vue` component as it adds a nice balance to the layout.
-
-## Preview
-
-You can preview your build by running the `nuxt start` command.
-
-```bash
-# Preview your build
-$ nuxt start
-```
-
-## Build
-
-You can choose to build it using the defaul strategy which is SSR, but you also have the option to generate static files so you can just upload your work in any static hosting service. The sample site of this repo is hosted in Vercel.
-
-
-```bash
-# Build for production using SSR
-$ nuxt build
-```
-
-```bash
-# Build for production and generate static files
-$ nuxt generate
-```
-
-## Deploy
-
-You can deploy your work in any static hosting service.
-
-Here's a list of static hosting services that you can use:
-
-- [Vercel](https://vercel.com/)
-- [Netlify](https://www.netlify.com/)
-- [Firebase](https://firebase.google.com/)
-- [Surge](https://surge.sh/)
-- [Render](https://render.com/)
-- [GitHub Pages](https://pages.github.com/)
-- [GitLab Pages](https://docs.gitlab.com/ee/user/project/pages/)
-- [AWS Amplify](https://aws.amazon.com/amplify/)
-- [Cloudflare Pages](https://pages.cloudflare.com/)
-- [Begin](https://begin.com/)
-- [Fast.io](https://fast.io/)
-- [Fly](https://fly.io/)
-- [Deta](https://www.deta.sh/)
-- [Aerobatic](https://www.aerobatic.com/)

src/components/VideoMarker.vue

@@ -0,0 +1,34 @@
+<template>
+    <l-marker :lat-lng="coords">
+        <l-popup class="m-3 w-60 max-w-full h-52">
+            <h2 class="text-lg m-1 italic">{{placeName}}</h2>
+            <h3 class="text-md text-teal-700 m-1">{{ title }}</h3>
+            <video controls width="600">
+                <source :src="src" type="video/mp4" />
+            </video>
+        </l-popup>
+    </l-marker> 
+</template>
+
+<script setup>
+
+const props = defineProps({
+    title : {
+        type : String,
+        required : true
+    },
+    src : {
+        type : String,
+        required : true
+    },
+    placeName : {
+        type :String,
+        required:true
+    },
+    coords : {
+        type : Array,
+        required : true
+    }
+})
+
+</script>

src/layouts/Default.vue

@@ -1,5 +1,6 @@
 <template>
-  <div :data-theme="theme">
+  <!-- <div :data-theme="theme"> -->
+    <div >
     <div class="navbar fixed bg-slate-900 z-40 shadow-sm">
       <div class="navbar-start">
         <a class="btn btn-ghost text-xl text-teal-600">
@@ -12,14 +13,6 @@
       <div class="navbar-center hidden lg:flex">
         <!-- TODO: You can add menu here -->
       </div>
-      <div class="navbar-end">
-        <select v-model="theme" class="hidden select select-primary md:w-full md:max-w-xs">
-          <option disabled selected>Select Theme</option>
-          <option v-for="theme in themes" :value="theme" :key="theme">
-            <span class="uppercase">{{ theme }}</span>
-          </option>
-        </select>
-      </div>
     </div>
     <slot />
     <footer class="footer footer-center p-10 bg-base-50">
@@ -28,70 +21,10 @@
       </div>
       <div>
         <div class="grid grid-flow-col gap-4">
-          <a href="https://twitter.com/jrtiquez" target="_blank">
-            <i class="lab la-twitter text-4xl"></i>
-          </a>
-          <a href="https://github.com/ossphilippines/nuxtwind-daisy" target="_blank">
-            <i class="lab la-github text-4xl"></i>
-          </a>
-          <a href="https://facebook.com/ossph.org" target="_blank">
-            <i class="lab la-facebook text-4xl"></i>
-          </a>
+
         </div>
       </div>
     </footer>
   </div>
 </template>
 
-<script setup>
-
-const THEMES = [
-  'light',
-  'dark',
-  'cupcake',
-  'bumblebee',
-  'emerald',
-  'corporate',
-  'synthwave',
-  'retro',
-  'cyberpunk',
-  'valentine',
-  'halloween',
-  'garden',
-  'forest',
-  'aqua',
-  'lofi',
-  'pastel',
-  'fantasy',
-  'wireframe',
-  'black',
-  'luxury',
-  'dracula',
-  'cmyk',
-  'autumn',
-  'business',
-  'acid',
-  'lemonade',
-  'night',
-  'coffee',
-  'winter',
-];
-
-/*
-export default {
-  setup () {
-    const theme = ref(null);
-    watch(theme, (value) => {
-      localStorage.setItem('daisyui-theme', value);
-    });
-    onMounted(() => {
-      theme.value = localStorage.getItem('daisyui-theme') || 'dark';
-    });
-    return {
-      theme,
-      themes: THEMES,
-    };
-  },
-};
-*/
-</script>

src/pages/index.vue

@@ -3,41 +3,13 @@
 <div class="w-full h-14 grid items-center"></div>
 
   <div class="w-[100vw] h-[100vh] [&_.leaflet-popup-content-wrapper]:bg-white [&_video]:min-h-36">
-    <!-- Times Square -->
+
     <LMap ref="map" :zoom="zoom" :center="[40.758896, -73.985130]">
       <LTileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
         layer-type="base" name="OpenStreetMap" />
 
-      <l-marker :lat-lng="[40.781303, -73.974113]">
-        <l-popup class="m-3 w-60 max-w-full h-52">
-          <h2 class="text-lg m-1 italic">National history museum</h2>
-          <h3 class="text-md text-teal-700 m-1">Night at the museum</h3>
-          <video controls width="600">
-            <source :src="video" type="video/mp4" />
-          </video>
-        </l-popup>
-      </l-marker> 
-
-      <l-marker :lat-lng="[40.766939, -73.973794]">
-        <l-popup class="m-3 w-60 max-w-full h-52">
-          <h2 class="text-lg m-1 italic">Central Park</h2>
-          <h3 class="text-md text-teal-700 m-1">Home Alone 2</h3>
-          <video controls width="600">
-            <source :src="video2" type="video/mp4" />
-          </video>
-        </l-popup>
-      </l-marker>
-
-      <l-marker :lat-lng="[40.688930, -74.044100]">
-        <l-popup class="m-3 w-60 max-w-full h-52">
-          <h2 class="text-lg m-1 italic">Liberty statue</h2>
-          <h3 class="text-md text-teal-700 m-1">The day after tomorrow</h3>
-          <video controls width="600">
-            <source :src="video3" type="video/mp4" />
-          </video>
-        </l-popup>
-      </l-marker>
+      <VideoMarker v-for="movie in movies" v-bind="movie" :key="movie.title"/>
 
     </LMap>
   </div>
@@ -61,14 +33,46 @@ useHead({
         },
       ],
     });
-
     
 const zoom = ref(12)
 
-import video from '../assets/images/natural-history-museum/nuit-au-musee.mp4';
-import video2 from '../assets/images/central-park/home-alone-2-gapstow-bridge.mp4';
-import video3 from '../assets/images/liberty-statue/The-Day-After-Tomorrow.mp4';
+const videoGlob = import.meta.glob('../assets/videos/*/*.mp4', { eager: true })
+const getMovie = movieName => videoGlob[`../assets/videos/${movieName}`].default
+
+const movies = [
+  {
+    placeName : "National History Museum",
+    title : "Night at the museum",
+    src : getMovie('natural-history-museum/nuit-au-musee.mp4'),
+    coords : [40.781303, -73.974113]
+  },
+  {
+    placeName : "Liberty statue",
+    title : "The day after tomorrow",
+    src : getMovie('liberty-statue/The-Day-After-Tomorrow.mp4'),
+    coords : [40.688930, -74.044100]
+  },
+  {
+    placeName : "Central Park",
+    title : "Home Alone 2",
+    src : getMovie('central-park/home-alone-2-gapstow-bridge.mp4'),
+    coords : [40.766939, -73.973794]
+  },
+  {
+    placeName : "Plaza Hotel",
+    title : "Home Alone 2",
+    src : getMovie('plaza-hotel/Home Alone - PLAZA HOTEL.mp4'),
+    coords : [40.7606, -73.985]
+  },
+  {
+    placeName : "Carnegie Hall",
+    title : "Home Alone 2",
+    src : getMovie('carnegie-hall/Home Alone - CARNEGIE HALL.mp4'),
+    coords : [40.7648, -73.9797]
+  },
+
 
+]
 
 </script >