{"version":3,"mappings":";6tBAkIA,MAAAA,EAAA,CACA,uBACA,OACA,UACA,YACA,WACA,EACA,aACA,aACA,UACA,EACA,UACA,YACA,WACA,CACA,EACA,WACA,WACA,mBACA,cACA,WACA,cACA,WACA,WACA,cACA,WACA,GACA,UACA,WACA,2BAEA,uBACA,EACA,UACA,uBACA,oBAEA,2CACA,EACA,kBACA,8CACA,EACA,qBACA,iDACA,EACA,UACA,OACA,CACA,2BACA,uBACA,2BACA,sBACA,EACA,CACA,4BACA,uBACA,0BACA,uBACA,CACA,CACA,EACA,qBACA,kDACA,CACA,EACA,SACA,aACA,eACA,0BACA,wBACA,YACA,EACA,aACA,wBACA,WACA,EACA,OACA,6BACA,EACA,OACA,8BACA,EACA,kBACA,8CACA,mDACA,EACA,oBAAAC,EAAA,CACA,+BAAAA,CAAA,qBACA,EACA,qBACA,mBACA,kBACA,yDACA,CACA,EACA,OACA,QAAAC,EAAA,CACA,CAAAA,GAAA,sBACA,gBACA,sBACA,WAEA,MAEAA,GAAA,uBACA,WAEA,EACA,OAAAC,EAAA,CACA,8BAAAA,EAAA,GACA,CACA,EACA,UACA,mDACA,8CACA,kEACA,EACA,YACA,4BACA,CACA,o9DCrOAH,EAAA,CACA,uBACA,OACA,OACA,UACA,EACA,SACA,YACA,CACA,CACA,saCkDAI,EAAA,IAAAC,EAAA,gDAAAC,KAAA,2CAEAN,EAAA,CACA,iBACA,YACA,gBAAAO,EACA,YAAAH,CACA,EACA,QACA,MAAAI,EAAAC,EAAA,IACA,OAAAC,EAAA,KAAAC,CAAA,EAAAC,EAAA,KACAJ,EAAA,QACA,OAaA,OACA,YAZA,KACAA,EAAA,SACAG,EAAA,EACAD,EAAA,CACA,EASA,YAPA,KACAF,EAAA,SACAG,EAAA,CACA,EAKA,iBAAAH,CACA,CACA,EACA,WACA,WACA,SACA,iBACA,WACA,eACA,gBACA,gBACA,GACA,OACA,KACA,YACA,WACA,CACA,EACA,UACA,WACA,wCACA,EACA,eACA,yBACA,gCAEA,qCACA,CACA,EACA,SACA,sBAAAK,EAAA,MAAAC,GAAA,CACA,wDACA,cAAAD,EAAAC,EAEA,EACA,QACA,gBACA,cACA,gBACA,qBACA,sBACA,0BACA,gBACA,yBACA,KAEA,0BACA,EACA,aACA,0BACA,qBACA,sBACA,gBACA,gBAEA,0BACA,EACA,sBACA,YAAAC,GAAAH,EAAA,KACA,eACA,sBAEA,OACAG,EAAA,CACA,EACA,WACA,gBACA,qBACA,qBACA,EACA,qBACA,oBACA,CACA,EACA,OACA,KACA,UACA,YACA,EACA,YACA,CACA,EACA,UACA,oBACA,MAAAC,EAAA,qBACAA,IACA,kBAAAA,EAAA,eAKA,gBACA,cACA,YAEA,OAEA,EACA,CACA,y8CC5LAhB,EAAA,CACA,qCACA,YACA,UAAAiB,EACA,gBAAAC,CACA,EACA,OACA,UACA,YACA,WACA,EACA,UACA,WACA,EACA,aACA,aACA,UACA,CACA,EACA,UAEA,CACA","names":["_sfc_main","time","playing","volume","VuePdfEmbed","__vitePreload","n","FloatingToolbar","isToolbarVisible","ref","startHideTimer","stopHideTimer","useTimeoutFn","loaded","total","start","pdf_embed","PdfViewer","QuizAudioPlayer"],"ignoreList":[],"sources":["../../../app/javascript/components/quiz/documents/quiz_audio_player.vue","../../../app/javascript/components/shared/floating_toolbar.vue","../../../app/javascript/components/quiz/documents/pdf_viewer.vue","../../../app/javascript/components/quiz/documents/quizzes_documents_student_viewer.vue"],"sourcesContent":["<template>\n  <div>\n    <audio\n      ref=\"audioPlayer\"\n      :controls=\"false\"\n      controlsList=\"nodownload\"\n      preload=\"auto\"\n      :src=\"document.url\"\n      @play=\"() => playing = true\"\n      @ended=\"shouldStop\"\n      @pause=\"() => playing = false\"\n      @complete=\"shouldStop\"\n      @canplaythrough=\"() => loading = false\"\n    />\n\n\n    <v-card\n      light\n      flat\n      outlined\n    >\n      <v-card-text>\n        <v-slider\n          min=\"0\"\n          :max=\"duration*100\"\n          :value=\"currentTime*100\"\n          readonly\n          hide-details\n        />\n\n        <v-row class=\"mb-0\">\n          <v-col\n            cols=\"auto\"\n            class=\"ml-2\"\n          >\n            {{ displayCurrentTime }}\n          </v-col>\n\n          <v-spacer />\n\n          <v-col\n            cols=\"auto\"\n            class=\"mr-2\"\n          >\n            {{ displayDuration }}\n          </v-col>\n        </v-row>\n\n\n        <v-row>\n          <v-spacer />\n\n          <v-col cols=\"auto\">\n            <v-progress-circular\n              indeterminate\n              size=\"24\"\n              v-if=\"loading\"\n            />\n            <v-btn\n              v-for=\"(button, index) in buttons\"\n              :key=\"index\"\n              v-if=\"button.show\"\n              icon\n              @click=\"button.action\"\n              :disabled=\"button.disabled\"\n            >\n              <v-icon large>\n                {{ button.icon }}\n              </v-icon>\n            </v-btn>\n          </v-col>\n\n          <v-spacer />\n\n          <v-col cols=\"auto\">\n            <v-menu\n              v-model=\"showVolume\"\n              open-on-hover\n              max-width=\"290\"\n              min-width=\"200\"\n              close-delay=\"500\"\n              :close-on-click=\"false\"\n              :close-on-content-click=\"false\"\n            >\n              <template #activator=\"{ on, attrs }\">\n                <v-btn\n                  v-bind=\"attrs\"\n                  v-on=\"on\"\n                  icon\n                >\n                  <v-icon>volume_up</v-icon>\n                </v-btn>\n              </template>\n\n              <v-card>\n                <v-slider\n                  v-if=\"showVolume\"\n                  :min=\"0\"\n                  :max=\"100\"\n                  v-model=\"volume\"\n                  hide-details\n                  @click.stop\n                />\n              </v-card>\n            </v-menu>\n          </v-col>\n        </v-row>\n\n        <span v-if=\"!canPause\">\n          {{ $t('evalmee.documents.audioPlayer.noPause') }}\n        </span>\n        <span>\n          <br>\n          {{ $t('evalmee.documents.audioPlayer.playCount', {playCount: this.document.max_read_count}) }}\n\n          <br>\n          {{ $t(\n            'evalmee.documents.audioPlayer.remainingPlay',\n            {\n              remainingPlayCount: this.remainingPlayCount,\n              maxPlayCount: this.document.max_read_count\n            }\n          ) }}\n        </span>\n      </v-card-text>\n    </v-card>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: \"QuizAudioPlayer\",\n  props: {\n    document: {\n      type: Object,\n      required: true,\n    },\n    teacherMode: {\n      type: Boolean,\n      default: false,\n    },\n    instance: {\n      type: Object,\n      required: false,\n    },\n  },\n  data: () => ({\n    playing: false,\n    shouldBePlaying: false,\n    currentTime: 0,\n    duration: 0,\n    interval : null,\n    loading: true,\n    volume: 100,\n    showVolume: false,\n    playCount: 0,\n  }),\n  computed: {\n    canPause() {\n      if(this.teacherMode) return true\n\n      return this.document.can_pause\n    },\n    canPlay() {\n      if(this.loading) return false\n      if(this.teacherMode) return true\n\n      return this.playCount < this.document.max_read_count\n    },\n    displayDuration(){\n      return this.secondToDisplayTime(this.duration)\n    },\n    displayCurrentTime(){\n      return this.secondToDisplayTime(this.currentTime)\n    },\n    buttons () {\n      return [\n        {\n          icon: \"play_circle_outline\",\n          action: this.shouldPlay,\n          show: !this.shouldBePlaying,\n          disabled: !this.canPlay,\n        },\n        {\n          icon: \"pause_circle_outline\",\n          action: this.shouldStop,\n          show: this.shouldBePlaying,\n          disabled: !this.canPause,\n        },\n      ]\n    },\n    remainingPlayCount() {\n      return this.document.max_read_count - this.playCount\n    },\n  },\n  methods: {\n    shouldPlay() {\n      if(!this.canPlay) return\n      this.incrementPlayCount()\n      this.shouldBePlaying = true\n      this.play()\n    },\n    shouldStop() {\n      this.shouldBePlaying = false\n      this.stop()\n    },\n    play() {\n      this.$refs.audioPlayer.play()\n    },\n    stop() {\n      this.$refs.audioPlayer.pause()\n    },\n    getPlayPosition() {\n      this.duration = this.$refs.audioPlayer.duration\n      this.currentTime = this.$refs.audioPlayer.currentTime\n    },\n    secondToDisplayTime(time) {\n      return this.$moment(Math.round(time) * 1000).format(\"m:ss\")\n    },\n    incrementPlayCount() {\n      if(this.teacherMode) return\n      this.playCount += 1\n      this.document.setPlayCount(this.instance, this.playCount)\n    },\n  },\n  watch: {\n    playing(playing) {\n      if (!playing && this.shouldBePlaying) {\n        setTimeout(() => {\n          if (this.shouldBePlaying) {\n            this.play()\n          }\n        }, 10)\n      }\n      if (playing && !this.shouldBePlaying) {\n        this.stop()\n      }\n    },\n    volume(volume) {\n      this.$refs.audioPlayer.volume = volume / 100\n    },\n  },\n  mounted() {\n    this.interval = setInterval( this.getPlayPosition, 50)\n    this.$refs.audioPlayer.volume = this.volume / 100\n    this.playCount = parseInt(this.document.getPlayCount(this.instance))\n  },\n  destroyed() {\n    clearInterval(this.interval)\n  },\n}\n</script>\n\n<style scoped>\n\n</style>\n","<template>\n  <div class=\"toolbar_container\">\n    <div\n      class=\"toolbar\"\n      :class=\"visible ? 'showToolbar' : 'hideToolbar'\"\n    >\n      <v-btn\n        v-for=\"(item, index) in items\"\n        :key=\"index\"\n        @click.stop=\"item.action\"\n        icon\n      >\n        <v-icon>item.icon</v-icon>\n      </v-btn>\n\n      <slot />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: \"FloatingToolbar\",\n  props: {\n    items: {\n      type: Array,\n    },\n    visible: {\n      type: Boolean,\n    },\n  },\n}\n</script>\n\n<style scoped>\n  .toolbar_container {\n    /* position: relative; */\n  }\n\n  .toolbar {\n    width: auto;\n    position: absolute;\n    bottom: 0;\n    background: #a5a5a596;\n    border-radius: 100px !important;\n    margin: 20px;\n    backdrop-filter: blur(8px);\n    line-height: 0;\n    padding: 2px 6px;\n    border-bottom: 1px solid #a5a5a5b0;\n    border-right:  1px solid #a5a5a5b0;\n    border-top:    1px solid #d8d8d8b0;\n    border-left:   1px solid #d8d8d8b0;\n    transition: opacity 0.2s ease-in-out;\n  }\n\n  .hideToolbar{\n    opacity: 0;\n  }\n\n  .showToolbar {\n    opacity: 1;\n  }\n</style>\n","<template>\n  <v-sheet\n    dark\n    tile\n    class=\"viewer\"\n    color=\"grey darken-3\"\n    @mousemove=\"showToolbar\"\n    @mouseleave=\"hideToolbar\"\n    @touchstart=\"showToolbar\"\n    @touchmove=\"showToolbar\"\n  >\n    <template v-if=\"loading && !loadingError\">\n      <v-progress-linear\n        :indeterminate=\"progress === 0\"\n        color=\"primary\"\n        :value=\"progress * 100\"\n      />\n      <div class=\"center\">\n        <div class=\"center\">\n          {{ $t(\"live.pdfViewer.loading\") }}\n        </div>\n      </div>\n    </template>\n    <template v-if=\"loadingError || isLoadingSlow\">\n      <div class=\"center\">\n        <div class=\"center\">\n          {{ errorMessage }}\n        </div>\n        <eva-button\n          @click=\"reloadFile\"\n          primary\n        >\n          {{ $t(\"live.pdfViewer.retry\") }}\n        </eva-button>\n      </div>\n    </template>\n    <div\n      class=\"pdf_container pl-2 pr-2\"\n      ref=\"pdf_embed\"\n    >\n      <vue-pdf-embed\n        class=\"mb-2 mt-2 pdf_page\"\n        :source=\"src\"\n        :key=\"componentKey\"\n        :width=\"pdfWidth\"\n        @progress=\"trackProgress\"\n        @loaded=\"onLoaded\"\n        @loading-failed=\"() => loadingError = true\"\n        @rendering-failed=\"() => loadingError = true\"\n      />\n\n\n      <floating-toolbar :visible=\"isToolbarVisible && !loading\">\n        <v-btn\n          @click.stop=\"zoom += 25\"\n          icon\n        >\n          <v-icon>zoom_in</v-icon>\n        </v-btn>\n        <v-btn\n          @click.stop=\"zoom = 100\"\n          icon\n        >\n          <v-icon>search_off</v-icon>\n        </v-btn>\n        <v-btn\n          @click.stop=\"zoom -= 25\"\n          icon\n        >\n          <v-icon>zoom_out</v-icon>\n        </v-btn>\n      </floating-toolbar>\n    </div>\n  </v-sheet>\n</template>\n\n<script>\nimport FloatingToolbar from \"../../shared/floating_toolbar.vue\"\nimport { useTimeoutFn } from \"@vueuse/core\"\nimport { ref } from \"vue\"\n\nconst VuePdfEmbed = () => import (\"vue-pdf-embed/dist/vue2-pdf-embed.js\")\n\nexport default {\n  name: \"PdfViewer\",\n  components: {\n    FloatingToolbar,\n    VuePdfEmbed,\n  },\n  setup() {\n    const isToolbarVisible = ref(false)\n    const { start: startHideTimer, stop: stopHideTimer } = useTimeoutFn(() => {\n      isToolbarVisible.value = false\n    }, 5000)\n\n    const showToolbar = () => {\n      isToolbarVisible.value = true\n      stopHideTimer()\n      startHideTimer()\n    }\n\n    const hideToolbar = () => {\n      isToolbarVisible.value = false\n      stopHideTimer()\n    }\n\n    return {\n      showToolbar,\n      hideToolbar,\n      isToolbarVisible,\n    }\n  },\n  data: () => ({\n    progress: 0,\n    zoom: 100,\n    elementWidth: 400,\n    loading: true,\n    componentKey: 0,\n    loadingError: false,\n    isLoadingSlow: false,\n  }),\n  props: {\n    src: {\n      type: String,\n      required: true,\n    },\n  },\n  computed: {\n    pdfWidth() {\n      return this.elementWidth * (this.zoom / 100)\n    },\n    errorMessage() {\n      if (this.loadingError) {\n        return this.$t(\"live.pdfViewer.error\")\n      }\n      return this.$t(\"live.pdfViewer.slowLoading\")\n    },\n  },\n  methods: {\n    trackProgress({ loaded, total }) {\n      if (this.loading && !this.loadingError && !this.isLoadingSlow) {\n        this.progress = loaded / total\n      }\n    },\n    reset() {\n      this.progress = 0\n      this.zoom = 100\n      this.loading = true\n      this.loadingError = false\n      this.isLoadingSlow = false\n      this.updateComponentKey()\n      setTimeout(() => {\n        this.updateComponentKey()\n      }, 1)\n\n      this.startLoadingTimeout()\n    },\n    reloadFile() {\n      this.updateComponentKey()\n      this.loadingError = false\n      this.isLoadingSlow = false\n      this.loading = true\n      this.progress = 0\n\n      this.startLoadingTimeout()\n    },\n    startLoadingTimeout() {\n      const { start } = useTimeoutFn(() => {\n        if (this.loading) {\n          this.isLoadingSlow = true\n        }\n      }, 5000)\n      start()\n    },\n    onLoaded() {\n      this.loading = false\n      this.loadingError = false\n      this.isLoadingSlow = false\n    },\n    updateComponentKey() {\n      this.componentKey += 1\n    },\n  },\n  watch: {\n    src: {\n      handler() {\n        this.reset()\n      },\n      immediate: true,\n    },\n  },\n  mounted() {\n    this.$nextTick(() => {\n      const pdf_embed = this.$refs.pdf_embed\n      if(pdf_embed) {\n        this.elementWidth = pdf_embed.clientWidth - 16\n\n        // If the pdf is not loaded after 500ms, reset the component.\n        // This is a dirty fix for the issue where the pdf is not loaded after the component is mounted.\n        // This issue happens when switching between several pdfs quickly when the pdf is not loaded yet.\n        setTimeout(() => {\n          if(this.loading) {\n            this.reset()\n          }\n        }, 500)\n      }\n    })\n  },\n}\n</script>\n\n<style scoped>\n  .pdf_container{\n    height: 100%;\n    overflow: scroll;\n  }\n\n  .viewer {\n    height: 100%;\n  }\n\n  .pdf_page::v-deep canvas {\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n</style>\n","<template>\n  <div id=\"document-viewer\">\n    <pdf-viewer\n      v-if=\"document.isPDF\"\n      :src=\"document.url\"\n    />\n\n    <quiz-audio-player\n      v-if=\"document.isMP3\"\n      :document=\"document\"\n      :instance=\"instance\"\n      :teacher-mode=\"teacherMode\"\n    />\n\n  </div>\n</template>\n\n<script>\nimport QuizAudioPlayer from \"./quiz_audio_player.vue\"\nimport PdfViewer from \"./pdf_viewer.vue\"\nexport default {\n  name: \"quizzesDocumentsStudentViewer\",\n  components: {\n    PdfViewer,\n    QuizAudioPlayer,\n  },\n  props: {\n    document: {\n      type: Object,\n      required: true,\n    },\n    instance: {\n      type: Object,\n    },\n    teacherMode: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  computed: {\n\n  },\n}\n</script>\n\n<style scoped>\n  #document-viewer {\n    height: 100%;\n  }\n</style>\n"],"file":"assets/quizzes_documents_student_viewer-lTwYlzJI.js"}