Merge pull request #65 from taleeus/dev

feat: added dissonance video

src/components/Navbar.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { storeToRefs } from "pinia";
 import { ref } from "vue";
-import { RouteInfo } from "../types/routes.types";
 import { useScreenStore } from "../stores/useScreen";
-import { storeToRefs } from "pinia";
+import { RouteInfo } from "../types/routes.types";
 
 defineProps<{
  routes: RouteInfo[];

src/components/sections/VideosSection.vue

@@ -11,17 +11,10 @@ const { isMobile, isTablet } = storeToRefs(useScreenStore());
 <template>
  <Carousel wrap-around>
  <Slide v-for="videoId in videoIds" :key="videoId" class="w-full">
- <iframe
- :width="isMobile ? 240 : isTablet ? 600 : 800"
- :height="isMobile ? 140 : 450"
- :src="`https://www.youtube.com/embed/${videoId}?modestbranding=1`"
- title="YouTube video player"
- frameborder="0"
- allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
- allowfullscreen
- rel="0"
- loading="lazy"
- ></iframe>
+ <iframe :width="isMobile ? 240 : isTablet ? 600 : 800" :height="isMobile ? 140 : 450"
+ :src="`https://www.youtube.com/embed/${videoId}?modestbranding=1`" title="YouTube video player" frameborder="0"
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
+ rel="0" loading="lazy"></iframe>
  </Slide>
  <template #addons>
  <Navigation />

src/router/index.ts

@@ -1,10 +1,10 @@
-import { createWebHistory, createRouter } from "vue-router";
+import { createRouter, createWebHistory } from "vue-router";
 
-import Home from "../views/Home.vue";
-import Gallery from "../views/Gallery.vue";
-import Merch from "../views/Merch.vue";
 import Epk from "../views/Epk.vue";
+import Gallery from "../views/Gallery.vue";
+import Home from "../views/Home.vue";
 import LoginEpk from "../views/LoginEpk.vue";
+import Merch from "../views/Merch.vue";
 
 import { useIdentityStore } from "../stores/useIdentity";
 
@@ -47,6 +47,10 @@ const routes = [
 const router = createRouter({
  history: createWebHistory(),
  routes,
+ scrollBehavior(to, from, savedPosition) {
+ // always scroll to top
+ return { top: 0 }
+ },
 });
 
 router.beforeEach(async (to, from, next): Promise<void> => {

src/views/Epk.vue

@@ -42,9 +42,16 @@ const galleryPlaceholders = [
  <div>
  <EpkBanner></EpkBanner>
  <div class="h-16 w-full"></div>
- <div
+ <video autoplay muted loop
+ :poster="isMobile ? '/assets/bgVideos/dragonfly/dragonfly-clip-mobile-cover.avif' : '/assets/bgVideos/dragonfly/dragonfly-clip-mobile.avif'"
+ class="w-full h-auto">
+ <source
+ :src="isMobile ? '/assets/bgVideos/dragonfly/dragonfly-clip-mobile.webm' : '/assets/bgVideos/dragonfly/dragonfly-clip.webm'"
+ type="video/webm">
+ </video>
+ <!-- <div
  class="h-[35vh] w-full bg-debris-bside-gradient bg-cover bg-top px-8 transition-all duration-500 lg:h-[48rem] lg:px-32"
- ></div>
+ ></div> -->
  <div class="flex flex-col lg:flex-row">
  <Section title="Bio" class="bg-black text-egg">
  <div class="text-justify text-xs lg:text-base">
@@ -174,7 +181,7 @@ const galleryPlaceholders = [
  <iframe
  :width="isMobile ? '100%' : 1160"
  :height="isMobile ? 200 : 653"
- src="https://www.youtube.com/embed/qWhtsLCHChc?rel=0"
+ src="https://www.youtube.com/embed/ue1BDz156Z4"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

src/views/Home.vue

@@ -9,16 +9,23 @@ import { useBandsintownStore } from "../stores/useBandsintown";
 import { useBigcartelStore } from "../stores/useBigcartel";
 import { useScreenStore } from "../stores/useScreen";
 
-useScreenStore();
 useBigcartelStore(); // Already caching merch
+const { isMobile, isTablet } = storeToRefs(useScreenStore());
 const { events } = storeToRefs(useBandsintownStore());
 
 const videoIds = ["hzknSmWxw2I", "TQuuQxOuI_k", "iXOm0oeMGZc", "1tVxbYR59Gc"];
 </script>
 
 <template>
  <div>
- <div class="h-[35vh] w-full bg-debris-bside-gradient bg-cover bg-top lg:h-[48rem]"></div>
+ <video autoplay muted loop
+ :poster="isMobile ? '/assets/bgVideos/dragonfly/dragonfly-clip-mobile-cover.avif' : '/assets/bgVideos/dragonfly/dragonfly-clip-mobile.avif'"
+ class="w-full h-auto">
+ <source
+ :src="isMobile ? '/assets/bgVideos/dragonfly/dragonfly-clip-mobile.webm' : '/assets/bgVideos/dragonfly/dragonfly-clip.webm'"
+ type="video/webm">
+ </video>
+ <!-- <div class="h-[35vh] w-full bg-debris-bside-gradient bg-cover bg-top lg:h-[48rem]"></div> -->
  <Section title="Music" class="bg-ii bg-cover bg-center pb-16 text-white backdrop-brightness-50">
  <div class="justify-around md:flex lg:flex-row">
  <MusicBox cover-art-url="/assets/coverArts/medium/cover-art.medium.avif"
@@ -29,6 +36,14 @@ const videoIds = ["hzknSmWxw2I", "TQuuQxOuI_k", "iXOm0oeMGZc", "1tVxbYR59Gc"];
  title="Debris // Essence B-Side" stream-url="https://ffm.to/dbrs"></MusicBox>
  </div>
  </Section>
+ <Section title="Talk to Me, Dragonfly! @Dissonance" class="text-white bg-dragonfly bg-cover bg-center">
+ <div class="flex align-middle justify-center">
+ <iframe :width="isMobile ? 240 : isTablet ? 600 : 800" :height="isMobile ? 140 : 450"
+ src="https://www.youtube.com/embed/ue1BDz156Z4" title="YouTube video player" frameborder="0"
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
+ rel="0" loading="lazy"></iframe>
+ </div>
+ </Section>
  <Section title="Tour Dates"
  class="flex-col justify-center bg-tour bg-cover bg-center text-white md:px-4 lg:bg-center">
  <table class="w-full table-fixed rounded-md bg-black bg-opacity-70 backdrop-blur-sm md:table-fixed lg:table-auto">
@@ -63,11 +78,10 @@ const videoIds = ["hzknSmWxw2I", "TQuuQxOuI_k", "iXOm0oeMGZc", "1tVxbYR59Gc"];
  <Section title="Merch"
  class="relative flex flex-col items-center justify-center bg-grain bg-cover bg-center px-0 pb-0 lg:px-20 lg:pt-4 lg:pb-0">
  <lazy-image src="/assets/backgrounds/medium/merch-bg.medium.avif"
- placeholder="/assets/backgrounds/small/merch-bg.small.avif"
- class="pt-20 drop-shadow-xl md:pt-0 lg:pt-0" />
- <a href="https://benthos-music.com/merch" target="_blank" rel="noopener noreferrer"
+ placeholder="/assets/backgrounds/small/merch-bg.small.avif" class="pt-20 drop-shadow-xl md:pt-0 lg:pt-0" />
+ <router-link :to="{ name: 'Merch' }"
  class="absolute top-28 rounded-lg bg-red bg-cover py-4 px-6 font-medium uppercase text-white drop-shadow-md hover:bg-white hover:text-black md:top-48 md:py-6 md:px-12 md:text-xl lg:top-72 lg:py-6 lg:px-12 lg:text-xl">Shop
- now</a>
+ now</router-link>
  </Section>
  <Section title="Singles" class="bg-debris bg-cover px-0 pb-20 pt-12 text-white">
  <VideosSection :video-ids="videoIds"></VideosSection>

tailwind.config.cjs

@@ -31,6 +31,7 @@ module.exports = {
  tour: "url(/assets/backgrounds/large/tour-bg.large.avif);",
  ii: "url(/assets/backgrounds/large/cover-art-bg.large.avif);",
  debris: "url(/assets/backgrounds/large/debris-bg.large.avif);",
+ dragonfly: "url(/assets/backgrounds/large/dragonfly.large.avif);",
  },
  transitionDuration: {
  400: "400ms",

yarn.lock

@@ -7195,19 +7195,19 @@ semver-diff@^4.0.0:
  semver "^7.3.5"
 
 "semver@2 || 3 || 4 || 5", semver@^5.6.0:
- version "5.7.1"
- resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
- integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+ version "5.7.2"
+ resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
+ integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
 
 semver@^6.0.0, semver@^6.2.0, semver@^6.3.0:
- version "6.3.0"
- resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
- integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+ version "6.3.1"
+ resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+ integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
 semver@^7.0.0, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7:
- version "7.3.8"
- resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
- integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
+ version "7.5.4"
+ resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
+ integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
  dependencies:
  lru-cache "^6.0.0"
 
@@ -8418,9 +8418,9 @@ winston@^3.2.1, winston@^3.8.2:
  winston-transport "^4.5.0"
 
 word-wrap@~1.2.3:
- version "1.2.3"
- resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
- integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+ version "1.2.4"
+ resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.4.tgz#cb4b50ec9aca570abd1f52f33cd45b6c61739a9f"
+ integrity sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==
 
 wrap-ansi@^3.0.1:
  version "3.0.1"