{"version":3,"file":"HistoryCallRecordingPlayer-BVbZ3l64.js","sources":["../../../resources/js/Components/PlaySvg.vue","../../../resources/js/Components/PauseSvg.vue","../../../resources/js/Components/Marketing/FacePlayer/FaceRecordingAudioWavesurfer.vue","../../../resources/js/Pages/Calls/Components/HistoryCallRecordingPlayer.vue"],"sourcesContent":["<template>\n    <svg\n         width=\"40px\" height=\"40px\" viewBox=\"0 0 24 24\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\" color=\"#000000\" stroke-width=\"1.5\">\n        <path\n            d=\"M6.90588 4.53682C6.50592 4.2998 6 4.58808 6 5.05299V18.947C6 19.4119 6.50592 19.7002 6.90588 19.4632L18.629 12.5162C19.0211 12.2838 19.0211 11.7162 18.629 11.4838L6.90588 4.53682Z\"\n            fill=\"#000000\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"></path>\n    </svg>\n</template>\n","<template>\n    <svg width=\"40px\" height=\"40px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" color=\"#000000\" stroke-width=\"1.5\"><path d=\"M6 18.4V5.6C6 5.26863 6.26863 5 6.6 5H9.4C9.73137 5 10 5.26863 10 5.6V18.4C10 18.7314 9.73137 19 9.4 19H6.6C6.26863 19 6 18.7314 6 18.4Z\" fill=\"#000000\" stroke=\"#000000\" stroke-width=\"1.5\"></path><path d=\"M14 18.4V5.6C14 5.26863 14.2686 5 14.6 5H17.4C17.7314 5 18 5.26863 18 5.6V18.4C18 18.7314 17.7314 19 17.4 19H14.6C14.2686 19 14 18.7314 14 18.4Z\" fill=\"#000000\" stroke=\"#000000\" stroke-width=\"1.5\"></path></svg>\n</template>\n","<template>\n    <div class=\"w-full bg-gray-200/40 rounded-lg overflow-hidden p-0.5\"\n         :class=\"{\n        'flex items-center justify-center relative': loading\n    }\"\n    >\n        <CircularLoader v-if=\"loading\"\n                        class=\"w-full h-12 absolute\"/>\n\n        <div ref=\"container\" class=\"cursor-pointer\"></div>\n    </div>\n</template>\n<script setup>\nimport {ref, onMounted, watch} from \"vue\";\nimport WaveSurfer from \"wavesurfer.js\";\nimport Hover from 'wavesurfer.js/dist/plugins/hover.esm.js'\nimport CircularLoader from \"@/Components/CircularLoader.vue\";\n\nconst props = defineProps(['audio'])\n\nconst wavesurfer = ref()\nconst container = ref()\nconst hidePlayButton = ref(false)\nconst loading = ref(false)\nlet loadingPromise;\nconst playPause = () => {\n    hidePlayButton.value = !hidePlayButton.value\n    try {\n        wavesurfer.value?.playPause()\n    } catch (e) {\n        console.error(e)\n    }\n}\n\ndefineExpose({\n    playPause,\n    loading,\n    wavesurfer\n})\n\nconst emits = defineEmits(['play', 'pause'])\n\nonMounted(() => {\n    wavesurfer.value = WaveSurfer.create({\n        container: container.value,\n        waveColor: 'rgb(0, 0, 0)',\n        progressColor: 'rgb(0, 0, 255)',\n        // url: props.audio,\n        interact: true,\n        height: 45,\n        plugins: [\n            Hover.create({\n                lineColor: '#ff0000',\n                lineWidth: 2,\n                labelBackground: '#555',\n                labelColor: '#fff',\n                labelSize: '11px',\n            }),\n        ],\n\n        /**\n         * Render a waveform as a squiggly line\n         * @see https://css-tricks.com/making-an-audio-waveform-visualizer-with-vanilla-javascript/\n         */\n        renderFunction: (channels, ctx) => {\n            const {width, height} = ctx.canvas\n            const scale = channels[0].length / width\n            const step = 5\n\n            ctx.translate(0, height / 2)\n            ctx.strokeStyle = ctx.fillStyle\n            ctx.beginPath()\n\n            for (let i = 0; i < width; i += step * 2) {\n                const index = Math.floor(i * scale)\n                const value = Math.abs(channels[0][index])\n                let x = i\n                let y = value * height + 4\n\n                ctx.moveTo(x, 0)\n                ctx.lineTo(x, y)\n                ctx.arc(x + step / 2, y, step / 2, Math.PI, 0, true)\n                ctx.lineTo(x + step, 0)\n\n                x = x + step\n                y = -y\n                ctx.moveTo(x, 0)\n                ctx.lineTo(x, y)\n                ctx.arc(x + step / 2, y, step / 2, Math.PI, 0, false)\n                ctx.lineTo(x + step, 0)\n            }\n\n            ctx.stroke()\n            ctx.closePath()\n        },\n    })\n\n    wavesurfer.value.on('interaction', (e) => {\n        wavesurfer.value?.play()\n        emits('play')\n    })\n\n    /** When the audio starts playing */\n    wavesurfer.value.on('play', () => {\n        hidePlayButton.value = true\n        emits('play')\n    })\n\n    /** When the audio pauses */\n    wavesurfer.value.on('pause', () => {\n        hidePlayButton.value = false\n        emits('pause')\n    })\n\n    watch(() => props.audio, async () => {\n        loading.value = true\n        loadingPromise = new Promise(async resolve => {\n            await wavesurfer.value.load(props.audio)\n            loading.value = false\n        })\n    }, {immediate: true})\n})\n\n</script>\n","<template>\n    <div class=\"flex gap-2 mt-4 justify-between\">\n\n        <FaceRecordingAudioWavesurfer\n            v-if=\"mounted\"\n            :audio=\"audio\"\n            @play=\"hidePlayButton = true\"\n            @pause=\"hidePlayButton = false\"\n            class=\"\"\n            ref=\"player\"/>\n\n\n        <button\n            :disabled=\"player?.loading\"\n            @click.prevent=\"playPause\"\n            :class=\"{\n                        '': hidePlayButton,\n                        'opacity-25': player?.loading\n                    }\"\n            class=\"cursor-pointer\">\n\n                    <span\n                        class=\"size-12 text-xs flex items-center gap-2 text-primary bg-white rounded-full p-2 border-2 hover:border-black\">\n                        <PlaySvg v-if=\"!hidePlayButton\"/>\n                        <PauseSvg v-else/>\n                    </span>\n        </button>\n\n        <button\n            v-if=\"showDownloadButton\"\n            :disabled=\"player?.loading\"\n            @click.prevent=\"downloadRecording\"\n            :class=\"{\n                        'opacity-25': player?.loading\n                    }\"\n            class=\"cursor-pointer\">\n\n                    <span\n                        class=\"size-12 text-xs flex items-center gap-2 text-black bg-white rounded-full p-2 border-2 hover:border-black\">\n                        <MdiIcon :icon=\"mdiDownload\" class=\"\"/>\n                    </span>\n        </button>\n    </div>\n    <div class=\"mt-2 flex gap-1\">\n        <button @click.prevent=\"currentSpeed = speed\"\n                v-for=\"speed in speeds\"\n                :class=\"{\n                        'bg-primary text-white': currentSpeed === speed,\n                        'text-black': currentSpeed !== speed\n                }\"\n                class=\"text-xs rounded-full border w-8 h-8 hover:opacity-50\">\n            {{ speed }}x\n        </button>\n    </div>\n</template>\n<script setup>\nimport {ref, onMounted, watch, nextTick} from \"vue\";\nimport PlaySvg from \"@/Components/PlaySvg.vue\";\nimport PauseSvg from \"@/Components/PauseSvg.vue\";\nimport FaceRecordingAudioWavesurfer from \"@/Components/Marketing/FacePlayer/FaceRecordingAudioWavesurfer.vue\";\nimport MdiIcon from \"@/Components/MdiIcon.vue\";\nimport {mdiDownload} from \"@mdi/js\";\n\nconst props = defineProps({\n    audio: {\n        type: String,\n        required: true\n    },\n    showDownloadButton: {\n        type: Boolean,\n        default: false\n    },\n    defaultSpeed: {\n        type: Number,\n        default: 1.2\n    }\n})\nconst player = ref()\nconst hidePlayButton = ref(false)\nconst mounted = ref(false)\nconst currentSpeed = ref(props.defaultSpeed)\n\nconst speeds = [1.0, 1.2, 1.5, 2.0, 2.5]\n\nwatch(currentSpeed, (speed) => {\n    setSpeed(speed)\n})\n\nconst playPause = () => {\n    player.value.playPause()\n\n    // hidePlayButton.value = !hidePlayButton.value\n}\n\nconst setSpeed = (speed) => {\n    player.value.wavesurfer.setPlaybackRate(speed)\n}\n\nconst downloadRecording = () => {\n    const link = document.createElement('a');\n    link.href = props.audio;\n    const fileExtension = props.audio.split('.').pop();\n    link.download = `recording.${fileExtension}`;\n    document.body.appendChild(link);\n    link.click();\n    document.body.removeChild(link);\n}\n\nonMounted(() => {\n    mounted.value = true\n    setTimeout(() => {\n        setSpeed(1.2)\n    }, 500)\n})\n</script>\n"],"names":["_hoisted_1","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","props","__props","wavesurfer","ref","container","hidePlayButton","loading","__expose","_a","emits","__emit","onMounted","WaveSurfer","Hover","channels","ctx","width","height","scale","step","i","index","value","x","y","e","watch","resolve","player","mounted","currentSpeed","speeds","speed","setSpeed","playPause","downloadRecording","link","fileExtension"],"mappings":"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"}