{"version":3,"sources":["webpack:///./src/views/Helexium/Ayuda/Soporte/SoporteVideos.vue?349b","webpack:///./src/views/Helexium/Ayuda/Soporte/SoporteVideos.vue","webpack:///src/views/Helexium/Ayuda/Soporte/SoporteVideos.vue","webpack:///./src/views/Helexium/Ayuda/Soporte/SoporteVideos.vue?7c94","webpack:///./src/views/Helexium/Ayuda/Soporte/SoporteVideos.vue?f174"],"names":["render","_vm$selectedVideo3","_vm$selectedVideo4","_vm$selectedVideo6","_vm$selectedVideo7","_vm$selectedVideo8","_vm","this","_c","_self","attrs","staticClass","directives","name","rawName","modifiers","_v","_l","filteredVideos","video","index","_vm$selectedVideo","key","id","selectedVideo","on","$event","clickHandle","scopedSlots","_u","fn","_vm$selectedVideo2","titulo","staticStyle","_s","length","substring","proxy","_vm$selectedVideo5","_e","isVideoURLValid","url","videos","previousVideoTitle","previousVideo","nextVideoTitle","nextVideo","descripcion","_vm$selectedVideo9","_vm$selectedVideo10","_vm$selectedVideo11","_vm$selectedVideo12","_vm$selectedVideo13","class","staticRenderFns","components","mounted","$store","getters","fetchGet","path","then","response","json","result","validateVideoURL","catch","err","data","methods","videoURL","fetch","method","mode","error","computed","slice","component"],"mappings":"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","file":"js/chunk-6d5351f7.2d72715b.js","sourcesContent":["export * from \"-!../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../../../node_modules/@vue/cli-service/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/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SoporteVideos.vue?vue&type=style&index=0&id=cf7d68b6&prod&scoped=true&lang=css\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('b-container',{attrs:{\"fluid\":\"\"}},[_c('b-row',{staticClass:\"justify-content-lg-center\"},[_c('b-col',[_c('card',{staticClass:\"py-4 px-4\"},[_c('div',[_c('div',{staticClass:\"d-flex flex-column\"},[_c('div',{staticClass:\"d-flex justify-content-between align-items-center w-100\"},[_c('b-button',{directives:[{name:\"b-toggle\",rawName:\"v-b-toggle.sidebar-variant\",modifiers:{\"sidebar-variant\":true}}],attrs:{\"variant\":\"info\"}},[_c('i',{staticClass:\"fas fa-list-ul\"}),_vm._v(\" Ver Todos \"),_c('i',{staticClass:\"fas fa-chevron-right\"})]),_c('b-tabs',{attrs:{\"content-class\":\"\"}},[_vm._l((_vm.filteredVideos),function(video,index){return _c('b-tab',{key:video.id,attrs:{\"active\":index === _vm.selectedVideo?.index},on:{\"click\":function($event){return _vm.clickHandle(video, index)}},scopedSlots:_vm._u([{key:\"title\",fn:function(){return [_c('div',{directives:[{name:\"b-tooltip\",rawName:\"v-b-tooltip.hover\",modifiers:{\"hover\":true}}],staticClass:\"d-flex align-items-center\",attrs:{\"title\":video.titulo}},[(index === _vm.selectedVideo?.index)?_c('i',{staticClass:\"fas fa-play mr-1\"}):_c('small',{staticClass:\"bg-white mr-1\",staticStyle:{\"border-radius\":\"50%\",\"width\":\"20px\",\"height\":\"20px\",\"display\":\"flex\",\"justify-content\":\"center\",\"align-items\":\"center\",\"text-align\":\"center\"}},[_vm._v(_vm._s(index + 1))]),_vm._v(\" \"+_vm._s(video.titulo.length > 25 ? video.titulo.substring(0, 22) + \"...\" : video.titulo)+\" \")])]},proxy:true}],null,true)})}),(_vm.selectedVideo?.index > 2)?_c('b-tab',{attrs:{\"active\":_vm.selectedVideo?.index},scopedSlots:_vm._u([{key:\"title\",fn:function(){return [_c('div',{directives:[{name:\"b-tooltip\",rawName:\"v-b-tooltip.hover\",modifiers:{\"hover\":true}}],staticClass:\"d-flex align-items-center\",attrs:{\"title\":_vm.selectedVideo.titulo}},[_c('i',{staticClass:\"fas fa-play mr-1\"}),_vm._v(\" \"+_vm._s(_vm.selectedVideo.titulo.length > 25 ? _vm.selectedVideo.titulo.substring(0, 22) + \"...\" : _vm.selectedVideo.titulo)+\" \"),_c('small',{staticClass:\"bg-warning ml-1\",staticStyle:{\"border-radius\":\"50%\",\"width\":\"20px\",\"height\":\"20px\",\"display\":\"flex\",\"justify-content\":\"center\",\"align-items\":\"center\",\"text-align\":\"center\"}},[_vm._v(_vm._s(_vm.selectedVideo?.index + 1))])])]},proxy:true}],null,false,472735504)}):_vm._e()],2)],1),_c('div',{staticClass:\"d-flex flex-column w-100 align-items-center\"},[(_vm.isVideoURLValid)?_c('div',{staticClass:\"w-75\"},[_c('b-embed',{staticClass:\"rounded\",attrs:{\"type\":\"iframe\",\"aspect\":\"16by9\",\"src\":_vm.selectedVideo.url,\"allowfullscreen\":\"\"}}),_c('div',[_c('div',{staticClass:\"mt-4 d-flex justify-content-between align-items-center\"},[_c('h3',{staticClass:\"mb-3\"},[_c('span',{staticClass:\"p-3 border rounded-circle\"},[_c('i',{staticClass:\"fas fa-video text-warning\"})]),_vm._v(\" \"+_vm._s(_vm.selectedVideo.titulo.length > 30 ? _vm.selectedVideo.titulo.substring(0, 30) + \"...\" : _vm.selectedVideo.titulo)+\" \"),_c('small',{staticClass:\"ml-2\",staticStyle:{\"font-size\":\"15px\",\"opacity\":\"75%\"}},[_vm._v(_vm._s(_vm.selectedVideo?.index + 1)+\"/\"+_vm._s(_vm.videos.length))])]),_c('div',[_c('Transition',{attrs:{\"name\":\"fade\"}},[(_vm.selectedVideo?.index > 0)?_c('span',{directives:[{name:\"b-tooltip\",rawName:\"v-b-tooltip.hover\",modifiers:{\"hover\":true}}],staticClass:\"rounded py-3 px-4 mr-2 border pointer\",attrs:{\"title\":_vm.previousVideoTitle},on:{\"click\":_vm.previousVideo}},[_c('i',{staticClass:\"fas fa-step-backward zoom\",staticStyle:{\"font-size\":\"1vw\"}})]):_vm._e()]),_c('Transition',{attrs:{\"name\":\"fade\"}},[(_vm.selectedVideo?.index != _vm.videos.length - 1)?_c('span',{directives:[{name:\"b-tooltip\",rawName:\"v-b-tooltip.hover\",modifiers:{\"hover\":true}}],staticClass:\"rounded py-3 px-4 border pointer\",attrs:{\"title\":_vm.nextVideoTitle},on:{\"click\":_vm.nextVideo}},[_c('i',{staticClass:\"fas fa-step-forward zoom\",staticStyle:{\"font-size\":\"1vw\"}})]):_vm._e()])],1)]),_c('div',{staticClass:\"mt-4 w-100\"},[_c('span',{staticClass:\"py-2 text-white font-weight-bold border rounded-top px-2\",staticStyle:{\"font-size\":\"medium\"}},[_vm._v(\" Descripción \"),_c('i',{staticClass:\"fas fa-info-circle text-info\"})]),_c('hr',{staticClass:\"mt-2\"}),_c('p',{staticClass:\"pl-3\",staticStyle:{\"opacity\":\"75%\"}},[_vm._v(\" \"+_vm._s(_vm.selectedVideo.descripcion)+\" \")])])])],1):_c('div',{staticClass:\"text-center\"},[_c('p',{staticClass:\"text-danger\"},[_vm._v(\"Error al cargar el video.\")]),_c('i',{staticClass:\"fas fa-video-slash\",staticStyle:{\"opacity\":\"75%\",\"font-size\":\"2rem\"}})])])]),_c('b-sidebar',{attrs:{\"id\":\"sidebar-variant\",\"bg-variant\":\"dark\",\"text-variant\":\"light\",\"backdrop\":\"\",\"shadow\":\"\"},scopedSlots:_vm._u([{key:\"title\",fn:function(){return [_c('small',[_vm._v(\"Videos de soporte \"),_c('i',{staticClass:\"fas fa-question-circle text-warning\",staticStyle:{\"opacity\":\"75%\"}})])]},proxy:true}])},[_c('div',{staticClass:\"py-2\"},[_c('ul',{staticClass:\"p-4\"},_vm._l((_vm.videos),function(video,index){return _c('li',{key:video.id,class:`pointer p-2 mr-2 rounded ${\n                    index === _vm.selectedVideo?.index ? 'bg-info' : ''\n                  }`,on:{\"click\":function($event){return _vm.clickHandle(video, index)}}},[_c('div',{staticClass:\"d-flex\"},[(index === _vm.selectedVideo?.index)?_c('i',{class:`fas fa-video ${\n                        index === _vm.selectedVideo?.index\n                          ? 'text-white'\n                          : 'text-gray'\n                      }`,staticStyle:{\"font-size\":\"large\"}}):_c('small',{staticClass:\"bg-gray circle-badge\"},[_vm._v(_vm._s(index + 1))]),_c('p',{class:`ml-2 pt-1 font-weight-bold ${\n                        index === _vm.selectedVideo?.index\n                          ? 'text-white'\n                          : 'text-gray'\n                      }`},[_vm._v(\" \"+_vm._s(video.titulo.length > 25 ? video.titulo.substring(0, 25) + \"...\" : video.titulo)+\" \")])]),(index === _vm.selectedVideo?.index)?_c('p',{staticClass:\"ml-2 text-white\",staticStyle:{\"opacity\":\"75%\"}},[_c('i',{staticClass:\"fas fa-info-circle\",staticStyle:{\"opacity\":\"75%\"}}),_vm._v(\" \"+_vm._s(video.descripcion.length > 60 ? video.descripcion.substring(0, 60) + \"...\" : video.descripcion)+\" \")]):_vm._e()])}),0)])])],1)])],1)],1)],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<script>\r\nexport default {\r\n  name: \"SoporteVideos\",\r\n  components: {},\r\n  mounted() {\r\n    this.$store.getters\r\n      .fetchGet({ path: \"CapacitacionCRUD/ListCapacitacion/all\" })\r\n      .then((response) => response.json())\r\n      .then((result) => {\r\n        this.videos = result;\r\n        if (result.length > 0) {\r\n          this.selectedVideo = { ...result[0], index: 0 };\r\n          this.validateVideoURL(this.selectedVideo.url);\r\n        }\r\n        console.log(result);\r\n      })\r\n      .catch((err) => {\r\n        console.log(err);\r\n      });\r\n  },\r\n  data() {\r\n    return {\r\n      videos: [],\r\n      selectedVideo: null,\r\n      isVideoURLValid: false,\r\n    };\r\n  },\r\n  methods: {\r\n    clickHandle(video, index) {\r\n      this.selectedVideo = video;\r\n      this.selectedVideo.index = index;\r\n      this.validateVideoURL(video.url);\r\n    },\r\n    nextVideo() {\r\n      if (this.selectedVideo.index < this.videos.length - 1) {\r\n        this.clickHandle(\r\n          this.videos[this.selectedVideo.index + 1],\r\n          this.selectedVideo.index + 1\r\n        );\r\n      }\r\n    },\r\n    previousVideo() {\r\n      if (this.selectedVideo.index > 0) {\r\n        this.clickHandle(\r\n          this.videos[this.selectedVideo.index - 1],\r\n          this.selectedVideo.index - 1\r\n        );\r\n      }\r\n    },\r\n    async validateVideoURL(videoURL) {\r\n      try {\r\n        await fetch(videoURL, { method: \"HEAD\", mode: \"no-cors\" });\r\n        this.isVideoURLValid = true;\r\n      } catch (error) {\r\n        console.error(\"Error al validar URL:\", error);\r\n        this.isVideoURLValid = false;\r\n      }\r\n    },\r\n  },\r\n  computed: {\r\n    filteredVideos() {\r\n      return this.videos.slice(0, 3); // Retorna solo los primeros 5 videos\r\n    },\r\n    nextVideoTitle() {\r\n      if (this.selectedVideo.index < this.videos.length - 1) {\r\n        return this.videos[this.selectedVideo.index + 1].titulo;\r\n      }\r\n      return \"\";\r\n    },\r\n    previousVideoTitle() {\r\n      if (this.selectedVideo.index > 0) {\r\n        return this.videos[this.selectedVideo.index - 1].titulo;\r\n      }\r\n      return \"\";\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<template>\r\n  <b-container fluid>\r\n    <b-row class=\"justify-content-lg-center\">\r\n      <b-col>\r\n        <card class=\"py-4 px-4\">\r\n          <div>\r\n            <!-- main content -->\r\n            <div class=\"d-flex flex-column\">\r\n              <div\r\n                class=\"d-flex justify-content-between align-items-center w-100\"\r\n              >\r\n                <b-button v-b-toggle.sidebar-variant variant=\"info\"\r\n                  ><i class=\"fas fa-list-ul\"></i> Ver Todos\r\n                  <i class=\"fas fa-chevron-right\"></i\r\n                ></b-button>\r\n                <b-tabs content-class=\"\">\r\n                  <!-- lista de videos hasta 3 -->\r\n                  <b-tab\r\n                    v-for=\"(video, index) in filteredVideos\"\r\n                    :key=\"video.id\"\r\n                    @click=\"clickHandle(video, index)\"\r\n                    :active=\"index === selectedVideo?.index\"\r\n                  >\r\n                    <template v-slot:title>\r\n                      <div\r\n                        class=\"d-flex align-items-center\"\r\n                        v-b-tooltip.hover\r\n                        :title=\"video.titulo\"\r\n                      >\r\n                        <i\r\n                          class=\"fas fa-play mr-1\"\r\n                          v-if=\"index === selectedVideo?.index\"\r\n                        ></i>\r\n                        <small\r\n                          class=\"bg-white mr-1\"\r\n                          style=\"\r\n                            border-radius: 50%;\r\n                            width: 20px;\r\n                            height: 20px;\r\n                            display: flex;\r\n                            justify-content: center;\r\n                            align-items: center;\r\n                            text-align: center;\r\n                          \"\r\n                          v-else\r\n                          >{{ index + 1 }}</small\r\n                        >\r\n                        <!-- <i class=\"fas fa-video\" v-else></i> -->\r\n                        {{\r\n                          video.titulo.length > 25\r\n                            ? video.titulo.substring(0, 22) + \"...\"\r\n                            : video.titulo\r\n                        }}\r\n                      </div>\r\n                    </template>\r\n                  </b-tab>\r\n                  <b-tab\r\n                    v-if=\"selectedVideo?.index > 2\"\r\n                    :active=\"selectedVideo?.index\"\r\n                  >\r\n                    <template v-slot:title>\r\n                      <div\r\n                        class=\"d-flex align-items-center\"\r\n                        v-b-tooltip.hover\r\n                        :title=\"selectedVideo.titulo\"\r\n                      >\r\n                        <i class=\"fas fa-play mr-1\"></i>\r\n                        {{\r\n                          selectedVideo.titulo.length > 25\r\n                            ? selectedVideo.titulo.substring(0, 22) + \"...\"\r\n                            : selectedVideo.titulo\r\n                        }}\r\n\r\n                        <small\r\n                          class=\"bg-warning ml-1\"\r\n                          style=\"\r\n                            border-radius: 50%;\r\n                            width: 20px;\r\n                            height: 20px;\r\n                            display: flex;\r\n                            justify-content: center;\r\n                            align-items: center;\r\n                            text-align: center;\r\n                          \"\r\n                          >{{ selectedVideo?.index + 1 }}</small\r\n                        >\r\n                      </div>\r\n                    </template>\r\n                  </b-tab>\r\n                </b-tabs>\r\n              </div>\r\n              <div class=\"d-flex flex-column w-100 align-items-center\">\r\n                <div class=\"w-75\" v-if=\"isVideoURLValid\">\r\n                  <b-embed\r\n                    class=\"rounded\"\r\n                    type=\"iframe\"\r\n                    aspect=\"16by9\"\r\n                    :src=\"selectedVideo.url\"\r\n                    allowfullscreen\r\n                  ></b-embed>\r\n                  <div>\r\n                    <div\r\n                      class=\"mt-4 d-flex justify-content-between align-items-center\"\r\n                    >\r\n                      <h3 class=\"mb-3\">\r\n                        <span class=\"p-3 border rounded-circle\"\r\n                          ><i class=\"fas fa-video text-warning\"\r\n                        /></span>\r\n                        {{\r\n                          selectedVideo.titulo.length > 30\r\n                            ? selectedVideo.titulo.substring(0, 30) + \"...\"\r\n                            : selectedVideo.titulo\r\n                        }}\r\n                        <small\r\n                          class=\"ml-2\"\r\n                          style=\"font-size: 15px; opacity: 75%\"\r\n                          >{{ selectedVideo?.index + 1 }}/{{\r\n                            videos.length\r\n                          }}</small\r\n                        >\r\n                      </h3>\r\n                      <div>\r\n                        <!-- back -->\r\n                        <Transition name=\"fade\">\r\n                          <span\r\n                            v-b-tooltip.hover\r\n                            :title=\"previousVideoTitle\"\r\n                            v-if=\"selectedVideo?.index > 0\"\r\n                            class=\"rounded py-3 px-4 mr-2 border pointer\"\r\n                            @click=\"previousVideo\"\r\n                            ><i\r\n                              class=\"fas fa-step-backward zoom\"\r\n                              style=\"font-size: 1vw\"\r\n                          /></span>\r\n                        </Transition>\r\n                        <!-- next -->\r\n                        <Transition name=\"fade\">\r\n                          <span\r\n                            v-b-tooltip.hover\r\n                            :title=\"nextVideoTitle\"\r\n                            v-if=\"selectedVideo?.index != videos.length - 1\"\r\n                            class=\"rounded py-3 px-4 border pointer\"\r\n                            @click=\"nextVideo\"\r\n                            ><i\r\n                              class=\"fas fa-step-forward zoom\"\r\n                              style=\"font-size: 1vw\"\r\n                          /></span>\r\n                        </Transition>\r\n                      </div>\r\n                    </div>\r\n                    <!-- descripcion -->\r\n                    <div class=\"mt-4 w-100\">\r\n                      <span\r\n                        class=\"py-2 text-white font-weight-bold border rounded-top px-2\"\r\n                        style=\"font-size: medium\"\r\n                      >\r\n                        Descripción\r\n                        <i class=\"fas fa-info-circle text-info\" />\r\n                      </span>\r\n                      <hr class=\"mt-2\" />\r\n                      <p class=\"pl-3\" style=\"opacity: 75%\">\r\n                        {{ selectedVideo.descripcion }}\r\n                      </p>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"text-center\" v-else>\r\n                  <p class=\"text-danger\">Error al cargar el video.</p>\r\n                  <i\r\n                    class=\"fas fa-video-slash\"\r\n                    style=\"opacity: 75%; font-size: 2rem\"\r\n                  />\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <!-- sidebar videos soporte -->\r\n            <b-sidebar\r\n              id=\"sidebar-variant\"\r\n              bg-variant=\"dark\"\r\n              text-variant=\"light\"\r\n              backdrop\r\n              shadow\r\n            >\r\n              <template v-slot:title>\r\n                <small\r\n                  >Videos de soporte\r\n                  <i\r\n                    class=\"fas fa-question-circle text-warning\"\r\n                    style=\"opacity: 75%\"\r\n                  ></i\r\n                ></small>\r\n              </template>\r\n              <div class=\"py-2\">\r\n                <!-- lista completa de videos -->\r\n                <ul class=\"p-4\">\r\n                  <li\r\n                    :class=\"`pointer p-2 mr-2 rounded ${\r\n                      index === selectedVideo?.index ? 'bg-info' : ''\r\n                    }`\"\r\n                    v-for=\"(video, index) in videos\"\r\n                    :key=\"video.id\"\r\n                    @click=\"clickHandle(video, index)\"\r\n                  >\r\n                    <div class=\"d-flex\">\r\n                      <i\r\n                        v-if=\"index === selectedVideo?.index\"\r\n                        :class=\"`fas fa-video ${\r\n                          index === selectedVideo?.index\r\n                            ? 'text-white'\r\n                            : 'text-gray'\r\n                        }`\"\r\n                        style=\"font-size: large\"\r\n                      ></i>\r\n                      <small class=\"bg-gray circle-badge\" v-else>{{\r\n                        index + 1\r\n                      }}</small>\r\n                      <p\r\n                        :class=\"`ml-2 pt-1 font-weight-bold ${\r\n                          index === selectedVideo?.index\r\n                            ? 'text-white'\r\n                            : 'text-gray'\r\n                        }`\"\r\n                      >\r\n                        {{\r\n                          video.titulo.length > 25\r\n                            ? video.titulo.substring(0, 25) + \"...\"\r\n                            : video.titulo\r\n                        }}\r\n                      </p>\r\n                    </div>\r\n                    <p\r\n                      v-if=\"index === selectedVideo?.index\"\r\n                      class=\"ml-2 text-white\"\r\n                      style=\"opacity: 75%\"\r\n                    >\r\n                      <i class=\"fas fa-info-circle\" style=\"opacity: 75%\"></i>\r\n                      {{\r\n                        video.descripcion.length > 60\r\n                          ? video.descripcion.substring(0, 60) + \"...\"\r\n                          : video.descripcion\r\n                      }}\r\n                    </p>\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </b-sidebar>\r\n          </div>\r\n        </card>\r\n      </b-col>\r\n    </b-row>\r\n  </b-container>\r\n</template>\r\n\r\n<style scoped>\r\n/* .active {\r\n  background-color: #059668;\r\n} */\r\n.active {\r\n  background-color: rgba(5, 150, 104, 0.8);\r\n}\r\n\r\n/* Fade transition */\r\n.fade-enter-active,\r\n.fade-leave-active {\r\n  transition: opacity 0.5s;\r\n}\r\n\r\n.fade-enter,\r\n.fade-leave-to\r\n\r\n/* .fade-leave-active in <2.1.8 */ {\r\n  opacity: 0;\r\n}\r\n\r\n.circle-badge {\r\n  border-radius: 50%;\r\n  /* Esto hace que sea un círculo */\r\n  width: 24px;\r\n  /* Define el ancho. Puedes ajustar según necesidades */\r\n  height: 24px;\r\n  /* Define el alto. Debe ser igual al ancho para un círculo perfecto */\r\n  display: flex;\r\n  /* Centrar el contenido en horizontal */\r\n  justify-content: center;\r\n  /* Centrar el contenido en horizontal */\r\n  align-items: center;\r\n  /* Centrar el contenido en vertical */\r\n  text-align: center;\r\n}\r\n</style>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SoporteVideos.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SoporteVideos.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./SoporteVideos.vue?vue&type=template&id=cf7d68b6&scoped=true\"\nimport script from \"./SoporteVideos.vue?vue&type=script&lang=js\"\nexport * from \"./SoporteVideos.vue?vue&type=script&lang=js\"\nimport style0 from \"./SoporteVideos.vue?vue&type=style&index=0&id=cf7d68b6&prod&scoped=true&lang=css\"\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  \"cf7d68b6\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}