{"version":3,"file":"CountdownOctopus-i6-l0aLA.mjs","names":[],"sources":["../src/components/display/live/CountdownOctopus.vue","../src/components/display/live/CountdownOctopus.vue"],"sourcesContent":["<template>\n  <div class=\"cute-octopus\">\n    <div class=\"leg-1\" />\n    <div class=\"head-shape\" />\n    <div class=\"octopus-head\">\n      <div class=\"eyes\" />\n      <div class=\"blush\" />\n      <div class=\"mouth\" />\n    </div>\n    <div class=\"thought\">\n      <template v-if=\"!props.overrideText\">\n        {{ t(\"This live will start\") }}\n        <span class=\"text-lowercase\">\n          <template v-if=\"countdownTimer\">\n            {{\n              t(\"In days hours minutes seconds\", countdownValues)\n            }}\n          </template>\n          <template v-else>\n            {{ t(\"In a moment\") }}\n          </template>\n        </span>\n      </template>\n      <template v-else>\n        {{ props.overrideText }}\n      </template>\n    </div>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { useI18n } from \"vue-i18n\";\nimport {useCountdown} from \"../../composable/podcasts/useCountdown\";\n\n//Props \nconst props = defineProps({\n  timeRemaining:{ default: undefined, type: Number },\n  overrideText: { default: undefined, type: String },\n})\n\n//Composables\nconst { t } = useI18n();\nconst { countdownValues, countdownTimer } = useCountdown(props.timeRemaining);\n</script>\n\n<style lang=\"scss\">\n\n.octopus-app .cute-octopus {\n  --octopus-position: 120px;\n  --color-thought: oklch(100% 0 0deg);\n  --color-dark: oklch(23.3% 0.0031 17.38deg);\n  --color-green: oklch(82.34% 0.1185 160.23deg);\n\n  position: relative;\n  width: 230px;\n  height: 300px;\n  margin: auto;\n  filter: drop-shadow(3px 0 5px var(--color-dark));\n\n  .head-shape {\n    position: absolute;\n    top: var(--octopus-position);\n    left: 0;\n    height: 88px;\n    width: 120px;\n    background: var(--octopus-primary);\n    border-radius: 50% 50% 20% 20%;\n  }\n\n  .eyes,\n  .eyes::after {\n    position: absolute;\n    top: calc( 31.5px + var(--octopus-position) );\n    left: 34.5px;\n    width: 13px;\n    height: 13px;\n    background: var(--color-dark);\n    border-radius: 50%;\n    animation: blinking 3s ease-in-out infinite alternate;\n  }\n\n  .eyes::after {\n    content: \"\";\n    top: 0;\n    left: 41.25px;\n  }\n\n  .blush {\n    position: absolute;\n    top: calc(36px + var(--octopus-position));\n    left: 9.7px;\n    width: 20px;\n    height: 20px;\n    background: var(--color-green);\n    border-radius: 50%;\n    box-shadow: 80px 0 0 0 var(--color-green);\n  }\n\n  .mouth {\n    position: absolute;\n    top: calc(36px + var(--octopus-position));\n    left: 51.7px;\n    width: 20px;\n    height: 20px;\n    background: transparent;\n    border-radius: 50%;\n    box-shadow: 0 7px 0 var(--color-dark);\n    animation: mouth-open 2s ease-in-out infinite alternate;\n  }\n\n  .leg-1,\n  .leg-1::before,\n  .leg-1::after {\n    position: absolute;\n    top: calc(36px + var(--octopus-position));\n    left: 0;\n    height: 77px;\n    width: 26px;\n    background: var(--octopus-primary);\n    border-radius: 20% 20% 50% 50%;\n    animation: move-left-small 1.5s ease-in-out infinite alternate;\n    transform: rotate(20deg);\n  }\n\n  .leg-1::after {\n    content: \"\";\n    top: -9.7px;\n    left: 31.5px;\n  }\n\n  .leg-1::before {\n    animation: move-left 1.5s ease-in-out infinite alternate;\n    content: \"\";\n    top: -26px;\n    left: 87.7px;\n    box-shadow: -31.5px 0 0 0 var(--octopus-primary);\n    transform: rotate(-35deg);\n  }\n\n  @keyframes move-left {\n    to {\n      transform: translateY(20px);\n    }\n  }\n\n  @keyframes move-left-small {\n    to {\n      transform: translateY(9.7px);\n    }\n  }\n\n  @keyframes blinking {\n    0%,\n    50%,\n    80% {\n      background: linear-gradient(var(--color-dark) 100%, transparent 100%);\n    }\n\n    60%,\n    100% {\n      background: linear-gradient(\n        transparent 23%,\n        var(--color-dark) 23%,\n        transparent 30%\n      );\n    }\n  }\n\n  @keyframes mouth-open {\n    to {\n      box-shadow: -3.5px 13px 0 0 var(--color-dark);\n    }\n  }\n\n  .thought {\n    z-index: 1;\n    text-align: center;\n    background-color: var(--color-thought);\n    padding: 20px;\n    border-radius: 30px;\n    width: 220px;\n    position: absolute;\n    font-size: 14px;\n  }\n\n  .thought::before,\n  .thought::after {\n    content: \"\";\n    background-color: var(--color-thought);\n    border-radius: 50%;\n    display: block;\n    position: absolute;\n    z-index: -1;\n  }\n\n  .thought::before {\n    width: 44px;\n    height: 44px;\n    top: -12px;\n    left: 28px;\n    box-shadow: -50px 30px 0 -12px var(--color-thought);\n  }\n\n  .thought::after {\n    bottom: -10px;\n    right: 26px;\n    width: 30px;\n    height: 30px;\n    box-shadow:\n      40px -34px 0 0 var(--color-thought),\n      -28px -6px 0 -2px var(--color-thought),\n      -24px 17px 0 -6px var(--color-thought),\n      -5px 25px 0 -10px var(--color-thought);\n  }\n}\n</style>\n","<template>\n  <div class=\"cute-octopus\">\n    <div class=\"leg-1\" />\n    <div class=\"head-shape\" />\n    <div class=\"octopus-head\">\n      <div class=\"eyes\" />\n      <div class=\"blush\" />\n      <div class=\"mouth\" />\n    </div>\n    <div class=\"thought\">\n      <template v-if=\"!props.overrideText\">\n        {{ t(\"This live will start\") }}\n        <span class=\"text-lowercase\">\n          <template v-if=\"countdownTimer\">\n            {{\n              t(\"In days hours minutes seconds\", countdownValues)\n            }}\n          </template>\n          <template v-else>\n            {{ t(\"In a moment\") }}\n          </template>\n        </span>\n      </template>\n      <template v-else>\n        {{ props.overrideText }}\n      </template>\n    </div>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { useI18n } from \"vue-i18n\";\nimport {useCountdown} from \"../../composable/podcasts/useCountdown\";\n\n//Props \nconst props = defineProps({\n  timeRemaining:{ default: undefined, type: Number },\n  overrideText: { default: undefined, type: String },\n})\n\n//Composables\nconst { t } = useI18n();\nconst { countdownValues, countdownTimer } = useCountdown(props.timeRemaining);\n</script>\n\n<style lang=\"scss\">\n\n.octopus-app .cute-octopus {\n  --octopus-position: 120px;\n  --color-thought: oklch(100% 0 0deg);\n  --color-dark: oklch(23.3% 0.0031 17.38deg);\n  --color-green: oklch(82.34% 0.1185 160.23deg);\n\n  position: relative;\n  width: 230px;\n  height: 300px;\n  margin: auto;\n  filter: drop-shadow(3px 0 5px var(--color-dark));\n\n  .head-shape {\n    position: absolute;\n    top: var(--octopus-position);\n    left: 0;\n    height: 88px;\n    width: 120px;\n    background: var(--octopus-primary);\n    border-radius: 50% 50% 20% 20%;\n  }\n\n  .eyes,\n  .eyes::after {\n    position: absolute;\n    top: calc( 31.5px + var(--octopus-position) );\n    left: 34.5px;\n    width: 13px;\n    height: 13px;\n    background: var(--color-dark);\n    border-radius: 50%;\n    animation: blinking 3s ease-in-out infinite alternate;\n  }\n\n  .eyes::after {\n    content: \"\";\n    top: 0;\n    left: 41.25px;\n  }\n\n  .blush {\n    position: absolute;\n    top: calc(36px + var(--octopus-position));\n    left: 9.7px;\n    width: 20px;\n    height: 20px;\n    background: var(--color-green);\n    border-radius: 50%;\n    box-shadow: 80px 0 0 0 var(--color-green);\n  }\n\n  .mouth {\n    position: absolute;\n    top: calc(36px + var(--octopus-position));\n    left: 51.7px;\n    width: 20px;\n    height: 20px;\n    background: transparent;\n    border-radius: 50%;\n    box-shadow: 0 7px 0 var(--color-dark);\n    animation: mouth-open 2s ease-in-out infinite alternate;\n  }\n\n  .leg-1,\n  .leg-1::before,\n  .leg-1::after {\n    position: absolute;\n    top: calc(36px + var(--octopus-position));\n    left: 0;\n    height: 77px;\n    width: 26px;\n    background: var(--octopus-primary);\n    border-radius: 20% 20% 50% 50%;\n    animation: move-left-small 1.5s ease-in-out infinite alternate;\n    transform: rotate(20deg);\n  }\n\n  .leg-1::after {\n    content: \"\";\n    top: -9.7px;\n    left: 31.5px;\n  }\n\n  .leg-1::before {\n    animation: move-left 1.5s ease-in-out infinite alternate;\n    content: \"\";\n    top: -26px;\n    left: 87.7px;\n    box-shadow: -31.5px 0 0 0 var(--octopus-primary);\n    transform: rotate(-35deg);\n  }\n\n  @keyframes move-left {\n    to {\n      transform: translateY(20px);\n    }\n  }\n\n  @keyframes move-left-small {\n    to {\n      transform: translateY(9.7px);\n    }\n  }\n\n  @keyframes blinking {\n    0%,\n    50%,\n    80% {\n      background: linear-gradient(var(--color-dark) 100%, transparent 100%);\n    }\n\n    60%,\n    100% {\n      background: linear-gradient(\n        transparent 23%,\n        var(--color-dark) 23%,\n        transparent 30%\n      );\n    }\n  }\n\n  @keyframes mouth-open {\n    to {\n      box-shadow: -3.5px 13px 0 0 var(--color-dark);\n    }\n  }\n\n  .thought {\n    z-index: 1;\n    text-align: center;\n    background-color: var(--color-thought);\n    padding: 20px;\n    border-radius: 30px;\n    width: 220px;\n    position: absolute;\n    font-size: 14px;\n  }\n\n  .thought::before,\n  .thought::after {\n    content: \"\";\n    background-color: var(--color-thought);\n    border-radius: 50%;\n    display: block;\n    position: absolute;\n    z-index: -1;\n  }\n\n  .thought::before {\n    width: 44px;\n    height: 44px;\n    top: -12px;\n    left: 28px;\n    box-shadow: -50px 30px 0 -12px var(--color-thought);\n  }\n\n  .thought::after {\n    bottom: -10px;\n    right: 26px;\n    width: 30px;\n    height: 30px;\n    box-shadow:\n      40px -34px 0 0 var(--color-thought),\n      -28px -6px 0 -2px var(--color-thought),\n      -24px 17px 0 -6px var(--color-thought),\n      -5px 25px 0 -10px var(--color-thought);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAkCA,MAAM,QAAQ;EAMd,MAAM,EAAE,MAAM,QAAQ;EACtB,MAAM,EAAE,iBAAiB,mBAAmB,aAAa,MAAM,aAAa;;;;;;;;;;;;;;;;mBCxCrE,OAAM,eAAc;mBAQlB,OAAM,UAAS;mBAGV,OAAM,iBAAgB;;qBAXlC,mBA0BM,OA1BN,YA0BM,CAAA,OAAA,OAAA,OAAA,KAAA,kBAAA,iLAAA,CAAA,IAlBJ,mBAiBM,OAjBN,YAiBM,CAAA,CAhBa,OAAA,MAAM,gBAAA,UAAA,GAAvB,mBAYW,UAAA,EAAA,KAAA,EAAA,GAAA,CAAA,gBAAA,gBAXN,OAAA,EAAC,sBAAA,CAAA,IAA2B,KAC/B,CAAA,GAAA,mBASO,QATP,YASO,CARW,OAAA,kBAAA,UAAA,GAAhB,mBAIW,UAAA,EAAA,KAAA,EAAA,GAAA,CAAA,gBAAA,gBAFP,OAAA,EAAC,iCAAkC,OAAA,eAAe,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,MAAA,UAAA,GAGtD,mBAEW,UAAA,EAAA,KAAA,EAAA,GAAA,CAAA,gBAAA,gBADN,OAAA,EAAC,aAAA,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,CAAA,CAAA,GAAA,EAAA,MAAA,UAAA,GAIV,mBAEW,UAAA,EAAA,KAAA,EAAA,GAAA,CAAA,gBAAA,gBADN,OAAA,MAAM,YAAY,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,CAAA,CAAA,CAAA"}