@saooti/octopus-sdk 42.0.3 → 42.0.5

package/dist/TopBar-DRclhhd6.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopBar-DRclhhd6.mjs","names":[],"sources":["../src/components/misc/TopBarMainContent.vue","../src/components/misc/TopBarMainContent.vue","../src/components/misc/TopBar.vue","../src/components/misc/TopBar.vue"],"sourcesContent":["<template>\n  <div class=\"top-bar-grid header-content\" :class=\"{ scrolled: titleIsDisplayed }\">\n    <router-link\n      class=\"top-bar-logo d-flex align-items-center\"\n      :to=\"{\n        name: 'home',\n        query: getQueriesRouter('home'),\n      }\"\n      :title=\"t('Home')\"\n    >\n      <img\n        v-if=\"!filterStore.filterOrgaId || '' === imgUrl\"\n        :src=\"logoUrl\"\n        aria-hidden=\"true\"\n        alt=\"\"\n        width=\"140\"\n        height=\"50\"\n        title=\"Logo\"\n        :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n      >\n      <img\n        v-else\n        :src=\"useProxyImageUrl(imgUrl, '', '80')\"\n        aria-hidden=\"true\"\n        alt=\"\"\n        class=\"client-logo\"\n        title=\"Logo\"\n        :class=\"generalStore.platformEducation ? 'education-logo' : ''\"\n      >\n    </router-link>\n    <h1 v-if=\"titleIsDisplayed\" class=\"text-truncate m-0 align-self-center\">\n      {{ titleDisplay }}\n    </h1>\n    <div\n      class=\"d-flex\"\n      :class=\"[\n        inContentDisplayPage || isPhone\n          ? 'flex-row-reverse align-items-center'\n          : 'flex-column align-items-end',\n      ]\"\n    >\n      <template v-if=\"filterStore.filterOrgaId && '' !== imgUrl\">\n        <img\n          v-if=\"authStore.isGarRole\"\n          :src=\"logoUrl\"\n          aria-hidden=\"true\"\n          alt=\"\"\n          width=\"100\"\n          height=\"29\"\n          class=\"ms-2\"\n          title=\"Logo\"\n          :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n        >\n        <a\n          v-else\n          href=\"https://www.saooti.com/\"\n          target=\"_blank\"\n          rel=\"noreferrer noopener\"\n          :title=\"t('New window', {text: 'Saooti'})\"\n        >\n          <img\n            :src=\"logoUrl\"\n            aria-hidden=\"true\"\n            alt=\"\"\n            \n            title=\"Saooti\"\n            width=\"100\"\n            height=\"29\"\n            class=\"ms-2\"\n            :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n          >\n        </a>\n      </template>\n      <div role=\"navigation\" class=\"d-flex align-items-center justify-content-end flex-grow-1\">\n        <nav :aria-label=\"t('Site menu')\">\n          <ul class=\"d-flex\">\n            <template v-for=\"link in routerLinkArray\" :key=\"link.routeName\">\n              <li v-if=\"link.condition\" class=\"li-style-none\">\n                <router-link\n                  v-show=\"!isPhone\"\n                  :to=\"{\n                    name: link.routeName,\n                    query: getQueriesRouter(link.routeName),\n                  }\"\n                  class=\"link-hover py-2 px-3\"\n                >\n                  {{ link.title }}\n                </router-link>\n              </li>\n            </template>\n          </ul>\n        </nav>\n        <button\n          v-show=\"!isPhone && !inContentDisplayPage\"\n          id=\"more-dropdown\"\n          :title=\"t('More')\"\n          class=\"d-flex-column flex-nowrap align-items-center btn-transparent py-2 px-3 text-white\"\n        >\n          <span class=\"link-hover\">\n            {{ t(\"More\") }}\n          </span>\n          <ChevronDownIcon />\n        </button>\n        <ClassicPopover\n          target=\"more-dropdown\"\n          :only-click=\"true\"\n          :is-fixed=\"true\"\n          :left-pos=\"true\"\n          :is-top-layer=\"true\"\n        >\n          <nav class=\"d-flex flex-column\" :aria-label=\"t('Site menu')\">\n            <ul class=\"p-0 m-0\">\n              <template v-for=\"link in routerLinkInsideArray\" :key=\"link.routeName\">\n                <li\n                  v-if=\"link.condition\"\n                  class=\"li-style-none\"\n                >\n                  <router-link\n                    :to=\"{\n                      name: link.routeName,\n                      query: getQueriesRouter(link.routeName),\n                    }\"\n                    class=\"p-1 octopus-dropdown-item\"\n                  >\n                    {{ link.title }}\n                  </router-link>\n                </li>\n              </template>\n            </ul>\n          </nav>\n        </ClassicPopover>\n\n        <MobileMenu\n          :is-education=\"generalStore.platformEducation\"\n          :show=\"mobileMenuDisplay\"\n          :not-podcast-and-emission=\"inContentDisplayPage && !scrolled\"\n        />\n        <HomeDropdown\n          :is-education=\"generalStore.platformEducation\"\n          :mobile-menu-display=\"mobileMenuDisplay\"\n          v-bind=\"options?.homeDropdown\"\n        />\n        <router-link\n          v-show=\"!isPhone && !inContentDisplayPage\"\n          :title=\"t('Search')\"\n          :to=\"{\n            name: 'podcasts',\n          }\"\n          class=\"btn admin-button m-1 text-blue-octopus\"\n          role=\"search\"\n        >\n          <MagnifyIcon :size=\"30\" />\n        </router-link>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport MagnifyIcon from \"vue-material-design-icons/Magnify.vue\";\nimport { useRubriquesFilterComputed } from \"../composable/route/useRubriquesFilterComputed\";\nimport { state } from \"../../stores/ParamSdkStore\";\nimport HomeDropdown, { type HomeDropdownProps } from \"./HomeDropdown.vue\";\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport { useFilterStore } from \"../../stores/FilterStore\";\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport ClassicPopover from \"../misc/ClassicPopover.vue\";\nimport {  defineAsyncComponent, computed } from \"vue\";\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { useI18n } from \"vue-i18n\";\nconst MobileMenu = defineAsyncComponent(() => import(\"./MobileMenu.vue\"));\n\nexport interface TopBarMainContentOptions {\n  homeDropdown?: HomeDropdownProps;\n}\n\nexport interface TopBarMainContentProps {\n  isPhone?: boolean;\n  titleDisplay?: string;\n  scrolled?: boolean;\n};\n\n//Props \nconst props = defineProps<TopBarMainContentProps & {\n  /** Props for subcomponents */\n  options?: TopBarMainContentOptions;\n}>();\n\n\n//Composables\nconst { t } = useI18n();\nconst { useProxyImageUrl } = useImageProxy();\nconst { rubriqueQueryParam } = useRubriquesFilterComputed();\nconst authStore = useAuthStore();\nconst generalStore = useGeneralStore();\nconst filterStore = useFilterStore();\n\n//Computed\nconst mobileMenuDisplay = computed(() => props.isPhone || inContentDisplayPage.value);\nconst titleIsDisplayed = computed(() => inContentDisplayPage.value && props.scrolled && !props.isPhone);\nconst inContentDisplayPage = computed(() => 0 !== props.titleDisplay.length);\nconst routerLinkArray = computed(() =>{\n  return [\n    {\n      title: t(\"Radio & Live\"),\n      routeName: \"lives\",\n      condition:\n        !inContentDisplayPage.value &&\n        (state.generalParameters.isLiveTab as boolean) &&\n        ((filterStore.filterOrgaId && filterStore.filterLive) || !filterStore.filterOrgaId),\n    },\n    {\n      title: t(\"Podcasts\"),\n      routeName: \"podcasts\",\n      condition:\n        !inContentDisplayPage.value ||\n        (inContentDisplayPage.value && !props.scrolled),\n    },\n    {\n      title: t(\"Emissions\"),\n      routeName: \"emissions\",\n      condition:\n        !inContentDisplayPage.value ||\n        (inContentDisplayPage.value && !props.scrolled),\n    },\n  ];\n});\nconst routerLinkInsideArray = computed(() =>{\n  return [\n    {\n      title: t(\"Speakers\"),\n      routeName: \"participants\",\n      condition: true,\n    },\n    {\n      title: t(\"Playlists\"),\n      routeName: \"playlists\",\n      condition: true,\n    },\n    {\n      title: t(\"Productors\"),\n      routeName: \"productors\",\n      condition:\n        !state.generalParameters.podcastmaker && (!filterStore.filterOrgaId || generalStore.platformEducation),\n    },\n  ];\n});\nconst logoUrl = computed(() =>{\n  if (generalStore.platformEducation) {\n    return \"/img/logo_education_white.svg\";\n  }\n  return props.isPhone\n    ? \"/img/logo_octopus_bubble.svg\"\n    : \"/img/logo_saooti_play_white.svg\";\n});\nconst imgUrl = computed(() =>{\n  if (!filterStore.filterImgUrl?.includes(\"emptypodcast\")){\n    return `${filterStore.filterImgUrl}`;\n  }\n  return \"\";\n});\n \n//Methods\nfunction getQueriesRouter(routeName: string) {\n  if (\"podcasts\" !== routeName && \"emissions\" !== routeName  && \"home\" !== routeName) {\n    return { productor: filterStore.filterOrgaId };\n  }\n  return {\n    productor: filterStore.filterOrgaId,\n    iabId: filterStore.filterIab?.id,\n    rubriquesId: rubriqueQueryParam.value,\n  };\n}\n</script>\n\n<style lang=\"scss\">\n\n\n.octopus-app {\n  .top-bar-grid {\n    display: grid;\n    grid-template-columns: 1fr 5fr;\n    padding: 0.5rem 1rem 0 1rem;\n\n    &.scrolled {\n      grid-template-columns: 1fr 2fr 1fr;\n    }\n\n    @media (width <= 450px) {\n      padding: 0 0.5rem;\n    }\n\n    .link-hover {\n      color: white;\n      font-weight: bold;\n      font-size: 0.93rem;\n      text-decoration: underline;\n      text-decoration-color: transparent;\n      transition: text-decoration-color 250ms;\n      text-underline-offset: 8px;\n\n      &.link-hover:hover,\n      &.link-hover.router-link-exact-active.router-link-active {\n        color: white;\n        text-decoration-color: white;\n      }\n    }\n\n    .client-logo {\n      border-radius: var(--octopus-border-radius);\n    }\n\n    .top-bar-logo img {\n      max-width: 140px !important;\n      max-height: 4rem;\n      height: 4rem;\n\n      &.education-logo {\n        height: auto;\n      }\n\n      @media (width <= 650px) {\n        max-height: 2rem;\n      }\n    }\n\n    .octopus-logo {\n      @media (width <= 960px) {\n        max-width: 30px !important;\n      }\n    }\n  }\n}\n</style>\n","<template>\n  <div class=\"top-bar-grid header-content\" :class=\"{ scrolled: titleIsDisplayed }\">\n    <router-link\n      class=\"top-bar-logo d-flex align-items-center\"\n      :to=\"{\n        name: 'home',\n        query: getQueriesRouter('home'),\n      }\"\n      :title=\"t('Home')\"\n    >\n      <img\n        v-if=\"!filterStore.filterOrgaId || '' === imgUrl\"\n        :src=\"logoUrl\"\n        aria-hidden=\"true\"\n        alt=\"\"\n        width=\"140\"\n        height=\"50\"\n        title=\"Logo\"\n        :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n      >\n      <img\n        v-else\n        :src=\"useProxyImageUrl(imgUrl, '', '80')\"\n        aria-hidden=\"true\"\n        alt=\"\"\n        class=\"client-logo\"\n        title=\"Logo\"\n        :class=\"generalStore.platformEducation ? 'education-logo' : ''\"\n      >\n    </router-link>\n    <h1 v-if=\"titleIsDisplayed\" class=\"text-truncate m-0 align-self-center\">\n      {{ titleDisplay }}\n    </h1>\n    <div\n      class=\"d-flex\"\n      :class=\"[\n        inContentDisplayPage || isPhone\n          ? 'flex-row-reverse align-items-center'\n          : 'flex-column align-items-end',\n      ]\"\n    >\n      <template v-if=\"filterStore.filterOrgaId && '' !== imgUrl\">\n        <img\n          v-if=\"authStore.isGarRole\"\n          :src=\"logoUrl\"\n          aria-hidden=\"true\"\n          alt=\"\"\n          width=\"100\"\n          height=\"29\"\n          class=\"ms-2\"\n          title=\"Logo\"\n          :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n        >\n        <a\n          v-else\n          href=\"https://www.saooti.com/\"\n          target=\"_blank\"\n          rel=\"noreferrer noopener\"\n          :title=\"t('New window', {text: 'Saooti'})\"\n        >\n          <img\n            :src=\"logoUrl\"\n            aria-hidden=\"true\"\n            alt=\"\"\n            \n            title=\"Saooti\"\n            width=\"100\"\n            height=\"29\"\n            class=\"ms-2\"\n            :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n          >\n        </a>\n      </template>\n      <div role=\"navigation\" class=\"d-flex align-items-center justify-content-end flex-grow-1\">\n        <nav :aria-label=\"t('Site menu')\">\n          <ul class=\"d-flex\">\n            <template v-for=\"link in routerLinkArray\" :key=\"link.routeName\">\n              <li v-if=\"link.condition\" class=\"li-style-none\">\n                <router-link\n                  v-show=\"!isPhone\"\n                  :to=\"{\n                    name: link.routeName,\n                    query: getQueriesRouter(link.routeName),\n                  }\"\n                  class=\"link-hover py-2 px-3\"\n                >\n                  {{ link.title }}\n                </router-link>\n              </li>\n            </template>\n          </ul>\n        </nav>\n        <button\n          v-show=\"!isPhone && !inContentDisplayPage\"\n          id=\"more-dropdown\"\n          :title=\"t('More')\"\n          class=\"d-flex-column flex-nowrap align-items-center btn-transparent py-2 px-3 text-white\"\n        >\n          <span class=\"link-hover\">\n            {{ t(\"More\") }}\n          </span>\n          <ChevronDownIcon />\n        </button>\n        <ClassicPopover\n          target=\"more-dropdown\"\n          :only-click=\"true\"\n          :is-fixed=\"true\"\n          :left-pos=\"true\"\n          :is-top-layer=\"true\"\n        >\n          <nav class=\"d-flex flex-column\" :aria-label=\"t('Site menu')\">\n            <ul class=\"p-0 m-0\">\n              <template v-for=\"link in routerLinkInsideArray\" :key=\"link.routeName\">\n                <li\n                  v-if=\"link.condition\"\n                  class=\"li-style-none\"\n                >\n                  <router-link\n                    :to=\"{\n                      name: link.routeName,\n                      query: getQueriesRouter(link.routeName),\n                    }\"\n                    class=\"p-1 octopus-dropdown-item\"\n                  >\n                    {{ link.title }}\n                  </router-link>\n                </li>\n              </template>\n            </ul>\n          </nav>\n        </ClassicPopover>\n\n        <MobileMenu\n          :is-education=\"generalStore.platformEducation\"\n          :show=\"mobileMenuDisplay\"\n          :not-podcast-and-emission=\"inContentDisplayPage && !scrolled\"\n        />\n        <HomeDropdown\n          :is-education=\"generalStore.platformEducation\"\n          :mobile-menu-display=\"mobileMenuDisplay\"\n          v-bind=\"options?.homeDropdown\"\n        />\n        <router-link\n          v-show=\"!isPhone && !inContentDisplayPage\"\n          :title=\"t('Search')\"\n          :to=\"{\n            name: 'podcasts',\n          }\"\n          class=\"btn admin-button m-1 text-blue-octopus\"\n          role=\"search\"\n        >\n          <MagnifyIcon :size=\"30\" />\n        </router-link>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport MagnifyIcon from \"vue-material-design-icons/Magnify.vue\";\nimport { useRubriquesFilterComputed } from \"../composable/route/useRubriquesFilterComputed\";\nimport { state } from \"../../stores/ParamSdkStore\";\nimport HomeDropdown, { type HomeDropdownProps } from \"./HomeDropdown.vue\";\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport { useFilterStore } from \"../../stores/FilterStore\";\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport ClassicPopover from \"../misc/ClassicPopover.vue\";\nimport {  defineAsyncComponent, computed } from \"vue\";\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { useI18n } from \"vue-i18n\";\nconst MobileMenu = defineAsyncComponent(() => import(\"./MobileMenu.vue\"));\n\nexport interface TopBarMainContentOptions {\n  homeDropdown?: HomeDropdownProps;\n}\n\nexport interface TopBarMainContentProps {\n  isPhone?: boolean;\n  titleDisplay?: string;\n  scrolled?: boolean;\n};\n\n//Props \nconst props = defineProps<TopBarMainContentProps & {\n  /** Props for subcomponents */\n  options?: TopBarMainContentOptions;\n}>();\n\n\n//Composables\nconst { t } = useI18n();\nconst { useProxyImageUrl } = useImageProxy();\nconst { rubriqueQueryParam } = useRubriquesFilterComputed();\nconst authStore = useAuthStore();\nconst generalStore = useGeneralStore();\nconst filterStore = useFilterStore();\n\n//Computed\nconst mobileMenuDisplay = computed(() => props.isPhone || inContentDisplayPage.value);\nconst titleIsDisplayed = computed(() => inContentDisplayPage.value && props.scrolled && !props.isPhone);\nconst inContentDisplayPage = computed(() => 0 !== props.titleDisplay.length);\nconst routerLinkArray = computed(() =>{\n  return [\n    {\n      title: t(\"Radio & Live\"),\n      routeName: \"lives\",\n      condition:\n        !inContentDisplayPage.value &&\n        (state.generalParameters.isLiveTab as boolean) &&\n        ((filterStore.filterOrgaId && filterStore.filterLive) || !filterStore.filterOrgaId),\n    },\n    {\n      title: t(\"Podcasts\"),\n      routeName: \"podcasts\",\n      condition:\n        !inContentDisplayPage.value ||\n        (inContentDisplayPage.value && !props.scrolled),\n    },\n    {\n      title: t(\"Emissions\"),\n      routeName: \"emissions\",\n      condition:\n        !inContentDisplayPage.value ||\n        (inContentDisplayPage.value && !props.scrolled),\n    },\n  ];\n});\nconst routerLinkInsideArray = computed(() =>{\n  return [\n    {\n      title: t(\"Speakers\"),\n      routeName: \"participants\",\n      condition: true,\n    },\n    {\n      title: t(\"Playlists\"),\n      routeName: \"playlists\",\n      condition: true,\n    },\n    {\n      title: t(\"Productors\"),\n      routeName: \"productors\",\n      condition:\n        !state.generalParameters.podcastmaker && (!filterStore.filterOrgaId || generalStore.platformEducation),\n    },\n  ];\n});\nconst logoUrl = computed(() =>{\n  if (generalStore.platformEducation) {\n    return \"/img/logo_education_white.svg\";\n  }\n  return props.isPhone\n    ? \"/img/logo_octopus_bubble.svg\"\n    : \"/img/logo_saooti_play_white.svg\";\n});\nconst imgUrl = computed(() =>{\n  if (!filterStore.filterImgUrl?.includes(\"emptypodcast\")){\n    return `${filterStore.filterImgUrl}`;\n  }\n  return \"\";\n});\n \n//Methods\nfunction getQueriesRouter(routeName: string) {\n  if (\"podcasts\" !== routeName && \"emissions\" !== routeName  && \"home\" !== routeName) {\n    return { productor: filterStore.filterOrgaId };\n  }\n  return {\n    productor: filterStore.filterOrgaId,\n    iabId: filterStore.filterIab?.id,\n    rubriquesId: rubriqueQueryParam.value,\n  };\n}\n</script>\n\n<style lang=\"scss\">\n\n\n.octopus-app {\n  .top-bar-grid {\n    display: grid;\n    grid-template-columns: 1fr 5fr;\n    padding: 0.5rem 1rem 0 1rem;\n\n    &.scrolled {\n      grid-template-columns: 1fr 2fr 1fr;\n    }\n\n    @media (width <= 450px) {\n      padding: 0 0.5rem;\n    }\n\n    .link-hover {\n      color: white;\n      font-weight: bold;\n      font-size: 0.93rem;\n      text-decoration: underline;\n      text-decoration-color: transparent;\n      transition: text-decoration-color 250ms;\n      text-underline-offset: 8px;\n\n      &.link-hover:hover,\n      &.link-hover.router-link-exact-active.router-link-active {\n        color: white;\n        text-decoration-color: white;\n      }\n    }\n\n    .client-logo {\n      border-radius: var(--octopus-border-radius);\n    }\n\n    .top-bar-logo img {\n      max-width: 140px !important;\n      max-height: 4rem;\n      height: 4rem;\n\n      &.education-logo {\n        height: auto;\n      }\n\n      @media (width <= 650px) {\n        max-height: 2rem;\n      }\n    }\n\n    .octopus-logo {\n      @media (width <= 960px) {\n        max-width: 30px !important;\n      }\n    }\n  }\n}\n</style>\n","<template>\n  <header\n    role=\"banner\"\n    class=\"header-saooti-play\"\n    :style=\"headerBackgroundImage\"\n    :class=\"[generalStore.contentToDisplay ? 'header-img-bg':'bg-gradient', scrolled? 'scrolled':'', needToBlur ? 'header-force-blur':'']\"\n  >\n    <TopBarMainContent\n      :is-phone=\"isPhone\"\n      :scrolled=\"scrolled\"\n      :title-display=\"titleToDisplay\"\n      style=\"height: var(--header-size);\"\n      :class=\"headerBackgroundImage.length ? 'header-opacity':''\"\n      :options=\"options?.topBarMainContent\"\n    />\n  </header>\n\n  <div\n    v-if=\"generalStore.contentToDisplay\"\n    class=\"header-content-bg\"\n    :style=\"headerBackgroundImage\"\n    :class=\"{ scrolled: scrolled, 'header-force-blur':needToBlur }\"\n  >\n    <div class=\"header-additional-content header-content\">\n      <h1 v-if=\"!scrolled\" class=\"text-truncate\">\n        {{ titleToDisplay }}\n      </h1>\n      <SubscribeButtons\n        v-if=\"!authStore.isGarRole && content\"\n        v-show=\"!scrolled\"\n        :content=\"content\"\n        :window-width=\"windowWidth\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport TopBarMainContent, { type TopBarMainContentOptions } from \"./TopBarMainContent.vue\";\nimport { computed, defineAsyncComponent, onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport {useResizePhone} from \"../composable/useResizePhone\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { Canal } from \"@/stores/class/radio/canal\";\nimport axios from \"axios\";\nconst SubscribeButtons = defineAsyncComponent(\n  () => import(\"../display/sharing/SubscribeButtons.vue\"),\n);\n\ndefineProps<{\n  options?: {\n    topBarMainContent?: TopBarMainContentOptions\n  }\n}>();\n\n//Data \nconst scrolled = ref(false);\nconst oldScrollY = ref(0);\nconst minScroll = ref(0);\nconst headerBackgroundImage = ref(\"\");\nconst needToBlur = ref(false);\n\n\n//Composables\nconst { isPhone, windowWidth } = useResizePhone();\nconst { useProxyImageUrl } = useImageProxy();\nconst authStore = useAuthStore();\nconst generalStore = useGeneralStore();\n\n//Computed\nconst titleToDisplay = computed(() => {\n  if ((generalStore.contentToDisplay as Podcast)?.podcastId) {\n    return (generalStore.contentToDisplay as Podcast).emission.name;\n  }\n  if ((generalStore.contentToDisplay as Playlist)?.playlistId) {\n    return (generalStore.contentToDisplay as Playlist).title;\n  }\n  if ((generalStore.contentToDisplay as Emission)?.emissionId) {\n    return (generalStore.contentToDisplay as Emission).name;\n  }\n  if ((generalStore.contentToDisplay as Canal)?.id) {\n    return (generalStore.contentToDisplay as Canal).name;\n  }\n  return \"\";\n});\n\n/** The element displayed by the subscribe buttons */\nconst content = computed(() => {\n  if ((generalStore.contentToDisplay as Podcast)?.podcastId) {\n    return (generalStore.contentToDisplay as Podcast).emission;\n  }\n  if ((generalStore.contentToDisplay as Emission)?.emissionId) {\n    return generalStore.contentToDisplay as Emission;\n  }\n  if ((generalStore.contentToDisplay as Playlist)?.playlistId) {\n    return generalStore.contentToDisplay as Playlist;\n  }\n  return null;\n});\n\n//Watch\nwatch(()=>generalStore.contentToDisplay, async () => {\n  if(!generalStore.contentToDisplay){\n    headerBackgroundImage.value = \"\";\n    needToBlur.value = false;\n    return;\n  }\n  const widthAsked = window.innerWidth > 960 ? \"1600\":\"1000\";\n  const proxyUrl = useProxyImageUrl(generalStore.contentToDisplay.imageUrl, widthAsked, undefined, true);\n  try {\n    const result = await axios.get(proxyUrl);\n    headerBackgroundImage.value = `background-image: url('${result.data}');`;\n    needToBlur.value = result.data === generalStore.contentToDisplay.imageUrl;\n  } catch {\n    if (generalStore.contentToDisplay.imageUrl) {\n      const url = encodeURI(generalStore.contentToDisplay.imageUrl);\n      headerBackgroundImage.value = `background-image: url('${url}');`;\n      needToBlur.value = true;\n    } else {\n      headerBackgroundImage.value = '';\n    }\n  }\n}, {deep: true, immediate: true});\n\n\nonMounted(()=>{\n  window.addEventListener(\"scroll\", handleScroll);\n})\nonBeforeUnmount(() => {\n  window.removeEventListener(\"scroll\", handleScroll);\n})\n\n\n//Methods\nfunction handleScroll(): void {\n  if (\n    window.scrollY - oldScrollY.value > 0 &&\n    window.scrollY > 1 &&\n    document.body.offsetHeight - window.innerHeight > 40\n  ) {\n    if (!scrolled.value) {\n      scrolled.value = true;\n      minScroll.value = 0;\n    }\n  } else if (\n    window.scrollY - oldScrollY.value  < 0 &&\n    window.scrollY < 1 &&\n    minScroll.value > 20\n  ) {\n    scrolled.value = false;\n    minScroll.value = 0;\n  }\n  oldScrollY.value  = window.scrollY;\n  if (minScroll.value < window.scrollY) {\n    minScroll.value = window.scrollY;\n  }\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  --header-size: 5rem;\n  --header-additional-content-size: 22rem;\n  @media (width <= 650px) {\n    --header-size: 3.5rem;\n  }\n  @media (width <= 550px) {\n    --header-additional-content-size: 13rem;\n  }\n  .header-saooti-play{\n    z-index: 11;\n    position: sticky;\n    top: 0;\n    background-color: black;\n    &.header-img-bg{\n      background-position: center -20vw;\n      background-repeat: no-repeat;\n      background-size: cover;\n    }\n    &.bg-gradient, &.scrolled{\n      box-shadow: 0 2px 15px 5px var(--octopus-shadow) !important; \n    }\n  }\n  .header-content-bg{\n    background-position: center calc(calc(var(--header-size) * -1) - 20vw);\n    background-repeat: no-repeat;\n    background-size: cover;\n    width: 100%;\n    display: flex;\n    background-color: black;\n    transition: height 0.7s;\n    height: calc(var(--header-additional-content-size) - var(--header-size));\n    @starting-style {\n      height: 0rem;\n    }\n    &.scrolled {\n      height: 0rem;\n    }\n  }\n  .header-additional-content{\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    width: 100%;\n  }\n  .header-additional-content, .header-opacity{\n    background: oklch(0 0 0 / 0.5);\n  }\n  .header-force-blur .header-additional-content, .header-force-blur .header-opacity{\n    backdrop-filter: blur(8px);\n  }\n  .header-content{\n    *:focus-visible {\n      box-shadow: 0 0 10px 1px white !important;\n    }\n    h1 {\n      color: white !important;\n      font-size: 1.8rem;\n      margin: 2rem 5rem;\n      @media (width <= 550px) {\n        font-size: 1rem;\n        margin: 1rem 0.5rem 0.5rem;\n      }\n    }\n    .admin-button:hover,\n    .share-btn:hover {\n      background: white;\n    }\n  }\n}\n</style>\n","<template>\n  <header\n    role=\"banner\"\n    class=\"header-saooti-play\"\n    :style=\"headerBackgroundImage\"\n    :class=\"[generalStore.contentToDisplay ? 'header-img-bg':'bg-gradient', scrolled? 'scrolled':'', needToBlur ? 'header-force-blur':'']\"\n  >\n    <TopBarMainContent\n      :is-phone=\"isPhone\"\n      :scrolled=\"scrolled\"\n      :title-display=\"titleToDisplay\"\n      style=\"height: var(--header-size);\"\n      :class=\"headerBackgroundImage.length ? 'header-opacity':''\"\n      :options=\"options?.topBarMainContent\"\n    />\n  </header>\n\n  <div\n    v-if=\"generalStore.contentToDisplay\"\n    class=\"header-content-bg\"\n    :style=\"headerBackgroundImage\"\n    :class=\"{ scrolled: scrolled, 'header-force-blur':needToBlur }\"\n  >\n    <div class=\"header-additional-content header-content\">\n      <h1 v-if=\"!scrolled\" class=\"text-truncate\">\n        {{ titleToDisplay }}\n      </h1>\n      <SubscribeButtons\n        v-if=\"!authStore.isGarRole && content\"\n        v-show=\"!scrolled\"\n        :content=\"content\"\n        :window-width=\"windowWidth\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport TopBarMainContent, { type TopBarMainContentOptions } from \"./TopBarMainContent.vue\";\nimport { computed, defineAsyncComponent, onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport {useResizePhone} from \"../composable/useResizePhone\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { Canal } from \"@/stores/class/radio/canal\";\nimport axios from \"axios\";\nconst SubscribeButtons = defineAsyncComponent(\n  () => import(\"../display/sharing/SubscribeButtons.vue\"),\n);\n\ndefineProps<{\n  options?: {\n    topBarMainContent?: TopBarMainContentOptions\n  }\n}>();\n\n//Data \nconst scrolled = ref(false);\nconst oldScrollY = ref(0);\nconst minScroll = ref(0);\nconst headerBackgroundImage = ref(\"\");\nconst needToBlur = ref(false);\n\n\n//Composables\nconst { isPhone, windowWidth } = useResizePhone();\nconst { useProxyImageUrl } = useImageProxy();\nconst authStore = useAuthStore();\nconst generalStore = useGeneralStore();\n\n//Computed\nconst titleToDisplay = computed(() => {\n  if ((generalStore.contentToDisplay as Podcast)?.podcastId) {\n    return (generalStore.contentToDisplay as Podcast).emission.name;\n  }\n  if ((generalStore.contentToDisplay as Playlist)?.playlistId) {\n    return (generalStore.contentToDisplay as Playlist).title;\n  }\n  if ((generalStore.contentToDisplay as Emission)?.emissionId) {\n    return (generalStore.contentToDisplay as Emission).name;\n  }\n  if ((generalStore.contentToDisplay as Canal)?.id) {\n    return (generalStore.contentToDisplay as Canal).name;\n  }\n  return \"\";\n});\n\n/** The element displayed by the subscribe buttons */\nconst content = computed(() => {\n  if ((generalStore.contentToDisplay as Podcast)?.podcastId) {\n    return (generalStore.contentToDisplay as Podcast).emission;\n  }\n  if ((generalStore.contentToDisplay as Emission)?.emissionId) {\n    return generalStore.contentToDisplay as Emission;\n  }\n  if ((generalStore.contentToDisplay as Playlist)?.playlistId) {\n    return generalStore.contentToDisplay as Playlist;\n  }\n  return null;\n});\n\n//Watch\nwatch(()=>generalStore.contentToDisplay, async () => {\n  if(!generalStore.contentToDisplay){\n    headerBackgroundImage.value = \"\";\n    needToBlur.value = false;\n    return;\n  }\n  const widthAsked = window.innerWidth > 960 ? \"1600\":\"1000\";\n  const proxyUrl = useProxyImageUrl(generalStore.contentToDisplay.imageUrl, widthAsked, undefined, true);\n  try {\n    const result = await axios.get(proxyUrl);\n    headerBackgroundImage.value = `background-image: url('${result.data}');`;\n    needToBlur.value = result.data === generalStore.contentToDisplay.imageUrl;\n  } catch {\n    if (generalStore.contentToDisplay.imageUrl) {\n      const url = encodeURI(generalStore.contentToDisplay.imageUrl);\n      headerBackgroundImage.value = `background-image: url('${url}');`;\n      needToBlur.value = true;\n    } else {\n      headerBackgroundImage.value = '';\n    }\n  }\n}, {deep: true, immediate: true});\n\n\nonMounted(()=>{\n  window.addEventListener(\"scroll\", handleScroll);\n})\nonBeforeUnmount(() => {\n  window.removeEventListener(\"scroll\", handleScroll);\n})\n\n\n//Methods\nfunction handleScroll(): void {\n  if (\n    window.scrollY - oldScrollY.value > 0 &&\n    window.scrollY > 1 &&\n    document.body.offsetHeight - window.innerHeight > 40\n  ) {\n    if (!scrolled.value) {\n      scrolled.value = true;\n      minScroll.value = 0;\n    }\n  } else if (\n    window.scrollY - oldScrollY.value  < 0 &&\n    window.scrollY < 1 &&\n    minScroll.value > 20\n  ) {\n    scrolled.value = false;\n    minScroll.value = 0;\n  }\n  oldScrollY.value  = window.scrollY;\n  if (minScroll.value < window.scrollY) {\n    minScroll.value = window.scrollY;\n  }\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  --header-size: 5rem;\n  --header-additional-content-size: 22rem;\n  @media (width <= 650px) {\n    --header-size: 3.5rem;\n  }\n  @media (width <= 550px) {\n    --header-additional-content-size: 13rem;\n  }\n  .header-saooti-play{\n    z-index: 11;\n    position: sticky;\n    top: 0;\n    background-color: black;\n    &.header-img-bg{\n      background-position: center -20vw;\n      background-repeat: no-repeat;\n      background-size: cover;\n    }\n    &.bg-gradient, &.scrolled{\n      box-shadow: 0 2px 15px 5px var(--octopus-shadow) !important; \n    }\n  }\n  .header-content-bg{\n    background-position: center calc(calc(var(--header-size) * -1) - 20vw);\n    background-repeat: no-repeat;\n    background-size: cover;\n    width: 100%;\n    display: flex;\n    background-color: black;\n    transition: height 0.7s;\n    height: calc(var(--header-additional-content-size) - var(--header-size));\n    @starting-style {\n      height: 0rem;\n    }\n    &.scrolled {\n      height: 0rem;\n    }\n  }\n  .header-additional-content{\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    width: 100%;\n  }\n  .header-additional-content, .header-opacity{\n    background: oklch(0 0 0 / 0.5);\n  }\n  .header-force-blur .header-additional-content, .header-force-blur .header-opacity{\n    backdrop-filter: blur(8px);\n  }\n  .header-content{\n    *:focus-visible {\n      box-shadow: 0 0 10px 1px white !important;\n    }\n    h1 {\n      color: white !important;\n      font-size: 1.8rem;\n      margin: 2rem 5rem;\n      @media (width <= 550px) {\n        font-size: 1rem;\n        margin: 1rem 0.5rem 0.5rem;\n      }\n    }\n    .admin-button:hover,\n    .share-btn:hover {\n      background: white;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/TopBar-FHuZ4j9H.mjs

