{"version":3,"file":"ProgressBar-ButRLZKn.mjs","names":[],"sources":["../src/components/misc/ProgressBar.vue","../src/components/misc/ProgressBar.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"!inPlayer || display\"\n    id=\"test-menu-dropdown\"\n    class=\"octopus-progress\"\n  >\n    <div\n      v-if=\"secondaryProgress\"\n      class=\"octopus-progress-bar bg-warning\"\n      aria-valuenow=\"0\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      :aria-label=\"t('Live progress bar')\"\n      :style=\"'width: ' + secondaryProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerMedia\">\n      <div\n        v-if=\"mediaCueInPercent > 0\"\n        class=\"octopus-progress-bar bg-complementary\"\n        :style=\"{ width: +mediaCueInPercent + '%' }\"\n      />\n      <div\n        v-if=\"mediaCueOutPercent < 100\"\n        class=\"octopus-progress-bar end-0 bg-complementary\"\n        :style=\"{ width: +100 - mediaCueOutPercent + '%' }\"\n      />\n    </template>\n    <div\n      class=\"octopus-progress-bar current-progress\"\n      aria-valuenow=\"0\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      :aria-label=\"t('Listening progress bar')\"\n      :style=\"'width: ' + mainProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerMedia\">\n      <div\n        v-if=\"mediaCueInPercent > 0\"\n        class=\"octopus-progress-bar octopus-progress-bar-duration bg-complementary\"\n        :style=\"{ left: +mediaCueInPercent + '%' }\"\n      />\n      <div\n        v-if=\"mediaCueOutPercent < 100\"\n        class=\"octopus-progress-bar end-0 octopus-progress-bar-duration bg-complementary\"\n        :style=\"{ right: +100 - mediaCueOutPercent + '%' }\"\n      />\n    </template>\n    <div\n      v-if=\"alertBar\"\n      class=\"octopus-progress-bar octopus-progress-bar-duration bg-danger\"\n      :style=\"'left: ' + alertBar + '%'\"\n    />\n    <div\n      v-if=\"isProgressCursor\"\n      class=\"octopus-progress-bar-cursor\"\n      :style=\"'left:' + mainProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerChapteringPercent\">\n      <template v-for=\"chapter in playerStore.playerChapteringPercent\" :key=\"chapter\">\n        <div\n          :id=\"'chapter-' + chapter.startPercent\"\n          class=\"octopus-progress-bar octopus-chapter\"\n          :style=\"{\n            left: chapter.startPercent + '%',\n            right: 100 - chapter.endPercent + '%',\n          }\"\n        />\n        <!-- If top layer widely available no need to teleport -->\n        <Teleport to=\"#octopus-player-component\">\n          <ClassicPopover\n            :target=\"'chapter-' + chapter.startPercent\"\n            :is-fixed=\"true\"\n            relative-class=\"player-container\"\n            :only-mouse=\"true\"\n            popover-class=\"octopus-small-popover popover-z-index\"\n            :content=\"chapter.title\"\n            :is-top-layer=\"true\"\n          />\n        </Teleport>\n      </template>\n    </template>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { usePlayerStore } from \"../../stores/PlayerStore\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst ClassicPopover = defineAsyncComponent(\n  () => import(\"../misc/ClassicPopover.vue\"),\n);\n\n//Props \ndefineProps({\n  alertBar: { default: undefined, type: Number },\n  mainProgress: { default: 0, type: Number },\n  secondaryProgress: { default: 0, type: Number },\n  isProgressCursor: { default: false, type: Boolean },\n  inPlayer: { default: false, type: Boolean },\n})\n\n\n//Data \nconst mediaCueInPercent = ref(0);\nconst mediaCueOutPercent = ref(100);\n\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\n\n//Computed\nconst display = computed(() => \"STOPPED\" !== playerStore.playerStatus);\n\n\n//Watch\nwatch(()=>playerStore.playerMedia, () => {\n  if (playerStore.playerMedia) {\n    mediaCueInPercent.value = timeMediaToPercent(\n      playerStore.playerMedia.cueIn ?? 0,\n    );\n    mediaCueOutPercent.value = timeMediaToPercent(\n      playerStore.playerMedia.cueOut ?? null,\n    );\n  }\n}, {deep: true, immediate: true});\n\n\n//Methods\nfunction timeMediaToPercent(value: number | null): number {\n  if (null === value || !playerStore.playerMedia) {\n    return 100;\n  }\n  return (value * 100) / (playerStore.playerMedia?.duration ?? 1);\n}\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-app{\n  .octopus-progress{\n    display: flex;\n    overflow: hidden;\n    background-color: var(--octopus-player-progress-background-color);\n    border-radius: var(--octopus-border-radius);\n    position: relative;\n    cursor: pointer;\n\n    .octopus-progress-bar{\n      position: absolute;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      overflow: hidden;\n      color: var(--octopus-color-on-primary);\n      text-align: center;\n      white-space: nowrap;\n      background-color: var(--octopus-player-progress-color-current);\n      transition: width 0.6s ease;\n    }\n\n    .octopus-chapter{\n      position: absolute;\n      background: transparent;\n      background-clip: content-box;\n      padding: 0 5px;\n      box-shadow: inset -2px 1px 0 0 black,\n                  inset 2px 1px 0 0 black;\n\n      &:hover{\n        background: var(--octopus-background-transparent);\n        box-shadow: -4px 1px 0 0 black;\n      }\n    }\n\n    &,.octopus-progress-bar{\n      height: 4px;\n      @media (width <= 960px) {\n        height: 8px;\n      }\n    }\n\n    &.large,&.large .octopus-progress-bar{\n      height: 15px;\n    }\n\n    &.medium,&.medium .octopus-progress-bar{\n      height: 6px;\n    }\n\n    .octopus-progress-bar-duration {\n      width: 10px;\n    }\n\n    .octopus-progress-bar-cursor{\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      background: black;\n      align-self: center;\n      position: absolute;\n    }\n\n    .end-0{\n      right: 0;\n    }\n  }\n\n  .player-container {\n    .octopus-small-popover {\n      font-size: 0.7rem;\n      background: var(--octopus-player-color);\n      color: white;\n      border: 0;\n\n      .p-2 {\n        padding: 0.2rem !important;\n      }\n    }\n  }\n}\n</style>\n","<template>\n  <div\n    v-if=\"!inPlayer || display\"\n    id=\"test-menu-dropdown\"\n    class=\"octopus-progress\"\n  >\n    <div\n      v-if=\"secondaryProgress\"\n      class=\"octopus-progress-bar bg-warning\"\n      aria-valuenow=\"0\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      :aria-label=\"t('Live progress bar')\"\n      :style=\"'width: ' + secondaryProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerMedia\">\n      <div\n        v-if=\"mediaCueInPercent > 0\"\n        class=\"octopus-progress-bar bg-complementary\"\n        :style=\"{ width: +mediaCueInPercent + '%' }\"\n      />\n      <div\n        v-if=\"mediaCueOutPercent < 100\"\n        class=\"octopus-progress-bar end-0 bg-complementary\"\n        :style=\"{ width: +100 - mediaCueOutPercent + '%' }\"\n      />\n    </template>\n    <div\n      class=\"octopus-progress-bar current-progress\"\n      aria-valuenow=\"0\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      :aria-label=\"t('Listening progress bar')\"\n      :style=\"'width: ' + mainProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerMedia\">\n      <div\n        v-if=\"mediaCueInPercent > 0\"\n        class=\"octopus-progress-bar octopus-progress-bar-duration bg-complementary\"\n        :style=\"{ left: +mediaCueInPercent + '%' }\"\n      />\n      <div\n        v-if=\"mediaCueOutPercent < 100\"\n        class=\"octopus-progress-bar end-0 octopus-progress-bar-duration bg-complementary\"\n        :style=\"{ right: +100 - mediaCueOutPercent + '%' }\"\n      />\n    </template>\n    <div\n      v-if=\"alertBar\"\n      class=\"octopus-progress-bar octopus-progress-bar-duration bg-danger\"\n      :style=\"'left: ' + alertBar + '%'\"\n    />\n    <div\n      v-if=\"isProgressCursor\"\n      class=\"octopus-progress-bar-cursor\"\n      :style=\"'left:' + mainProgress + '%'\"\n    />\n    <template v-if=\"playerStore.playerChapteringPercent\">\n      <template v-for=\"chapter in playerStore.playerChapteringPercent\" :key=\"chapter\">\n        <div\n          :id=\"'chapter-' + chapter.startPercent\"\n          class=\"octopus-progress-bar octopus-chapter\"\n          :style=\"{\n            left: chapter.startPercent + '%',\n            right: 100 - chapter.endPercent + '%',\n          }\"\n        />\n        <!-- If top layer widely available no need to teleport -->\n        <Teleport to=\"#octopus-player-component\">\n          <ClassicPopover\n            :target=\"'chapter-' + chapter.startPercent\"\n            :is-fixed=\"true\"\n            relative-class=\"player-container\"\n            :only-mouse=\"true\"\n            popover-class=\"octopus-small-popover popover-z-index\"\n            :content=\"chapter.title\"\n            :is-top-layer=\"true\"\n          />\n        </Teleport>\n      </template>\n    </template>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { usePlayerStore } from \"../../stores/PlayerStore\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst ClassicPopover = defineAsyncComponent(\n  () => import(\"../misc/ClassicPopover.vue\"),\n);\n\n//Props \ndefineProps({\n  alertBar: { default: undefined, type: Number },\n  mainProgress: { default: 0, type: Number },\n  secondaryProgress: { default: 0, type: Number },\n  isProgressCursor: { default: false, type: Boolean },\n  inPlayer: { default: false, type: Boolean },\n})\n\n\n//Data \nconst mediaCueInPercent = ref(0);\nconst mediaCueOutPercent = ref(100);\n\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\n\n//Computed\nconst display = computed(() => \"STOPPED\" !== playerStore.playerStatus);\n\n\n//Watch\nwatch(()=>playerStore.playerMedia, () => {\n  if (playerStore.playerMedia) {\n    mediaCueInPercent.value = timeMediaToPercent(\n      playerStore.playerMedia.cueIn ?? 0,\n    );\n    mediaCueOutPercent.value = timeMediaToPercent(\n      playerStore.playerMedia.cueOut ?? null,\n    );\n  }\n}, {deep: true, immediate: true});\n\n\n//Methods\nfunction timeMediaToPercent(value: number | null): number {\n  if (null === value || !playerStore.playerMedia) {\n    return 100;\n  }\n  return (value * 100) / (playerStore.playerMedia?.duration ?? 1);\n}\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-app{\n  .octopus-progress{\n    display: flex;\n    overflow: hidden;\n    background-color: var(--octopus-player-progress-background-color);\n    border-radius: var(--octopus-border-radius);\n    position: relative;\n    cursor: pointer;\n\n    .octopus-progress-bar{\n      position: absolute;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      overflow: hidden;\n      color: var(--octopus-color-on-primary);\n      text-align: center;\n      white-space: nowrap;\n      background-color: var(--octopus-player-progress-color-current);\n      transition: width 0.6s ease;\n    }\n\n    .octopus-chapter{\n      position: absolute;\n      background: transparent;\n      background-clip: content-box;\n      padding: 0 5px;\n      box-shadow: inset -2px 1px 0 0 black,\n                  inset 2px 1px 0 0 black;\n\n      &:hover{\n        background: var(--octopus-background-transparent);\n        box-shadow: -4px 1px 0 0 black;\n      }\n    }\n\n    &,.octopus-progress-bar{\n      height: 4px;\n      @media (width <= 960px) {\n        height: 8px;\n      }\n    }\n\n    &.large,&.large .octopus-progress-bar{\n      height: 15px;\n    }\n\n    &.medium,&.medium .octopus-progress-bar{\n      height: 6px;\n    }\n\n    .octopus-progress-bar-duration {\n      width: 10px;\n    }\n\n    .octopus-progress-bar-cursor{\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      background: black;\n      align-self: center;\n      position: absolute;\n    }\n\n    .end-0{\n      right: 0;\n    }\n  }\n\n  .player-container {\n    .octopus-small-popover {\n      font-size: 0.7rem;\n      background: var(--octopus-player-color);\n      color: white;\n      border: 0;\n\n      .p-2 {\n        padding: 0.2rem !important;\n      }\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwFA,MAAM,iBAAiB,2BACf,OAAO,iCAAA,MAAA,MAAA,EAAA,CAAA,CACf;EAaA,MAAM,oBAAoB,IAAI,CAAC;EAC/B,MAAM,qBAAqB,IAAI,GAAG;EAIlC,MAAM,EAAE,MAAM,QAAQ;EACtB,MAAM,cAAc,eAAe;EAGnC,MAAM,UAAU,eAAe,cAAc,YAAY,YAAY;EAIrE,YAAU,YAAY,mBAAmB;GACvC,IAAI,YAAY,aAAa;IAC3B,kBAAkB,QAAQ,mBACxB,YAAY,YAAY,SAAS,CACnC;IACA,mBAAmB,QAAQ,mBACzB,YAAY,YAAY,UAAU,IACpC;GACF;EACF,GAAG;GAAC,MAAM;GAAM,WAAW;EAAI,CAAC;EAIhC,SAAS,mBAAmB,OAA8B;GACxD,IAAI,SAAS,SAAS,CAAC,YAAY,aACjC,OAAO;GAET,OAAQ,QAAQ,OAAQ,YAAY,aAAa,YAAY;EAC/D;;;;;;;;;;;;;;;;;;;;;;CCnII,IAAG;CACH,OAAM;;;;;;SAFC,OAAA,YAAY,OAAA,WAAA,UAAA,GADrB,mBAgFM,OAhFN,YAgFM;EA1EI,OAAA,qBAAA,UAAA,GADR,mBAQE,OAAA;;GANA,OAAM;GACN,iBAAc;GACd,iBAAc;GACd,iBAAc;GACb,cAAY,OAAA,EAAC,mBAAA;GACb,OAAK,eAAA,YAAc,OAAA,oBAAiB,GAAA;;EAEvB,OAAA,YAAY,eAAA,UAAA,GAA5B,mBAWW,UAAA,EAAA,KAAA,EAAA,GAAA,CATD,OAAA,oBAAiB,KAAA,UAAA,GADzB,mBAIE,OAAA;;GAFA,OAAM;GACL,OAAK,eAAA,EAAA,OAAA,CAAY,OAAA,oBAAiB,IAAA,CAAA;mDAG7B,OAAA,qBAAkB,OAAA,UAAA,GAD1B,mBAIE,OAAA;;GAFA,OAAM;GACL,OAAK,eAAA,EAAA,OAAA,MAAkB,OAAA,qBAAkB,IAAA,CAAA;;EAG9C,mBAOE,OAAA;GANA,OAAM;GACN,iBAAc;GACd,iBAAc;GACd,iBAAc;GACb,cAAY,OAAA,EAAC,wBAAA;GACb,OAAK,eAAA,YAAc,OAAA,eAAY,GAAA;;EAElB,OAAA,YAAY,eAAA,UAAA,GAA5B,mBAWW,UAAA,EAAA,KAAA,EAAA,GAAA,CATD,OAAA,oBAAiB,KAAA,UAAA,GADzB,mBAIE,OAAA;;GAFA,OAAM;GACL,OAAK,eAAA,EAAA,MAAA,CAAW,OAAA,oBAAiB,IAAA,CAAA;mDAG5B,OAAA,qBAAkB,OAAA,UAAA,GAD1B,mBAIE,OAAA;;GAFA,OAAM;GACL,OAAK,eAAA,EAAA,OAAA,MAAkB,OAAA,qBAAkB,IAAA,CAAA;;EAItC,OAAA,YAAA,UAAA,GADR,mBAIE,OAAA;;GAFA,OAAM;GACL,OAAK,eAAA,WAAa,OAAA,WAAQ,GAAA;;EAGrB,OAAA,oBAAA,UAAA,GADR,mBAIE,OAAA;;GAFA,OAAM;GACL,OAAK,eAAA,UAAY,OAAA,eAAY,GAAA;;EAEhB,OAAA,YAAY,2BAAA,UAAA,IAAA,GAC1B,mBAqBW,UAAA,EAAA,KAAA,EAAA,GAAA,WArBiB,OAAA,YAAY,0BAAvB,YAAO;2DAA+C,QAAO,GAAA;IAC5E,mBAOE,OAAA;KANC,IAAE,aAAe,QAAQ;KAC1B,OAAM;KACL,OAAK,eAAA;YAAsB,QAAQ,eAAY;mBAAiC,QAAQ,aAAU;;;IAKrG,mBAAA,qDAAA;kBACA,YAUW,UAAA,EAVD,IAAG,4BAA2B,GAAA,CACtC,YAQE,OAAA,mBAAA;KAPC,QAAM,aAAe,QAAQ;KAC7B,YAAU;KACX,kBAAe;KACd,cAAY;KACb,iBAAc;KACb,SAAS,QAAQ;KACjB,gBAAc"}