{"version":3,"sources":["webpack:///./src/components/VolumeControl.vue?ada0","webpack:///./src/components/VolumeControl.vue?59e6","webpack:///src/components/VolumeControl.vue","webpack:///./src/components/VolumeControl.vue?e929","webpack:///./src/components/VolumeControl.vue?63c5"],"names":["render","_vm","this","_h","$createElement","_c","_self","directives","name","rawName","value","expression","staticClass","class","buffering","ref","attrs","initiated","on","toggle","staticRenderFns","props","constrolKey","default","type","computed","mapGetters","watch","paused","to","methods","track","doPause","event","category","action","label","pause","element","play","component"],"mappings":"2IAAA,W,yCCAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,WAAW,CAAC,CAACC,KAAK,OAAOC,QAAQ,SAASC,MAAOT,EAAa,UAAEU,WAAW,cAAcC,YAAY,iBAAiBC,MAAM,CAACC,UAAWb,EAAIa,YAAY,CAACT,EAAG,SAAS,CAACU,IAAI,sBAAsBH,YAAY,yBAAyBI,MAAM,CAAC,UAAYf,EAAIgB,WAAWC,GAAG,CAAC,MAAQjB,EAAIkB,SAAS,CAACd,EAAG,MAAM,CAACO,YAAY,8BAA8BI,MAAM,CAAC,MAAQ,KAAK,OAAS,KAAK,QAAU,YAAY,KAAO,OAAO,MAAQ,+BAA+B,CAACX,EAAG,IAAI,CAACO,YAAY,+BAA+B,CAACP,EAAG,OAAO,CAACW,MAAM,CAAC,EAAI,UAAU,eAAe,SAASX,EAAG,IAAI,CAACO,YAAY,+BAA+B,CAACP,EAAG,OAAO,CAACW,MAAM,CAAC,EAAI,UAAU,eAAe,SAASX,EAAG,IAAI,CAACO,YAAY,+BAA+B,CAACP,EAAG,OAAO,CAACW,MAAM,CAAC,EAAI,WAAW,eAAe,gBACr2BI,EAAkB,G,8CCcP,GACbC,MAAFA,CACIC,YAAJA,CACMC,QAANA,QACMC,KAANA,SAGEC,SAAFA,kBACAC,4DAEEC,MAAFA,CACIC,OADJ,SACAC,GAAM,IAAN,OACA,EACQ,KAAR,sBACU,EAAV,WAGQ,KAAR,sBACU,EAAV,YAKEC,QAAFA,CACIX,OADJ,WAEM,KAAN,oBACM,KAAN,uDAEIY,MALJ,SAKAC,QACA,eACQ,KAAR,iBACUC,MAAVA,gBACUC,SAAVA,QACUC,OAAVA,QACUC,MAAVA,gBAKIC,MAhBJ,WAiBM,KAAN,gGACQC,EAARA,6DAIIC,KAtBJ,WAuBM,KAAN,gGACQD,EAARA,4DC9DuV,I,wBCQnVE,EAAY,eACd,EACAxC,EACAoB,GACA,EACA,KACA,KACA,MAIa,aAAAoB,E","file":"src/assets/js/chunk-1f7b1cfc.c8fe7f5c.js","sourcesContent":["export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VolumeControl.vue?vue&type=style&index=0&lang=scss&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.initiated),expression:\"initiated\"}],staticClass:\"volume-control\",class:{buffering: _vm.buffering}},[_c('button',{ref:\"volumeControlToggle\",staticClass:\"volume-control__toggle\",attrs:{\"disabled\":!_vm.initiated},on:{\"click\":_vm.toggle}},[_c('svg',{staticClass:\"volume-control__toggle-item\",attrs:{\"width\":\"18\",\"height\":\"15\",\"viewBox\":\"0 0 18 15\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\"}},[_c('g',{staticClass:\"volume-control__toggle-line\"},[_c('path',{attrs:{\"d\":\"M2 0V15\",\"stroke-width\":\"3\"}})]),_c('g',{staticClass:\"volume-control__toggle-line\"},[_c('path',{attrs:{\"d\":\"M9 0V15\",\"stroke-width\":\"3\"}})]),_c('g',{staticClass:\"volume-control__toggle-line\"},[_c('path',{attrs:{\"d\":\"M16 0V15\",\"stroke-width\":\"3\"}})])])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template lang=\"pug\">\n    .volume-control(:class='{buffering: buffering}' v-show='initiated')\n        button.volume-control__toggle(ref='volumeControlToggle', @click='toggle', :disabled='!initiated')\n            svg.volume-control__toggle-item(width='18' height='15' viewBox='0 0 18 15' fill='none' xmlns='http://www.w3.org/2000/svg')\n                g.volume-control__toggle-line\n                    path(d='M2 0V15' stroke-width='3')\n                g.volume-control__toggle-line\n                    path(d='M9 0V15' stroke-width='3')\n                g.volume-control__toggle-line\n                    path(d='M16 0V15' stroke-width='3')\n\n</template>\n<script>\nimport {mapGetters} from 'vuex';\n\nexport default {\n    props: {\n        constrolKey: {\n            default: 'total',\n            type: String\n        }\n    },\n    computed: {\n        ...mapGetters('sound', ['initiated', 'paused', 'buffering'])\n    },\n    watch: {\n        paused(to) {\n            if (to) {\n                this.$nextTick(() => {\n                    this.pause();\n                });\n            } else {\n                this.$nextTick(() => {\n                    this.play();\n                });\n            }\n        }\n    },\n    methods: {\n        toggle() {\n            this.track(!this.paused);\n            this.$store.dispatch('sound/togglePause', this.constrolKey);\n        },\n        track(doPause) {\n            if (this.$gtm !== undefined) {\n                this.$gtm.trackEvent({\n                    event: 'eventTracking',\n                    category: 'Sound',\n                    action: 'click',\n                    label: doPause ? 'Off' : 'On'\n                });\n            }\n        },\n\n        pause() {\n            this.$refs.volumeControlToggle.querySelectorAll('.volume-control__toggle-line').forEach(element => {\n                element.classList.remove('volume-control__toggle-line_animated');\n            });\n        },\n\n        play() {\n            this.$refs.volumeControlToggle.querySelectorAll('.volume-control__toggle-line').forEach(element => {\n                element.classList.add('volume-control__toggle-line_animated');\n            });\n        }\n    }\n};\n</script>\n\n<style lang=\"scss\">\n@import '../assets/css/vars.scss';\n\n.volume-control {\n    pointer-events: all;\n    transition: color 0.15s ease;\n    position: fixed;\n    z-index: 15;\n    display: flex;\n    align-items: center;\n    top: calc(var(--vh) * 95);\n    right: 88px;\n    margin: 0 auto;\n    @media (--viewport-tablet) {\n        right: 0;\n        top: auto;\n        bottom: 7px;\n    }\n    &__toggle {\n        @media (--viewport-tablet) {\n            padding: 0 var(--grid-column-mobile);\n        }\n    }\n    &__toggle-line {\n        stroke: currentColor;\n        transform-origin: bottom center;\n        transform: scaleY(0.5);\n        &_animated {\n            animation: histogramMoving 5s linear infinite;\n        }\n        &:nth-child(1) {\n            animation-delay: -2s;\n        }\n        &:nth-child(2) {\n            animation-delay: -1s;\n        }\n        @media (--viewport-tablet) {\n            stroke: #fff;\n        }\n    }\n    @media (--viewport-tablet) {\n        right: 0;\n    }\n    @keyframes histogramMoving {\n        0% {\n            transform: scaleY(0);\n        }\n        10% {\n            transform: scaleY(0.5);\n        }\n        20% {\n            transform: scaleY(0.1);\n        }\n        30% {\n            transform: scaleY(0.4);\n        }\n        40% {\n            transform: scaleY(1);\n        }\n        50% {\n            transform: scaleY(0.2);\n        }\n        60% {\n            transform: scaleY(1);\n        }\n        70% {\n            transform: scaleY(0.3);\n        }\n        80% {\n            transform: scaleY(0);\n        }\n        90% {\n            transform: scaleY(0.9);\n        }\n        100% {\n            transform: scaleY(0);\n        }\n    }\n    /*&__toggle {\n        width: calc(70em * 0.7 / 14);\n        height: calc(35em * 0.7 / 14);\n        display: flex;\n        transition: opacity 0.15s ease;\n\n        @media (--viewport-mobile), (--viewport-tablet-pt) {\n            width: calc(70em * 0.75 / 15);\n            height: calc(35em * 0.75 / 15);\n        }\n\n        &:disabled {\n            opacity: 0;\n        }\n    }*/\n\n    /*&__toggle-item {\n        fill: currentColor;\n        width: 100%;\n        height: auto;\n\n        line {\n            transform: translateY(50%);\n            stroke-width: 1px;\n            stroke: currentColor;\n        }\n\n        polyline {\n            transform: translateY(50%);\n            fill: none;\n            stroke-width: 1px;\n            stroke-linecap: round;\n            stroke-linejoin: round;\n            stroke: currentColor;\n        }\n    }\n\n    &:hover {\n        color: var(--theme);\n    }*/\n}\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--11-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VolumeControl.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--11-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VolumeControl.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./VolumeControl.vue?vue&type=template&id=3e029937&lang=pug&\"\nimport script from \"./VolumeControl.vue?vue&type=script&lang=js&\"\nexport * from \"./VolumeControl.vue?vue&type=script&lang=js&\"\nimport style0 from \"./VolumeControl.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}