@@ -0,0 +1,358 @@
+import { E as state, i as useAuthStore, r as useFilterStore } from "./classicApi-BKNiWOG4.mjs";
+import { t as useResizePhone } from "./useResizePhone-CpfFUmfV.mjs";
+import { t as useImageProxy } from "./useImageProxy-B2vNJKgd.mjs";
+import { t as useGeneralStore } from "./GeneralStore-CUlq_NjO.mjs";
+import { t as ClassicPopover_default } from "./ClassicPopover-Bk5kf37e.mjs";
+import { t as useRubriquesFilterComputed } from "./useRubriquesFilterComputed-CWUxRSYK.mjs";
+import { t as HomeDropdown_default } from "./HomeDropdown-Dcyt9IM6.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineAsyncComponent, defineComponent, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, resolveComponent, toDisplayString, unref, vShow, watch, withCtx, withDirectives } from "vue";
+import { useI18n } from "vue-i18n";
+import axios from "axios";
+import ChevronDownIcon from "vue-material-design-icons/ChevronDown.vue";
+import MagnifyIcon from "vue-material-design-icons/Magnify.vue";
+//#region src/components/misc/TopBarMainContent.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = ["src"];
+var _hoisted_2$1 = ["src"];
+var _hoisted_3 = {
+	key: 0,
+	class: "text-truncate m-0 align-self-center"
+};
+var _hoisted_4 = ["src"];
+var _hoisted_5 = ["title"];
+var _hoisted_6 = ["src"];
+var _hoisted_7 = {
+	role: "navigation",
+	class: "d-flex align-items-center justify-content-end flex-grow-1"
+};
+var _hoisted_8 = ["aria-label"];
+var _hoisted_9 = { class: "d-flex" };
+var _hoisted_10 = {
+	key: 0,
+	class: "li-style-none"
+};
+var _hoisted_11 = ["title"];
+var _hoisted_12 = { class: "link-hover" };
+var _hoisted_13 = ["aria-label"];
+var _hoisted_14 = { class: "p-0 m-0" };
+var _hoisted_15 = {
+	key: 0,
+	class: "li-style-none"
+};
+//#endregion
+//#region src/components/misc/TopBarMainContent.vue
+var TopBarMainContent_default = /* @__PURE__ */ defineComponent({
+	__name: "TopBarMainContent",
+	props: {
+		isPhone: { type: Boolean },
+		titleDisplay: {},
+		scrolled: { type: Boolean },
+		options: {}
+	},
+	setup(__props) {
+		const MobileMenu = defineAsyncComponent(() => import("./MobileMenu-CdvJhI_5.mjs"));
+		const props = __props;
+		const { t } = useI18n();
+		const { useProxyImageUrl } = useImageProxy();
+		const { rubriqueQueryParam } = useRubriquesFilterComputed();
+		const authStore = useAuthStore();
+		const generalStore = useGeneralStore();
+		const filterStore = useFilterStore();
+		const mobileMenuDisplay = computed(() => props.isPhone || inContentDisplayPage.value);
+		const titleIsDisplayed = computed(() => inContentDisplayPage.value && props.scrolled && !props.isPhone);
+		const inContentDisplayPage = computed(() => 0 !== props.titleDisplay.length);
+		const routerLinkArray = computed(() => {
+			return [
+				{
+					title: t("Radio & Live"),
+					routeName: "lives",
+					condition: !inContentDisplayPage.value && state.generalParameters.isLiveTab && (filterStore.filterOrgaId && filterStore.filterLive || !filterStore.filterOrgaId)
+				},
+				{
+					title: t("Podcasts"),
+					routeName: "podcasts",
+					condition: !inContentDisplayPage.value || inContentDisplayPage.value && !props.scrolled
+				},
+				{
+					title: t("Emissions"),
+					routeName: "emissions",
+					condition: !inContentDisplayPage.value || inContentDisplayPage.value && !props.scrolled
+				}
+			];
+		});
+		const routerLinkInsideArray = computed(() => {
+			return [
+				{
+					title: t("Speakers"),
+					routeName: "participants",
+					condition: true
+				},
+				{
+					title: t("Playlists"),
+					routeName: "playlists",
+					condition: true
+				},
+				{
+					title: t("Productors"),
+					routeName: "productors",
+					condition: !state.generalParameters.podcastmaker && (!filterStore.filterOrgaId || generalStore.platformEducation)
+				}
+			];
+		});
+		const logoUrl = computed(() => {
+			if (generalStore.platformEducation) return "/img/logo_education_white.svg";
+			return props.isPhone ? "/img/logo_octopus_bubble.svg" : "/img/logo_saooti_play_white.svg";
+		});
+		const imgUrl = computed(() => {
+			if (!filterStore.filterImgUrl?.includes("emptypodcast")) return `${filterStore.filterImgUrl}`;
+			return "";
+		});
+		function getQueriesRouter(routeName) {
+			if ("podcasts" !== routeName && "emissions" !== routeName && "home" !== routeName) return { productor: filterStore.filterOrgaId };
+			return {
+				productor: filterStore.filterOrgaId,
+				iabId: filterStore.filterIab?.id,
+				rubriquesId: rubriqueQueryParam.value
+			};
+		}
+		return (_ctx, _cache) => {
+			const _component_router_link = resolveComponent("router-link");
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["top-bar-grid header-content", { scrolled: titleIsDisplayed.value }]) }, [
+				createVNode(_component_router_link, {
+					class: "top-bar-logo d-flex align-items-center",
+					to: {
+						name: "home",
+						query: getQueriesRouter("home")
+					},
+					title: unref(t)("Home")
+				}, {
+					default: withCtx(() => [!unref(filterStore).filterOrgaId || "" === imgUrl.value ? (openBlock(), createElementBlock("img", {
+						key: 0,
+						src: logoUrl.value,
+						"aria-hidden": "true",
+						alt: "",
+						width: "140",
+						height: "50",
+						title: "Logo",
+						class: normalizeClass(unref(generalStore).platformEducation ? "education-logo" : "octopus-logo")
+					}, null, 10, _hoisted_1$1)) : (openBlock(), createElementBlock("img", {
+						key: 1,
+						src: unref(useProxyImageUrl)(imgUrl.value, "", "80"),
+						"aria-hidden": "true",
+						alt: "",
+						class: normalizeClass(["client-logo", unref(generalStore).platformEducation ? "education-logo" : ""]),
+						title: "Logo"
+					}, null, 10, _hoisted_2$1))]),
+					_: 1
+				}, 8, ["to", "title"]),
+				titleIsDisplayed.value ? (openBlock(), createElementBlock("h1", _hoisted_3, toDisplayString(__props.titleDisplay), 1)) : createCommentVNode("", true),
+				createElementVNode("div", { class: normalizeClass(["d-flex", [inContentDisplayPage.value || __props.isPhone ? "flex-row-reverse align-items-center" : "flex-column align-items-end"]]) }, [unref(filterStore).filterOrgaId && "" !== imgUrl.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [unref(authStore).isGarRole ? (openBlock(), createElementBlock("img", {
+					key: 0,
+					src: logoUrl.value,
+					"aria-hidden": "true",
+					alt: "",
+					width: "100",
+					height: "29",
+					class: normalizeClass(["ms-2", unref(generalStore).platformEducation ? "education-logo" : "octopus-logo"]),
+					title: "Logo"
+				}, null, 10, _hoisted_4)) : (openBlock(), createElementBlock("a", {
+					key: 1,
+					href: "https://www.saooti.com/",
+					target: "_blank",
+					rel: "noreferrer noopener",
+					title: unref(t)("New window", { text: "Saooti" })
+				}, [createElementVNode("img", {
+					src: logoUrl.value,
+					"aria-hidden": "true",
+					alt: "",
+					title: "Saooti",
+					width: "100",
+					height: "29",
+					class: normalizeClass(["ms-2", unref(generalStore).platformEducation ? "education-logo" : "octopus-logo"])
+				}, null, 10, _hoisted_6)], 8, _hoisted_5))], 64)) : createCommentVNode("", true), createElementVNode("div", _hoisted_7, [
+					createElementVNode("nav", { "aria-label": unref(t)("Site menu") }, [createElementVNode("ul", _hoisted_9, [(openBlock(true), createElementBlock(Fragment, null, renderList(routerLinkArray.value, (link) => {
+						return openBlock(), createElementBlock(Fragment, { key: link.routeName }, [link.condition ? (openBlock(), createElementBlock("li", _hoisted_10, [withDirectives(createVNode(_component_router_link, {
+							to: {
+								name: link.routeName,
+								query: getQueriesRouter(link.routeName)
+							},
+							class: "link-hover py-2 px-3"
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(link.title), 1)]),
+							_: 2
+						}, 1032, ["to"]), [[vShow, !__props.isPhone]])])) : createCommentVNode("", true)], 64);
+					}), 128))])], 8, _hoisted_8),
+					withDirectives(createElementVNode("button", {
+						id: "more-dropdown",
+						title: unref(t)("More"),
+						class: "d-flex-column flex-nowrap align-items-center btn-transparent py-2 px-3 text-white"
+					}, [createElementVNode("span", _hoisted_12, toDisplayString(unref(t)("More")), 1), createVNode(ChevronDownIcon)], 8, _hoisted_11), [[vShow, !__props.isPhone && !inContentDisplayPage.value]]),
+					createVNode(ClassicPopover_default, {
+						target: "more-dropdown",
+						"only-click": true,
+						"is-fixed": true,
+						"left-pos": true,
+						"is-top-layer": true
+					}, {
+						default: withCtx(() => [createElementVNode("nav", {
+							class: "d-flex flex-column",
+							"aria-label": unref(t)("Site menu")
+						}, [createElementVNode("ul", _hoisted_14, [(openBlock(true), createElementBlock(Fragment, null, renderList(routerLinkInsideArray.value, (link) => {
+							return openBlock(), createElementBlock(Fragment, { key: link.routeName }, [link.condition ? (openBlock(), createElementBlock("li", _hoisted_15, [createVNode(_component_router_link, {
+								to: {
+									name: link.routeName,
+									query: getQueriesRouter(link.routeName)
+								},
+								class: "p-1 octopus-dropdown-item"
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(link.title), 1)]),
+								_: 2
+							}, 1032, ["to"])])) : createCommentVNode("", true)], 64);
+						}), 128))])], 8, _hoisted_13)]),
+						_: 1
+					}),
+					createVNode(unref(MobileMenu), {
+						"is-education": unref(generalStore).platformEducation,
+						show: mobileMenuDisplay.value,
+						"not-podcast-and-emission": inContentDisplayPage.value && !__props.scrolled
+					}, null, 8, [
+						"is-education",
+						"show",
+						"not-podcast-and-emission"
+					]),
+					createVNode(HomeDropdown_default, mergeProps({
+						"is-education": unref(generalStore).platformEducation,
+						"mobile-menu-display": mobileMenuDisplay.value
+					}, __props.options?.homeDropdown), null, 16, ["is-education", "mobile-menu-display"]),
+					withDirectives(createVNode(_component_router_link, {
+						title: unref(t)("Search"),
+						to: { name: "podcasts" },
+						class: "btn admin-button m-1 text-blue-octopus",
+						role: "search"
+					}, {
+						default: withCtx(() => [createVNode(MagnifyIcon, { size: 30 })]),
+						_: 1
+					}, 8, ["title"]), [[vShow, !__props.isPhone && !inContentDisplayPage.value]])
+				])], 2)
+			], 2);
+		};
+	}
+});
+//#endregion
+//#region src/components/misc/TopBar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "header-additional-content header-content" };
+var _hoisted_2 = {
+	key: 0,
+	class: "text-truncate"
+};
+//#endregion
+//#region src/components/misc/TopBar.vue
+var TopBar_default = /* @__PURE__ */ defineComponent({
+	__name: "TopBar",
+	props: { options: {} },
+	setup(__props) {
+		const SubscribeButtons = defineAsyncComponent(() => import("./SubscribeButtons-CHsq-Vk7.mjs").then((n) => n.n));
+		const scrolled = ref(false);
+		const oldScrollY = ref(0);
+		const minScroll = ref(0);
+		const headerBackgroundImage = ref("");
+		const needToBlur = ref(false);
+		const { isPhone, windowWidth } = useResizePhone();
+		const { useProxyImageUrl } = useImageProxy();
+		const authStore = useAuthStore();
+		const generalStore = useGeneralStore();
+		const titleToDisplay = computed(() => {
+			if (generalStore.contentToDisplay?.podcastId) return generalStore.contentToDisplay.emission.name;
+			if (generalStore.contentToDisplay?.playlistId) return generalStore.contentToDisplay.title;
+			if (generalStore.contentToDisplay?.emissionId) return generalStore.contentToDisplay.name;
+			if (generalStore.contentToDisplay?.id) return generalStore.contentToDisplay.name;
+			return "";
+		});
+		/** The element displayed by the subscribe buttons */
+		const content = computed(() => {
+			if (generalStore.contentToDisplay?.podcastId) return generalStore.contentToDisplay.emission;
+			if (generalStore.contentToDisplay?.emissionId) return generalStore.contentToDisplay;
+			if (generalStore.contentToDisplay?.playlistId) return generalStore.contentToDisplay;
+			return null;
+		});
+		watch(() => generalStore.contentToDisplay, async () => {
+			if (!generalStore.contentToDisplay) {
+				headerBackgroundImage.value = "";
+				needToBlur.value = false;
+				return;
+			}
+			const widthAsked = window.innerWidth > 960 ? "1600" : "1000";
+			const proxyUrl = useProxyImageUrl(generalStore.contentToDisplay.imageUrl, widthAsked, void 0, true);
+			try {
+				const result = await axios.get(proxyUrl);
+				headerBackgroundImage.value = `background-image: url('${result.data}');`;
+				needToBlur.value = result.data === generalStore.contentToDisplay.imageUrl;
+			} catch {
+				if (generalStore.contentToDisplay.imageUrl) {
+					headerBackgroundImage.value = `background-image: url('${encodeURI(generalStore.contentToDisplay.imageUrl)}');`;
+					needToBlur.value = true;
+				} else headerBackgroundImage.value = "";
+			}
+		}, {
+			deep: true,
+			immediate: true
+		});
+		onMounted(() => {
+			window.addEventListener("scroll", handleScroll);
+		});
+		onBeforeUnmount(() => {
+			window.removeEventListener("scroll", handleScroll);
+		});
+		function handleScroll() {
+			if (window.scrollY - oldScrollY.value > 0 && window.scrollY > 1 && document.body.offsetHeight - window.innerHeight > 40) {
+				if (!scrolled.value) {
+					scrolled.value = true;
+					minScroll.value = 0;
+				}
+			} else if (window.scrollY - oldScrollY.value < 0 && window.scrollY < 1 && minScroll.value > 20) {
+				scrolled.value = false;
+				minScroll.value = 0;
+			}
+			oldScrollY.value = window.scrollY;
+			if (minScroll.value < window.scrollY) minScroll.value = window.scrollY;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("header", {
+				role: "banner",
+				class: normalizeClass(["header-saooti-play", [
+					unref(generalStore).contentToDisplay ? "header-img-bg" : "bg-gradient",
+					scrolled.value ? "scrolled" : "",
+					needToBlur.value ? "header-force-blur" : ""
+				]]),
+				style: normalizeStyle(headerBackgroundImage.value)
+			}, [createVNode(TopBarMainContent_default, {
+				"is-phone": unref(isPhone),
+				scrolled: scrolled.value,
+				"title-display": titleToDisplay.value,
+				style: { "height": "var(--header-size)" },
+				class: normalizeClass(headerBackgroundImage.value.length ? "header-opacity" : ""),
+				options: __props.options?.topBarMainContent
+			}, null, 8, [
+				"is-phone",
+				"scrolled",
+				"title-display",
+				"class",
+				"options"
+			])], 6), unref(generalStore).contentToDisplay ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(["header-content-bg", {
+					scrolled: scrolled.value,
+					"header-force-blur": needToBlur.value
+				}]),
+				style: normalizeStyle(headerBackgroundImage.value)
+			}, [createElementVNode("div", _hoisted_1, [!scrolled.value ? (openBlock(), createElementBlock("h1", _hoisted_2, toDisplayString(titleToDisplay.value), 1)) : createCommentVNode("", true), !unref(authStore).isGarRole && content.value ? withDirectives((openBlock(), createBlock(unref(SubscribeButtons), {
+				key: 1,
+				content: content.value,
+				"window-width": unref(windowWidth)
+			}, null, 8, ["content", "window-width"])), [[vShow, !scrolled.value]]) : createCommentVNode("", true)])], 6)) : createCommentVNode("", true)], 64);
+		};
+	}
+});
+//#endregion
+export { TopBar_default as default };
+
+//# sourceMappingURL=TopBar-FHuZ4j9H.mjs.map

package/dist/TopBar-FHuZ4j9H.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopBar-FHuZ4j9H.mjs","names":[],"sources":["../src/components/misc/TopBarMainContent.vue","../src/components/misc/TopBarMainContent.vue","../src/components/misc/TopBar.vue","../src/components/misc/TopBar.vue"],"sourcesContent":["<template>\n  <div class=\"top-bar-grid header-content\" :class=\"{ scrolled: titleIsDisplayed }\">\n    <router-link\n      class=\"top-bar-logo d-flex align-items-center\"\n      :to=\"{\n        name: 'home',\n        query: getQueriesRouter('home'),\n      }\"\n      :title=\"t('Home')\"\n    >\n      <img\n        v-if=\"!filterStore.filterOrgaId || '' === imgUrl\"\n        :src=\"logoUrl\"\n        aria-hidden=\"true\"\n        alt=\"\"\n        width=\"140\"\n        height=\"50\"\n        title=\"Logo\"\n        :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n      >\n      <img\n        v-else\n        :src=\"useProxyImageUrl(imgUrl, '', '80')\"\n        aria-hidden=\"true\"\n        alt=\"\"\n        class=\"client-logo\"\n        title=\"Logo\"\n        :class=\"generalStore.platformEducation ? 'education-logo' : ''\"\n      >\n    </router-link>\n    <h1 v-if=\"titleIsDisplayed\" class=\"text-truncate m-0 align-self-center\">\n      {{ titleDisplay }}\n    </h1>\n    <div\n      class=\"d-flex\"\n      :class=\"[\n        inContentDisplayPage || isPhone\n          ? 'flex-row-reverse align-items-center'\n          : 'flex-column align-items-end',\n      ]\"\n    >\n      <template v-if=\"filterStore.filterOrgaId && '' !== imgUrl\">\n        <img\n          v-if=\"authStore.isGarRole\"\n          :src=\"logoUrl\"\n          aria-hidden=\"true\"\n          alt=\"\"\n          width=\"100\"\n          height=\"29\"\n          class=\"ms-2\"\n          title=\"Logo\"\n          :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n        >\n        <a\n          v-else\n          href=\"https://www.saooti.com/\"\n          target=\"_blank\"\n          rel=\"noreferrer noopener\"\n          :title=\"t('New window', {text: 'Saooti'})\"\n        >\n          <img\n            :src=\"logoUrl\"\n            aria-hidden=\"true\"\n            alt=\"\"\n            \n            title=\"Saooti\"\n            width=\"100\"\n            height=\"29\"\n            class=\"ms-2\"\n            :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n          >\n        </a>\n      </template>\n      <div role=\"navigation\" class=\"d-flex align-items-center justify-content-end flex-grow-1\">\n        <nav :aria-label=\"t('Site menu')\">\n          <ul class=\"d-flex\">\n            <template v-for=\"link in routerLinkArray\" :key=\"link.routeName\">\n              <li v-if=\"link.condition\" class=\"li-style-none\">\n                <router-link\n                  v-show=\"!isPhone\"\n                  :to=\"{\n                    name: link.routeName,\n                    query: getQueriesRouter(link.routeName),\n                  }\"\n                  class=\"link-hover py-2 px-3\"\n                >\n                  {{ link.title }}\n                </router-link>\n              </li>\n            </template>\n          </ul>\n        </nav>\n        <button\n          v-show=\"!isPhone && !inContentDisplayPage\"\n          id=\"more-dropdown\"\n          :title=\"t('More')\"\n          class=\"d-flex-column flex-nowrap align-items-center btn-transparent py-2 px-3 text-white\"\n        >\n          <span class=\"link-hover\">\n            {{ t(\"More\") }}\n          </span>\n          <ChevronDownIcon />\n        </button>\n        <ClassicPopover\n          target=\"more-dropdown\"\n          :only-click=\"true\"\n          :is-fixed=\"true\"\n          :left-pos=\"true\"\n          :is-top-layer=\"true\"\n        >\n          <nav class=\"d-flex flex-column\" :aria-label=\"t('Site menu')\">\n            <ul class=\"p-0 m-0\">\n              <template v-for=\"link in routerLinkInsideArray\" :key=\"link.routeName\">\n                <li\n                  v-if=\"link.condition\"\n                  class=\"li-style-none\"\n                >\n                  <router-link\n                    :to=\"{\n                      name: link.routeName,\n                      query: getQueriesRouter(link.routeName),\n                    }\"\n                    class=\"p-1 octopus-dropdown-item\"\n                  >\n                    {{ link.title }}\n                  </router-link>\n                </li>\n              </template>\n            </ul>\n          </nav>\n        </ClassicPopover>\n\n        <MobileMenu\n          :is-education=\"generalStore.platformEducation\"\n          :show=\"mobileMenuDisplay\"\n          :not-podcast-and-emission=\"inContentDisplayPage && !scrolled\"\n        />\n        <HomeDropdown\n          :is-education=\"generalStore.platformEducation\"\n          :mobile-menu-display=\"mobileMenuDisplay\"\n          v-bind=\"options?.homeDropdown\"\n        />\n        <router-link\n          v-show=\"!isPhone && !inContentDisplayPage\"\n          :title=\"t('Search')\"\n          :to=\"{\n            name: 'podcasts',\n          }\"\n          class=\"btn admin-button m-1 text-blue-octopus\"\n          role=\"search\"\n        >\n          <MagnifyIcon :size=\"30\" />\n        </router-link>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport MagnifyIcon from \"vue-material-design-icons/Magnify.vue\";\nimport { useRubriquesFilterComputed } from \"../composable/route/useRubriquesFilterComputed\";\nimport { state } from \"../../stores/ParamSdkStore\";\nimport HomeDropdown, { type HomeDropdownProps } from \"./HomeDropdown.vue\";\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport { useFilterStore } from \"../../stores/FilterStore\";\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport ClassicPopover from \"../misc/ClassicPopover.vue\";\nimport {  defineAsyncComponent, computed } from \"vue\";\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { useI18n } from \"vue-i18n\";\nconst MobileMenu = defineAsyncComponent(() => import(\"./MobileMenu.vue\"));\n\nexport interface TopBarMainContentOptions {\n  homeDropdown?: HomeDropdownProps;\n}\n\nexport interface TopBarMainContentProps {\n  isPhone?: boolean;\n  titleDisplay?: string;\n  scrolled?: boolean;\n};\n\n//Props \nconst props = defineProps<TopBarMainContentProps & {\n  /** Props for subcomponents */\n  options?: TopBarMainContentOptions;\n}>();\n\n\n//Composables\nconst { t } = useI18n();\nconst { useProxyImageUrl } = useImageProxy();\nconst { rubriqueQueryParam } = useRubriquesFilterComputed();\nconst authStore = useAuthStore();\nconst generalStore = useGeneralStore();\nconst filterStore = useFilterStore();\n\n//Computed\nconst mobileMenuDisplay = computed(() => props.isPhone || inContentDisplayPage.value);\nconst titleIsDisplayed = computed(() => inContentDisplayPage.value && props.scrolled && !props.isPhone);\nconst inContentDisplayPage = computed(() => 0 !== props.titleDisplay.length);\nconst routerLinkArray = computed(() =>{\n  return [\n    {\n      title: t(\"Radio & Live\"),\n      routeName: \"lives\",\n      condition:\n        !inContentDisplayPage.value &&\n        (state.generalParameters.isLiveTab as boolean) &&\n        ((filterStore.filterOrgaId && filterStore.filterLive) || !filterStore.filterOrgaId),\n    },\n    {\n      title: t(\"Podcasts\"),\n      routeName: \"podcasts\",\n      condition:\n        !inContentDisplayPage.value ||\n        (inContentDisplayPage.value && !props.scrolled),\n    },\n    {\n      title: t(\"Emissions\"),\n      routeName: \"emissions\",\n      condition:\n        !inContentDisplayPage.value ||\n        (inContentDisplayPage.value && !props.scrolled),\n    },\n  ];\n});\nconst routerLinkInsideArray = computed(() =>{\n  return [\n    {\n      title: t(\"Speakers\"),\n      routeName: \"participants\",\n      condition: true,\n    },\n    {\n      title: t(\"Playlists\"),\n      routeName: \"playlists\",\n      condition: true,\n    },\n    {\n      title: t(\"Productors\"),\n      routeName: \"productors\",\n      condition:\n        !state.generalParameters.podcastmaker && (!filterStore.filterOrgaId || generalStore.platformEducation),\n    },\n  ];\n});\nconst logoUrl = computed(() =>{\n  if (generalStore.platformEducation) {\n    return \"/img/logo_education_white.svg\";\n  }\n  return props.isPhone\n    ? \"/img/logo_octopus_bubble.svg\"\n    : \"/img/logo_saooti_play_white.svg\";\n});\nconst imgUrl = computed(() =>{\n  if (!filterStore.filterImgUrl?.includes(\"emptypodcast\")){\n    return `${filterStore.filterImgUrl}`;\n  }\n  return \"\";\n});\n \n//Methods\nfunction getQueriesRouter(routeName: string) {\n  if (\"podcasts\" !== routeName && \"emissions\" !== routeName  && \"home\" !== routeName) {\n    return { productor: filterStore.filterOrgaId };\n  }\n  return {\n    productor: filterStore.filterOrgaId,\n    iabId: filterStore.filterIab?.id,\n    rubriquesId: rubriqueQueryParam.value,\n  };\n}\n</script>\n\n<style lang=\"scss\">\n\n\n.octopus-app {\n  .top-bar-grid {\n    display: grid;\n    grid-template-columns: 1fr 5fr;\n    padding: 0.5rem 1rem 0 1rem;\n\n    &.scrolled {\n      grid-template-columns: 1fr 2fr 1fr;\n    }\n\n    @media (width <= 450px) {\n      padding: 0 0.5rem;\n    }\n\n    .link-hover {\n      color: white;\n      font-weight: bold;\n      font-size: 0.93rem;\n      text-decoration: underline;\n      text-decoration-color: transparent;\n      transition: text-decoration-color 250ms;\n      text-underline-offset: 8px;\n\n      &.link-hover:hover,\n      &.link-hover.router-link-exact-active.router-link-active {\n        color: white;\n        text-decoration-color: white;\n      }\n    }\n\n    .client-logo {\n      border-radius: var(--octopus-border-radius);\n    }\n\n    .top-bar-logo img {\n      max-width: 140px !important;\n      max-height: 4rem;\n      height: 4rem;\n\n      &.education-logo {\n        height: auto;\n      }\n\n      @media (width <= 650px) {\n        max-height: 2rem;\n      }\n    }\n\n    .octopus-logo {\n      @media (width <= 960px) {\n        max-width: 30px !important;\n      }\n    }\n  }\n}\n</style>\n","<template>\n  <div class=\"top-bar-grid header-content\" :class=\"{ scrolled: titleIsDisplayed }\">\n    <router-link\n      class=\"top-bar-logo d-flex align-items-center\"\n      :to=\"{\n        name: 'home',\n        query: getQueriesRouter('home'),\n      }\"\n      :title=\"t('Home')\"\n    >\n      <img\n        v-if=\"!filterStore.filterOrgaId || '' === imgUrl\"\n        :src=\"logoUrl\"\n        aria-hidden=\"true\"\n        alt=\"\"\n        width=\"140\"\n        height=\"50\"\n        title=\"Logo\"\n        :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n      >\n      <img\n        v-else\n        :src=\"useProxyImageUrl(imgUrl, '', '80')\"\n        aria-hidden=\"true\"\n        alt=\"\"\n        class=\"client-logo\"\n        title=\"Logo\"\n        :class=\"generalStore.platformEducation ? 'education-logo' : ''\"\n      >\n    </router-link>\n    <h1 v-if=\"titleIsDisplayed\" class=\"text-truncate m-0 align-self-center\">\n      {{ titleDisplay }}\n    </h1>\n    <div\n      class=\"d-flex\"\n      :class=\"[\n        inContentDisplayPage || isPhone\n          ? 'flex-row-reverse align-items-center'\n          : 'flex-column align-items-end',\n      ]\"\n    >\n      <template v-if=\"filterStore.filterOrgaId && '' !== imgUrl\">\n        <img\n          v-if=\"authStore.isGarRole\"\n          :src=\"logoUrl\"\n          aria-hidden=\"true\"\n          alt=\"\"\n          width=\"100\"\n          height=\"29\"\n          class=\"ms-2\"\n          title=\"Logo\"\n          :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n        >\n        <a\n          v-else\n          href=\"https://www.saooti.com/\"\n          target=\"_blank\"\n          rel=\"noreferrer noopener\"\n          :title=\"t('New window', {text: 'Saooti'})\"\n        >\n          <img\n            :src=\"logoUrl\"\n            aria-hidden=\"true\"\n            alt=\"\"\n            \n            title=\"Saooti\"\n            width=\"100\"\n            height=\"29\"\n            class=\"ms-2\"\n            :class=\"generalStore.platformEducation ? 'education-logo' : 'octopus-logo'\"\n          >\n        </a>\n      </template>\n      <div role=\"navigation\" class=\"d-flex align-items-center justify-content-end flex-grow-1\">\n        <nav :aria-label=\"t('Site menu')\">\n          <ul class=\"d-flex\">\n            <template v-for=\"link in routerLinkArray\" :key=\"link.routeName\">\n              <li v-if=\"link.condition\" class=\"li-style-none\">\n                <router-link\n                  v-show=\"!isPhone\"\n                  :to=\"{\n                    name: link.routeName,\n                    query: getQueriesRouter(link.routeName),\n                  }\"\n                  class=\"link-hover py-2 px-3\"\n                >\n                  {{ link.title }}\n                </router-link>\n              </li>\n            </template>\n          </ul>\n        </nav>\n        <button\n          v-show=\"!isPhone && !inContentDisplayPage\"\n          id=\"more-dropdown\"\n          :title=\"t('More')\"\n          class=\"d-flex-column flex-nowrap align-items-center btn-transparent py-2 px-3 text-white\"\n        >\n          <span class=\"link-hover\">\n            {{ t(\"More\") }}\n          </span>\n          <ChevronDownIcon />\n        </button>\n        <ClassicPopover\n          target=\"more-dropdown\"\n          :only-click=\"true\"\n          :is-fixed=\"true\"\n          :left-pos=\"true\"\n          :is-top-layer=\"true\"\n        >\n          <nav class=\"d-flex flex-column\" :aria-label=\"t('Site menu')\">\n            <ul class=\"p-0 m-0\">\n              <template v-for=\"link in routerLinkInsideArray\" :key=\"link.routeName\">\n                <li\n                  v-if=\"link.condition\"\n                  class=\"li-style-none\"\n                >\n                  <router-link\n                    :to=\"{\n                      name: link.routeName,\n                      query: getQueriesRouter(link.routeName),\n                    }\"\n                    class=\"p-1 octopus-dropdown-item\"\n                  >\n                    {{ link.title }}\n                  </router-link>\n                </li>\n              </template>\n            </ul>\n          </nav>\n        </ClassicPopover>\n\n        <MobileMenu\n          :is-education=\"generalStore.platformEducation\"\n          :show=\"mobileMenuDisplay\"\n          :not-podcast-and-emission=\"inContentDisplayPage && !scrolled\"\n        />\n        <HomeDropdown\n          :is-education=\"generalStore.platformEducation\"\n          :mobile-menu-display=\"mobileMenuDisplay\"\n          v-bind=\"options?.homeDropdown\"\n        />\n        <router-link\n          v-show=\"!isPhone && !inContentDisplayPage\"\n          :title=\"t('Search')\"\n          :to=\"{\n            name: 'podcasts',\n          }\"\n          class=\"btn admin-button m-1 text-blue-octopus\"\n          role=\"search\"\n        >\n          <MagnifyIcon :size=\"30\" />\n        </router-link>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport MagnifyIcon from \"vue-material-design-icons/Magnify.vue\";\nimport { useRubriquesFilterComputed } from \"../composable/route/useRubriquesFilterComputed\";\nimport { state } from \"../../stores/ParamSdkStore\";\nimport HomeDropdown, { type HomeDropdownProps } from \"./HomeDropdown.vue\";\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport { useFilterStore } from \"../../stores/FilterStore\";\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport ClassicPopover from \"../misc/ClassicPopover.vue\";\nimport {  defineAsyncComponent, computed } from \"vue\";\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { useI18n } from \"vue-i18n\";\nconst MobileMenu = defineAsyncComponent(() => import(\"./MobileMenu.vue\"));\n\nexport interface TopBarMainContentOptions {\n  homeDropdown?: HomeDropdownProps;\n}\n\nexport interface TopBarMainContentProps {\n  isPhone?: boolean;\n  titleDisplay?: string;\n  scrolled?: boolean;\n};\n\n//Props \nconst props = defineProps<TopBarMainContentProps & {\n  /** Props for subcomponents */\n  options?: TopBarMainContentOptions;\n}>();\n\n\n//Composables\nconst { t } = useI18n();\nconst { useProxyImageUrl } = useImageProxy();\nconst { rubriqueQueryParam } = useRubriquesFilterComputed();\nconst authStore = useAuthStore();\nconst generalStore = useGeneralStore();\nconst filterStore = useFilterStore();\n\n//Computed\nconst mobileMenuDisplay = computed(() => props.isPhone || inContentDisplayPage.value);\nconst titleIsDisplayed = computed(() => inContentDisplayPage.value && props.scrolled && !props.isPhone);\nconst inContentDisplayPage = computed(() => 0 !== props.titleDisplay.length);\nconst routerLinkArray = computed(() =>{\n  return [\n    {\n      title: t(\"Radio & Live\"),\n      routeName: \"lives\",\n      condition:\n        !inContentDisplayPage.value &&\n        (state.generalParameters.isLiveTab as boolean) &&\n        ((filterStore.filterOrgaId && filterStore.filterLive) || !filterStore.filterOrgaId),\n    },\n    {\n      title: t(\"Podcasts\"),\n      routeName: \"podcasts\",\n      condition:\n        !inContentDisplayPage.value ||\n        (inContentDisplayPage.value && !props.scrolled),\n    },\n    {\n      title: t(\"Emissions\"),\n      routeName: \"emissions\",\n      condition:\n        !inContentDisplayPage.value ||\n        (inContentDisplayPage.value && !props.scrolled),\n    },\n  ];\n});\nconst routerLinkInsideArray = computed(() =>{\n  return [\n    {\n      title: t(\"Speakers\"),\n      routeName: \"participants\",\n      condition: true,\n    },\n    {\n      title: t(\"Playlists\"),\n      routeName: \"playlists\",\n      condition: true,\n    },\n    {\n      title: t(\"Productors\"),\n      routeName: \"productors\",\n      condition:\n        !state.generalParameters.podcastmaker && (!filterStore.filterOrgaId || generalStore.platformEducation),\n    },\n  ];\n});\nconst logoUrl = computed(() =>{\n  if (generalStore.platformEducation) {\n    return \"/img/logo_education_white.svg\";\n  }\n  return props.isPhone\n    ? \"/img/logo_octopus_bubble.svg\"\n    : \"/img/logo_saooti_play_white.svg\";\n});\nconst imgUrl = computed(() =>{\n  if (!filterStore.filterImgUrl?.includes(\"emptypodcast\")){\n    return `${filterStore.filterImgUrl}`;\n  }\n  return \"\";\n});\n \n//Methods\nfunction getQueriesRouter(routeName: string) {\n  if (\"podcasts\" !== routeName && \"emissions\" !== routeName  && \"home\" !== routeName) {\n    return { productor: filterStore.filterOrgaId };\n  }\n  return {\n    productor: filterStore.filterOrgaId,\n    iabId: filterStore.filterIab?.id,\n    rubriquesId: rubriqueQueryParam.value,\n  };\n}\n</script>\n\n<style lang=\"scss\">\n\n\n.octopus-app {\n  .top-bar-grid {\n    display: grid;\n    grid-template-columns: 1fr 5fr;\n    padding: 0.5rem 1rem 0 1rem;\n\n    &.scrolled {\n      grid-template-columns: 1fr 2fr 1fr;\n    }\n\n    @media (width <= 450px) {\n      padding: 0 0.5rem;\n    }\n\n    .link-hover {\n      color: white;\n      font-weight: bold;\n      font-size: 0.93rem;\n      text-decoration: underline;\n      text-decoration-color: transparent;\n      transition: text-decoration-color 250ms;\n      text-underline-offset: 8px;\n\n      &.link-hover:hover,\n      &.link-hover.router-link-exact-active.router-link-active {\n        color: white;\n        text-decoration-color: white;\n      }\n    }\n\n    .client-logo {\n      border-radius: var(--octopus-border-radius);\n    }\n\n    .top-bar-logo img {\n      max-width: 140px !important;\n      max-height: 4rem;\n      height: 4rem;\n\n      &.education-logo {\n        height: auto;\n      }\n\n      @media (width <= 650px) {\n        max-height: 2rem;\n      }\n    }\n\n    .octopus-logo {\n      @media (width <= 960px) {\n        max-width: 30px !important;\n      }\n    }\n  }\n}\n</style>\n","<template>\n  <header\n    role=\"banner\"\n    class=\"header-saooti-play\"\n    :style=\"headerBackgroundImage\"\n    :class=\"[generalStore.contentToDisplay ? 'header-img-bg':'bg-gradient', scrolled? 'scrolled':'', needToBlur ? 'header-force-blur':'']\"\n  >\n    <TopBarMainContent\n      :is-phone=\"isPhone\"\n      :scrolled=\"scrolled\"\n      :title-display=\"titleToDisplay\"\n      style=\"height: var(--header-size);\"\n      :class=\"headerBackgroundImage.length ? 'header-opacity':''\"\n      :options=\"options?.topBarMainContent\"\n    />\n  </header>\n\n  <div\n    v-if=\"generalStore.contentToDisplay\"\n    class=\"header-content-bg\"\n    :style=\"headerBackgroundImage\"\n    :class=\"{ scrolled: scrolled, 'header-force-blur':needToBlur }\"\n  >\n    <div class=\"header-additional-content header-content\">\n      <h1 v-if=\"!scrolled\" class=\"text-truncate\">\n        {{ titleToDisplay }}\n      </h1>\n      <SubscribeButtons\n        v-if=\"!authStore.isGarRole && content\"\n        v-show=\"!scrolled\"\n        :content=\"content\"\n        :window-width=\"windowWidth\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport TopBarMainContent, { type TopBarMainContentOptions } from \"./TopBarMainContent.vue\";\nimport { computed, defineAsyncComponent, onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport {useResizePhone} from \"../composable/useResizePhone\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { Canal } from \"@/stores/class/radio/canal\";\nimport axios from \"axios\";\nconst SubscribeButtons = defineAsyncComponent(\n  () => import(\"../display/sharing/SubscribeButtons.vue\"),\n);\n\ndefineProps<{\n  options?: {\n    topBarMainContent?: TopBarMainContentOptions\n  }\n}>();\n\n//Data \nconst scrolled = ref(false);\nconst oldScrollY = ref(0);\nconst minScroll = ref(0);\nconst headerBackgroundImage = ref(\"\");\nconst needToBlur = ref(false);\n\n\n//Composables\nconst { isPhone, windowWidth } = useResizePhone();\nconst { useProxyImageUrl } = useImageProxy();\nconst authStore = useAuthStore();\nconst generalStore = useGeneralStore();\n\n//Computed\nconst titleToDisplay = computed(() => {\n  if ((generalStore.contentToDisplay as Podcast)?.podcastId) {\n    return (generalStore.contentToDisplay as Podcast).emission.name;\n  }\n  if ((generalStore.contentToDisplay as Playlist)?.playlistId) {\n    return (generalStore.contentToDisplay as Playlist).title;\n  }\n  if ((generalStore.contentToDisplay as Emission)?.emissionId) {\n    return (generalStore.contentToDisplay as Emission).name;\n  }\n  if ((generalStore.contentToDisplay as Canal)?.id) {\n    return (generalStore.contentToDisplay as Canal).name;\n  }\n  return \"\";\n});\n\n/** The element displayed by the subscribe buttons */\nconst content = computed(() => {\n  if ((generalStore.contentToDisplay as Podcast)?.podcastId) {\n    return (generalStore.contentToDisplay as Podcast).emission;\n  }\n  if ((generalStore.contentToDisplay as Emission)?.emissionId) {\n    return generalStore.contentToDisplay as Emission;\n  }\n  if ((generalStore.contentToDisplay as Playlist)?.playlistId) {\n    return generalStore.contentToDisplay as Playlist;\n  }\n  return null;\n});\n\n//Watch\nwatch(()=>generalStore.contentToDisplay, async () => {\n  if(!generalStore.contentToDisplay){\n    headerBackgroundImage.value = \"\";\n    needToBlur.value = false;\n    return;\n  }\n  const widthAsked = window.innerWidth > 960 ? \"1600\":\"1000\";\n  const proxyUrl = useProxyImageUrl(generalStore.contentToDisplay.imageUrl, widthAsked, undefined, true);\n  try {\n    const result = await axios.get(proxyUrl);\n    headerBackgroundImage.value = `background-image: url('${result.data}');`;\n    needToBlur.value = result.data === generalStore.contentToDisplay.imageUrl;\n  } catch {\n    if (generalStore.contentToDisplay.imageUrl) {\n      const url = encodeURI(generalStore.contentToDisplay.imageUrl);\n      headerBackgroundImage.value = `background-image: url('${url}');`;\n      needToBlur.value = true;\n    } else {\n      headerBackgroundImage.value = '';\n    }\n  }\n}, {deep: true, immediate: true});\n\n\nonMounted(()=>{\n  window.addEventListener(\"scroll\", handleScroll);\n})\nonBeforeUnmount(() => {\n  window.removeEventListener(\"scroll\", handleScroll);\n})\n\n\n//Methods\nfunction handleScroll(): void {\n  if (\n    window.scrollY - oldScrollY.value > 0 &&\n    window.scrollY > 1 &&\n    document.body.offsetHeight - window.innerHeight > 40\n  ) {\n    if (!scrolled.value) {\n      scrolled.value = true;\n      minScroll.value = 0;\n    }\n  } else if (\n    window.scrollY - oldScrollY.value  < 0 &&\n    window.scrollY < 1 &&\n    minScroll.value > 20\n  ) {\n    scrolled.value = false;\n    minScroll.value = 0;\n  }\n  oldScrollY.value  = window.scrollY;\n  if (minScroll.value < window.scrollY) {\n    minScroll.value = window.scrollY;\n  }\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  --header-size: 5rem;\n  --header-additional-content-size: 22rem;\n  @media (width <= 650px) {\n    --header-size: 3.5rem;\n  }\n  @media (width <= 550px) {\n    --header-additional-content-size: 13rem;\n  }\n  .header-saooti-play{\n    z-index: 11;\n    position: sticky;\n    top: 0;\n    background-color: black;\n    &.header-img-bg{\n      background-position: center -20vw;\n      background-repeat: no-repeat;\n      background-size: cover;\n    }\n    &.bg-gradient, &.scrolled{\n      box-shadow: 0 2px 15px 5px var(--octopus-shadow) !important; \n    }\n  }\n  .header-content-bg{\n    background-position: center calc(calc(var(--header-size) * -1) - 20vw);\n    background-repeat: no-repeat;\n    background-size: cover;\n    width: 100%;\n    display: flex;\n    background-color: black;\n    transition: height 0.7s;\n    height: calc(var(--header-additional-content-size) - var(--header-size));\n    @starting-style {\n      height: 0rem;\n    }\n    &.scrolled {\n      height: 0rem;\n    }\n  }\n  .header-additional-content{\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    width: 100%;\n  }\n  .header-additional-content, .header-opacity{\n    background: oklch(0 0 0 / 0.5);\n  }\n  .header-force-blur .header-additional-content, .header-force-blur .header-opacity{\n    backdrop-filter: blur(8px);\n  }\n  .header-content{\n    *:focus-visible {\n      box-shadow: 0 0 10px 1px white !important;\n    }\n    h1 {\n      color: white !important;\n      font-size: 1.8rem;\n      margin: 2rem 5rem;\n      @media (width <= 550px) {\n        font-size: 1rem;\n        margin: 1rem 0.5rem 0.5rem;\n      }\n    }\n    .admin-button:hover,\n    .share-btn:hover {\n      background: white;\n    }\n  }\n}\n</style>\n","<template>\n  <header\n    role=\"banner\"\n    class=\"header-saooti-play\"\n    :style=\"headerBackgroundImage\"\n    :class=\"[generalStore.contentToDisplay ? 'header-img-bg':'bg-gradient', scrolled? 'scrolled':'', needToBlur ? 'header-force-blur':'']\"\n  >\n    <TopBarMainContent\n      :is-phone=\"isPhone\"\n      :scrolled=\"scrolled\"\n      :title-display=\"titleToDisplay\"\n      style=\"height: var(--header-size);\"\n      :class=\"headerBackgroundImage.length ? 'header-opacity':''\"\n      :options=\"options?.topBarMainContent\"\n    />\n  </header>\n\n  <div\n    v-if=\"generalStore.contentToDisplay\"\n    class=\"header-content-bg\"\n    :style=\"headerBackgroundImage\"\n    :class=\"{ scrolled: scrolled, 'header-force-blur':needToBlur }\"\n  >\n    <div class=\"header-additional-content header-content\">\n      <h1 v-if=\"!scrolled\" class=\"text-truncate\">\n        {{ titleToDisplay }}\n      </h1>\n      <SubscribeButtons\n        v-if=\"!authStore.isGarRole && content\"\n        v-show=\"!scrolled\"\n        :content=\"content\"\n        :window-width=\"windowWidth\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport TopBarMainContent, { type TopBarMainContentOptions } from \"./TopBarMainContent.vue\";\nimport { computed, defineAsyncComponent, onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport {useResizePhone} from \"../composable/useResizePhone\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { Canal } from \"@/stores/class/radio/canal\";\nimport axios from \"axios\";\nconst SubscribeButtons = defineAsyncComponent(\n  () => import(\"../display/sharing/SubscribeButtons.vue\"),\n);\n\ndefineProps<{\n  options?: {\n    topBarMainContent?: TopBarMainContentOptions\n  }\n}>();\n\n//Data \nconst scrolled = ref(false);\nconst oldScrollY = ref(0);\nconst minScroll = ref(0);\nconst headerBackgroundImage = ref(\"\");\nconst needToBlur = ref(false);\n\n\n//Composables\nconst { isPhone, windowWidth } = useResizePhone();\nconst { useProxyImageUrl } = useImageProxy();\nconst authStore = useAuthStore();\nconst generalStore = useGeneralStore();\n\n//Computed\nconst titleToDisplay = computed(() => {\n  if ((generalStore.contentToDisplay as Podcast)?.podcastId) {\n    return (generalStore.contentToDisplay as Podcast).emission.name;\n  }\n  if ((generalStore.contentToDisplay as Playlist)?.playlistId) {\n    return (generalStore.contentToDisplay as Playlist).title;\n  }\n  if ((generalStore.contentToDisplay as Emission)?.emissionId) {\n    return (generalStore.contentToDisplay as Emission).name;\n  }\n  if ((generalStore.contentToDisplay as Canal)?.id) {\n    return (generalStore.contentToDisplay as Canal).name;\n  }\n  return \"\";\n});\n\n/** The element displayed by the subscribe buttons */\nconst content = computed(() => {\n  if ((generalStore.contentToDisplay as Podcast)?.podcastId) {\n    return (generalStore.contentToDisplay as Podcast).emission;\n  }\n  if ((generalStore.contentToDisplay as Emission)?.emissionId) {\n    return generalStore.contentToDisplay as Emission;\n  }\n  if ((generalStore.contentToDisplay as Playlist)?.playlistId) {\n    return generalStore.contentToDisplay as Playlist;\n  }\n  return null;\n});\n\n//Watch\nwatch(()=>generalStore.contentToDisplay, async () => {\n  if(!generalStore.contentToDisplay){\n    headerBackgroundImage.value = \"\";\n    needToBlur.value = false;\n    return;\n  }\n  const widthAsked = window.innerWidth > 960 ? \"1600\":\"1000\";\n  const proxyUrl = useProxyImageUrl(generalStore.contentToDisplay.imageUrl, widthAsked, undefined, true);\n  try {\n    const result = await axios.get(proxyUrl);\n    headerBackgroundImage.value = `background-image: url('${result.data}');`;\n    needToBlur.value = result.data === generalStore.contentToDisplay.imageUrl;\n  } catch {\n    if (generalStore.contentToDisplay.imageUrl) {\n      const url = encodeURI(generalStore.contentToDisplay.imageUrl);\n      headerBackgroundImage.value = `background-image: url('${url}');`;\n      needToBlur.value = true;\n    } else {\n      headerBackgroundImage.value = '';\n    }\n  }\n}, {deep: true, immediate: true});\n\n\nonMounted(()=>{\n  window.addEventListener(\"scroll\", handleScroll);\n})\nonBeforeUnmount(() => {\n  window.removeEventListener(\"scroll\", handleScroll);\n})\n\n\n//Methods\nfunction handleScroll(): void {\n  if (\n    window.scrollY - oldScrollY.value > 0 &&\n    window.scrollY > 1 &&\n    document.body.offsetHeight - window.innerHeight > 40\n  ) {\n    if (!scrolled.value) {\n      scrolled.value = true;\n      minScroll.value = 0;\n    }\n  } else if (\n    window.scrollY - oldScrollY.value  < 0 &&\n    window.scrollY < 1 &&\n    minScroll.value > 20\n  ) {\n    scrolled.value = false;\n    minScroll.value = 0;\n  }\n  oldScrollY.value  = window.scrollY;\n  if (minScroll.value < window.scrollY) {\n    minScroll.value = window.scrollY;\n  }\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  --header-size: 5rem;\n  --header-additional-content-size: 22rem;\n  @media (width <= 650px) {\n    --header-size: 3.5rem;\n  }\n  @media (width <= 550px) {\n    --header-additional-content-size: 13rem;\n  }\n  .header-saooti-play{\n    z-index: 11;\n    position: sticky;\n    top: 0;\n    background-color: black;\n    &.header-img-bg{\n      background-position: center -20vw;\n      background-repeat: no-repeat;\n      background-size: cover;\n    }\n    &.bg-gradient, &.scrolled{\n      box-shadow: 0 2px 15px 5px var(--octopus-shadow) !important; \n    }\n  }\n  .header-content-bg{\n    background-position: center calc(calc(var(--header-size) * -1) - 20vw);\n    background-repeat: no-repeat;\n    background-size: cover;\n    width: 100%;\n    display: flex;\n    background-color: black;\n    transition: height 0.7s;\n    height: calc(var(--header-additional-content-size) - var(--header-size));\n    @starting-style {\n      height: 0rem;\n    }\n    &.scrolled {\n      height: 0rem;\n    }\n  }\n  .header-additional-content{\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    width: 100%;\n  }\n  .header-additional-content, .header-opacity{\n    background: oklch(0 0 0 / 0.5);\n  }\n  .header-force-blur .header-additional-content, .header-force-blur .header-opacity{\n    backdrop-filter: blur(8px);\n  }\n  .header-content{\n    *:focus-visible {\n      box-shadow: 0 0 10px 1px white !important;\n    }\n    h1 {\n      color: white !important;\n      font-size: 1.8rem;\n      margin: 2rem 5rem;\n      @media (width <= 550px) {\n        font-size: 1rem;\n        margin: 1rem 0.5rem 0.5rem;\n      }\n    }\n    .admin-button:hover,\n    .share-btn:hover {\n      background: white;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/TuninIcon-BplDWgtD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuninIcon-BplDWgtD.mjs","names":[],"sources":["../src/components/icons/TuninIcon.vue","../src/components/icons/TuninIcon.vue"],"sourcesContent":["<template>\n  <span\n    :aria-hidden=\"!title\"\n    class=\"material-design-icon\"\n    :title=\"title\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"26 56 250 88\"\n      :fill=\"fillColor\"\n      :height=\"size\"\n      :width=\"size\"\n    >\n      <path\n        d=\"M95,96.8v4c0,0.4-0.4,0.8-0.8,0.8h-5c-0.2,0-0.4,0.2-0.4,0.4v21.2c0,0.4-0.4,0.8-0.8,0.8h-4     c-0.4,0-0.8-0.4-0.8-0.8V102c0-0.2-0.2-0.4-0.4-0.4h-5c-0.4,0-0.8-0.4-0.8-0.8v-4c0-0.4,0.4-0.8,0.8-0.8h16.4     C94.6,96,95,96.4,95,96.8z M117,96h-4c-0.4,0-0.8,0.4-0.8,0.8v18.8c0,1.8-1.4,3.2-3.9,3.2c-2.4,0-3.8-1.4-3.8-3.2V96.8     c0-0.4-0.4-0.8-0.8-0.8h-4c-0.4,0-0.8,0.4-0.8,0.8v18.8c0,4.8,4,8.8,9.4,8.8c5.5,0,9.5-4,9.5-8.8V96.8     C117.8,96.4,117.4,96,117,96z M139.6,96h-4c-0.4,0-0.8,0.4-0.8,0.8v15c0,0.2-0.3,0.3-0.4,0.1l-5.5-15.2c-0.1-0.4-0.4-0.7-1-0.7     h-4.8c-0.4,0-0.8,0.4-0.8,0.8v26.4c0,0.4,0.4,0.8,0.8,0.8h4c0.4,0,0.8-0.4,0.8-0.8v-13.8c0-0.2,0.3-0.3,0.4-0.1l5.4,14     c0.1,0.3,0.4,0.7,1.1,0.7h4.7c0.4,0,0.8-0.4,0.8-0.8V96.8C140.4,96.4,140,96,139.6,96z M160.3,118.4h-9.5c-0.2,0-0.4-0.2-0.4-0.4     v-4.8c0-0.2,0.2-0.4,0.4-0.4h9c0.4,0,0.8-0.4,0.8-0.8v-4c0-0.4-0.4-0.8-0.8-0.8h-9c-0.2,0-0.4-0.2-0.4-0.4V102     c0-0.2,0.2-0.4,0.4-0.4h9.3c0.4,0,0.8-0.4,0.8-0.8v-4c0-0.4-0.4-0.8-0.8-0.8h-14.5c-0.4,0-0.8,0.4-0.8,0.8v26.4     c0,0.4,0.4,0.8,0.8,0.8h14.7c0.4,0,0.8-0.4,0.8-0.8v-4C161.1,118.8,160.7,118.4,160.3,118.4z M256,59v62c0,1.7-1.3,3-3,3h-69v17     c0,1.7-1.3,3-3,3H59c-1.7,0-3-1.3-3-3V79c0-1.7,1.3-3,3-3h119V59c0-1.7,1.3-3,3-3h72C254.7,56,256,57.3,256,59z M178,82H62.5     c-0.3,0-0.5,0.2-0.5,0.5v55c0,0.3,0.2,0.5,0.5,0.5h115c0.3,0,0.5-0.2,0.5-0.5V82z M213.8,99.4c0-0.4-0.4-0.8-0.8-0.8h-3.4     c-0.2,0-0.4-0.2-0.4-0.4V81.8c0-0.2,0.2-0.4,0.4-0.4h3c0.4,0,0.8-0.4,0.8-0.8v-3.8c0-0.4-0.4-0.8-0.8-0.8h-12.4     c-0.4,0-0.8,0.4-0.8,0.8v3.8c0,0.4,0.4,0.8,0.8,0.8h3c0.2,0,0.4,0.2,0.4,0.4v16.4c0,0.2-0.2,0.4-0.4,0.4h-3.4     c-0.4,0-0.8,0.4-0.8,0.8v3.8c0,0.4,0.4,0.8,0.8,0.8H213c0.4,0,0.8-0.4,0.8-0.8V99.4z M236.2,76.8c0-0.4-0.4-0.8-0.8-0.8h-4     c-0.4,0-0.8,0.4-0.8,0.8v15c0,0.2-0.3,0.3-0.4,0.1l-5.5-15.2c-0.1-0.4-0.4-0.7-1-0.7H219c-0.4,0-0.8,0.4-0.8,0.8v26.4     c0,0.4,0.4,0.8,0.8,0.8h4c0.4,0,0.8-0.4,0.8-0.8V89.4c0-0.2,0.3-0.3,0.4-0.1l5.4,14c0.1,0.3,0.4,0.7,1.1,0.7h4.7     c0.4,0,0.8-0.4,0.8-0.8V76.8z\"\n      />\n    </svg>\n  </span>\n</template>\n\n<script setup lang=\"ts\">\n//Props \ndefineProps({\n  size: { default: 24, type: Number },\n  title: { default: undefined, type: String },\n  fillColor: { default: \"currentColor\", type: String },\n})\n</script>","<template>\n  <span\n    :aria-hidden=\"!title\"\n    class=\"material-design-icon\"\n    :title=\"title\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"26 56 250 88\"\n      :fill=\"fillColor\"\n      :height=\"size\"\n      :width=\"size\"\n    >\n      <path\n        d=\"M95,96.8v4c0,0.4-0.4,0.8-0.8,0.8h-5c-0.2,0-0.4,0.2-0.4,0.4v21.2c0,0.4-0.4,0.8-0.8,0.8h-4     c-0.4,0-0.8-0.4-0.8-0.8V102c0-0.2-0.2-0.4-0.4-0.4h-5c-0.4,0-0.8-0.4-0.8-0.8v-4c0-0.4,0.4-0.8,0.8-0.8h16.4     C94.6,96,95,96.4,95,96.8z M117,96h-4c-0.4,0-0.8,0.4-0.8,0.8v18.8c0,1.8-1.4,3.2-3.9,3.2c-2.4,0-3.8-1.4-3.8-3.2V96.8     c0-0.4-0.4-0.8-0.8-0.8h-4c-0.4,0-0.8,0.4-0.8,0.8v18.8c0,4.8,4,8.8,9.4,8.8c5.5,0,9.5-4,9.5-8.8V96.8     C117.8,96.4,117.4,96,117,96z M139.6,96h-4c-0.4,0-0.8,0.4-0.8,0.8v15c0,0.2-0.3,0.3-0.4,0.1l-5.5-15.2c-0.1-0.4-0.4-0.7-1-0.7     h-4.8c-0.4,0-0.8,0.4-0.8,0.8v26.4c0,0.4,0.4,0.8,0.8,0.8h4c0.4,0,0.8-0.4,0.8-0.8v-13.8c0-0.2,0.3-0.3,0.4-0.1l5.4,14     c0.1,0.3,0.4,0.7,1.1,0.7h4.7c0.4,0,0.8-0.4,0.8-0.8V96.8C140.4,96.4,140,96,139.6,96z M160.3,118.4h-9.5c-0.2,0-0.4-0.2-0.4-0.4     v-4.8c0-0.2,0.2-0.4,0.4-0.4h9c0.4,0,0.8-0.4,0.8-0.8v-4c0-0.4-0.4-0.8-0.8-0.8h-9c-0.2,0-0.4-0.2-0.4-0.4V102     c0-0.2,0.2-0.4,0.4-0.4h9.3c0.4,0,0.8-0.4,0.8-0.8v-4c0-0.4-0.4-0.8-0.8-0.8h-14.5c-0.4,0-0.8,0.4-0.8,0.8v26.4     c0,0.4,0.4,0.8,0.8,0.8h14.7c0.4,0,0.8-0.4,0.8-0.8v-4C161.1,118.8,160.7,118.4,160.3,118.4z M256,59v62c0,1.7-1.3,3-3,3h-69v17     c0,1.7-1.3,3-3,3H59c-1.7,0-3-1.3-3-3V79c0-1.7,1.3-3,3-3h119V59c0-1.7,1.3-3,3-3h72C254.7,56,256,57.3,256,59z M178,82H62.5     c-0.3,0-0.5,0.2-0.5,0.5v55c0,0.3,0.2,0.5,0.5,0.5h115c0.3,0,0.5-0.2,0.5-0.5V82z M213.8,99.4c0-0.4-0.4-0.8-0.8-0.8h-3.4     c-0.2,0-0.4-0.2-0.4-0.4V81.8c0-0.2,0.2-0.4,0.4-0.4h3c0.4,0,0.8-0.4,0.8-0.8v-3.8c0-0.4-0.4-0.8-0.8-0.8h-12.4     c-0.4,0-0.8,0.4-0.8,0.8v3.8c0,0.4,0.4,0.8,0.8,0.8h3c0.2,0,0.4,0.2,0.4,0.4v16.4c0,0.2-0.2,0.4-0.4,0.4h-3.4     c-0.4,0-0.8,0.4-0.8,0.8v3.8c0,0.4,0.4,0.8,0.8,0.8H213c0.4,0,0.8-0.4,0.8-0.8V99.4z M236.2,76.8c0-0.4-0.4-0.8-0.8-0.8h-4     c-0.4,0-0.8,0.4-0.8,0.8v15c0,0.2-0.3,0.3-0.4,0.1l-5.5-15.2c-0.1-0.4-0.4-0.7-1-0.7H219c-0.4,0-0.8,0.4-0.8,0.8v26.4     c0,0.4,0.4,0.8,0.8,0.8h4c0.4,0,0.8-0.4,0.8-0.8V89.4c0-0.2,0.3-0.3,0.4-0.1l5.4,14c0.1,0.3,0.4,0.7,1.1,0.7h4.7     c0.4,0,0.8-0.4,0.8-0.8V76.8z\"\n      />\n    </svg>\n  </span>\n</template>\n\n<script setup lang=\"ts\">\n//Props \ndefineProps({\n  size: { default: 24, type: Number },\n  title: { default: undefined, type: String },\n  fillColor: { default: \"currentColor\", type: String },\n})\n</script>"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBCCE,mBAgBO,QAAA;EAfJ,eAAW,CAAG,OAAA;EACf,OAAM;EACL,OAAO,OAAA;mBAER,mBAUM,OAAA;EATJ,OAAM;EACN,SAAQ;EACP,MAAM,OAAA;EACN,QAAQ,OAAA;EACR,OAAO,OAAA;mCAER,mBAEE,QAAA,EADA,GAAE,q9DAAo9D,GAAA,MAAA,EAAA,CAAA,EAAA,GAAA,GAAA,UAAA,EAAA,GAAA,GAAA,UAAA"}