{"version":3,"sources":["webpack:///./src/views/Helexium/Ayuda/Academia/AcademiaVideos.vue?9d4e","webpack:///./src/views/Helexium/Ayuda/Academia/AcademiaVideos.vue","webpack:///src/views/Helexium/Ayuda/Academia/AcademiaVideos.vue","webpack:///./src/views/Helexium/Ayuda/Academia/AcademiaVideos.vue?9621","webpack:///./src/views/Helexium/Ayuda/Academia/AcademiaVideos.vue?c10d"],"names":["render","_vm$cursoAcademia$pre","_vm$cursoAcademia$cat","_vm","this","_c","_self","staticClass","cursoAcademia","attrs","previewImagenUrl","titulo","staticStyle","_v","_s","descripcion","categoriaCurso","responsable","nombres","apellidos","directives","name","rawName","modifiers","privacidad","class","_f","ultimaActualizacion","listaClases","reduce","totalHoras","clase","parseInt","duracion","length","_e","isVideoURLValid","selectedVideo","urlClaseVideo","index","previousVideoTitle","on","previousVideo","nextVideoTitle","nextVideo","ref","_l","key","id","style","transition","boxShadow","cursor","$event","clickHandle","ultimaAcatualizacion","activeSidebar","toggleSidebar","scopedSlots","_u","fn","proxy","substring","opacity","staticRenderFns","data","responsableId","certificadoFinalizacion","clases","categoriaCursoId","crusoAcademiaId","$isLoading","getListClasesCursoAcademia","$route","params","methods","cursoId","res","$store","dispatch","path","success","validateVideoURL","error","video","url","container","$refs","classListContainer","element","children","containerCenter","clientHeight","elementCenter","offsetTop","scrollTop","videoURL","fetch","method","mode","computed","filteredVideos","slice","filters","formatLastUpdateDate","fechaOriginal","moment_timezone","tz","format","component"],"mappings":"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","file":"js/chunk-0328b544.d293503a.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!./AcademiaVideos.vue?vue&type=style&index=0&id=415e7e44&prod&scoped=true&lang=css\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('b-card',[_c('div',{staticClass:\"custom-container\"},[(_vm.cursoAcademia !== null)?_c('b-card',{staticClass:\"bg-academia\"},[_c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"col-12 col-lg-3 d-flex align-items-center\"},[_c('img',{staticClass:\"rounded w-100\",attrs:{\"src\":_vm.cursoAcademia.previewImagenUrl ?? '/img/image_cursos_alt.png',\"alt\":_vm.cursoAcademia.titulo}})]),_c('div',{staticClass:\"col mt-3 mt-md-0 d-flex flex-column\",staticStyle:{\"gap\":\"0.5rem\"}},[_c('h2',{staticClass:\"font-weight-bold text-capitalize\"},[_vm._v(\" \"+_vm._s(_vm.cursoAcademia.titulo)+\" \")]),_c('p',{staticClass:\"text-white-50 m-0 h4 custom-descripcion mb-1\",staticStyle:{\"line-height\":\"1.5\"}},[_vm._v(\" \"+_vm._s(_vm.cursoAcademia.descripcion)+\" \")]),_c('div',{staticClass:\"d-flex align-items-center my-1 flex-wrap\"},[_c('span',{staticClass:\"custom-punto d-flex align-items-center font-weight-bold text-success\"},[_vm._v(_vm._s(_vm.cursoAcademia.categoriaCurso?.descripcion))]),_c('span',{staticClass:\"custom-punto d-flex align-items-center text-capitalize\"},[_vm._v(\"Por \"+_vm._s(_vm.cursoAcademia.responsable.nombres)+\" \"+_vm._s(_vm.cursoAcademia.responsable.apellidos))]),_c('div',{directives:[{name:\"b-tooltip\",rawName:\"v-b-tooltip.hover\",modifiers:{\"hover\":true}}],attrs:{\"title\":`${\n                _vm.cursoAcademia.privacidad === 1\n                  ? 'Curso público'\n                  : 'Curso privado'\n              }`}},[_c('i',{class:`fas fa-${\n                  _vm.cursoAcademia.privacidad === 1 ? 'earth-americas' : 'lock'\n                }`})])]),_c('div',{staticClass:\"d-flex flex-wrap align-items-center\"},[_c('span',{staticClass:\"custom-punto d-flex align-items-center\"},[_c('i',{staticClass:\"fas fa-circle-check mr-1\"}),_vm._v(\" Última actualización: \"),_c('span',{staticClass:\"text-primary ml-1\"},[_vm._v(\" \"+_vm._s(_vm._f(\"formatLastUpdateDate\")(_vm.cursoAcademia.ultimaActualizacion)))])]),_c('i',{staticClass:\"fas fa-clock mr-1\"}),_c('span',{staticClass:\"text-white-50 custom-punto d-flex align-items-center\"},[_vm._v(_vm._s(_vm.listaClases.reduce( (totalHoras, clase) => totalHoras + parseInt(clase.duracion), 0 ))+\"h\")]),_c('i',{staticClass:\"fas fa-play-circle mr-1\"}),_c('span',{staticClass:\"text-white-50\"},[_vm._v(_vm._s(_vm.listaClases.length)+\" \"+_vm._s(_vm.listaClases.length > 1 ? \"clases\" : \"clase\"))])])])])]):_vm._e(),(_vm.listaClases.length > 0)?_c('b-card',[_c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"col-12 col-lg\"},[_c('div',{staticClass:\"d-flex flex-column w-100 align-items-center\"},[(_vm.isVideoURLValid)?_c('div',{staticClass:\"w-100\"},[_c('b-embed',{staticClass:\"rounded\",attrs:{\"type\":\"iframe\",\"aspect\":\"16by9\",\"src\":_vm.selectedVideo.urlClaseVideo,\"allowfullscreen\":\"\"}}),_c('div',{staticClass:\"row mt-4\"},[_c('div',{staticClass:\"col-12\"},[_c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"col-12 col-lg d-flex align-items-center\"},[_c('i',{staticClass:\"fas fa-circle-play mr-2\",staticStyle:{\"font-size\":\"2rem\"}}),_c('div',[_c('small',{staticClass:\"text-white-50\",staticStyle:{\"font-size\":\"1rem\"}},[_vm._v(_vm._s(_vm.selectedVideo.index + 1)+\"/\"+_vm._s(_vm.listaClases.length))]),_c('h3',{staticClass:\"text-capitalize\"},[_vm._v(\" \"+_vm._s(_vm.selectedVideo.titulo)+\" \")])])]),_c('div',{staticClass:\"col-12 col-lg-3\"},[_c('vs-button-group',[_c('vs-button',{directives:[{name:\"b-tooltip\",rawName:\"v-b-tooltip.hover\",modifiers:{\"hover\":true}}],staticClass:\"px-4 py-2\",attrs:{\"title\":_vm.previousVideoTitle,\"disabled\":_vm.selectedVideo.index === 0,\"flat\":\"\",\"icon\":\"\"},on:{\"click\":_vm.previousVideo}},[_c('i',{staticClass:\"fas fa-step-backward\"})]),_c('vs-button',{directives:[{name:\"b-tooltip\",rawName:\"v-b-tooltip.hover\",modifiers:{\"hover\":true}}],staticClass:\"px-4 py-2\",attrs:{\"title\":_vm.nextVideoTitle,\"disabled\":_vm.selectedVideo.index === _vm.listaClases.length - 1,\"flat\":\"\",\"icon\":\"\"},on:{\"click\":_vm.nextVideo}},[_c('i',{staticClass:\"fas fa-step-forward\"})])],1)],1)])]),_c('div',{staticClass:\"col-12 mt-4 w-100\"},[_c('span',{staticClass:\"py-2 text-white-50 font-weight-bold border rounded-top px-2\",staticStyle:{\"font-size\":\"medium\"}},[_vm._v(\" Descripción \"),_c('i',{staticClass:\"fas fa-info-circle\"})]),_c('hr',{staticClass:\"mt-2\"}),_c('p',{staticClass:\"h4\",staticStyle:{\"line-height\":\"1.5\"}},[_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('div',{staticClass:\"col-4 d-none d-lg-block content-list-class\"},[_c('div',{ref:\"classListContainer\",staticClass:\"row list-clases classListContainer\"},_vm._l((_vm.listaClases),function(clase,index){return _c('div',{key:clase.id,staticClass:\"col-12 d-flex align-items-center py-2 bg-dark rounded card-class\",style:({\n                transition: 'box-shadow 0.3s ease',\n                boxShadow:\n                  index === _vm.selectedVideo.index\n                    ? 'inset 0 0 0 2px #6653d1'\n                    : 'none',\n                cursor: 'default',\n              }),on:{\"click\":function($event){return _vm.clickHandle(clase, index)}}},[_c('div',{staticClass:\"row w-100\"},[_c('div',{staticClass:\"col-12 col-xl d-flex justify-content-center align-items-center\"},[_c('div',{staticClass:\"bg-secondary p-3 rounded-circle\",staticStyle:{\"box-shadow\":\"0px -1px 33px -8px #d70027\",\"-webkit-box-shadow\":\"0px -1px 33px -8px #d70027\",\"-moz-box-shadow\":\"0px -1px 33px -8px #d70027\"}},[_c('i',{staticClass:\"far fa-circle-play\",staticStyle:{\"font-size\":\"2rem\"}})])]),_c('div',{staticClass:\"col-12 col-xl-9 my-3 overflow-hidden\"},[_c('h4',{staticClass:\"font-weight-bold text-capitalize\"},[_vm._v(\" \"+_vm._s(clase.titulo)+\" \")]),_c('p',{staticClass:\"text-white-50 m-0 custom-descripcion\"},[_vm._v(\" \"+_vm._s(clase.descripcion)+\" \")]),_c('div',{staticClass:\"d-flex align-items-center text-white-50 flex-wrap mt-2\"},[_c('i',{staticClass:\"fas fa-circle-check mr-1\"}),_c('small',{staticClass:\"custom-punto d-flex align-items-center\"},[_vm._v(\" última actualización \"),_c('span',{staticClass:\"ml-1 text-primary\"},[_vm._v(_vm._s(_vm._f(\"formatLastUpdateDate\")(clase.ultimaAcatualizacion)))])]),_c('i',{staticClass:\"fas fa-clock mr-1\"}),_c('code',{staticClass:\"text-white\"},[_vm._v(_vm._s(clase.duracion)+\"h\")])])])])])}),0)]),_c('vs-button',{directives:[{name:\"b-toggle\",rawName:\"v-b-toggle.sidebar-variant\",modifiers:{\"sidebar-variant\":true}}],staticClass:\"sidebar-toggle-btn\",class:{ 'd-none': !_vm.activeSidebar },attrs:{\"danger\":\"\",\"active\":_vm.activeSidebar},on:{\"click\":_vm.toggleSidebar}},[_c('i',{staticClass:\"fas fa-chevron-right\"})]),_c('b-sidebar',{attrs:{\"id\":\"sidebar-variant\",\"bg-variant\":\"dark\",\"text-variant\":\"light\",\"backdrop\":\"\",\"shadow\":\"\"},on:{\"hidden\":_vm.toggleSidebar},scopedSlots:_vm._u([{key:\"title\",fn:function(){return [_c('small',[_vm._v(\"Clases del curso...\")]),_c('small',{staticClass:\"text-primary\",staticStyle:{\"font-size\":\"1rem\"}},[_vm._v(_vm._s(_vm.selectedVideo.index + 1)+\"/\"+_vm._s(_vm.listaClases.length))])]},proxy:true}],null,false,1042003041)},[_c('div',{staticClass:\"row mx-auto\"},[_c('ul',{staticClass:\"col\"},[_c('li',_vm._l((_vm.listaClases),function(clase,index){return _c('vs-button',{key:clase.id,staticClass:\"w-100 py-2 my-2\",attrs:{\"flat\":index !== _vm.selectedVideo.index,\"gradient\":index === _vm.selectedVideo.index},on:{\"click\":function($event){return _vm.clickHandle(clase, index)}}},[_c('div',{staticClass:\"row w-100 d-flex align-items-center\"},[_c('div',{staticClass:\"col-2 position-relative\"},[(index === _vm.selectedVideo.index)?_c('i',{class:`fas fa-play ${\n                          index === _vm.selectedVideo.index ? 'text-white' : ''\n                        }`,staticStyle:{\"font-size\":\"1.5rem\"}}):_c('i',{staticClass:\"fas fa-circle-play font-weight-bold h1 text-primary position-absolute\",staticStyle:{\"transform\":\"translate(-50%, -50%)\",\"top\":\"50%\",\"left\":\"50%\",\"opacity\":\"50%\",\"font-size\":\"3rem\",\"overflow\":\"hidden\"}})]),_c('div',{staticClass:\"col text-left\"},[_c('label',{class:`font-weight-bold text-capitalize ${\n                          index === _vm.selectedVideo.index\n                            ? 'text-white'\n                            : 'text-light'\n                        }`},[_vm._v(\" \"+_vm._s(clase.titulo.length > 25 ? clase.titulo.substring(0, 25) + \"...\" : clase.titulo)+\" \")]),_c('p',{class:`m-0  ${\n                          index === _vm.selectedVideo.index\n                            ? 'text-white'\n                            : 'text-black'\n                        }`,style:({\n                          opacity:\n                            index === _vm.selectedVideo.index ? '90%' : '50%',\n                        })},[_vm._v(\" \"+_vm._s(clase.descripcion.length > 60 ? clase.descripcion.substring(0, 60) + \"...\" : clase.descripcion)+\" \")])])])])}),1)])])])],1)]):_c('div',{staticClass:\"d-flex justify-content-center align-items-center font-italic h3\"},[_c('i',{staticClass:\"fas fa-spinner fa-spin mr-1\"}),_vm._v(\" Cargando datos... \")])],1)])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <b-card>\r\n    <div class=\"custom-container\">\r\n      <!-- info curso card -->\r\n      <b-card v-if=\"cursoAcademia !== null\" class=\"bg-academia\">\r\n        <div class=\"row\">\r\n          <div class=\"col-12 col-lg-3 d-flex align-items-center\">\r\n            <img\r\n              class=\"rounded w-100\"\r\n              :src=\"\r\n                cursoAcademia.previewImagenUrl ?? '/img/image_cursos_alt.png'\r\n              \"\r\n              :alt=\"cursoAcademia.titulo\"\r\n            />\r\n          </div>\r\n          <div class=\"col mt-3 mt-md-0 d-flex flex-column\" style=\"gap: 0.5rem\">\r\n            <h2 class=\"font-weight-bold text-capitalize\">\r\n              {{ cursoAcademia.titulo }}\r\n            </h2>\r\n            <p\r\n              class=\"text-white-50 m-0 h4 custom-descripcion mb-1\"\r\n              style=\"line-height: 1.5\"\r\n            >\r\n              {{ cursoAcademia.descripcion }}\r\n            </p>\r\n            <div class=\"d-flex align-items-center my-1 flex-wrap\">\r\n              <span\r\n                class=\"custom-punto d-flex align-items-center font-weight-bold text-success\"\r\n                >{{ cursoAcademia.categoriaCurso?.descripcion }}</span\r\n              >\r\n              <span\r\n                class=\"custom-punto d-flex align-items-center text-capitalize\"\r\n                >Por {{ cursoAcademia.responsable.nombres }}\r\n                {{ cursoAcademia.responsable.apellidos }}</span\r\n              >\r\n              <div\r\n                v-b-tooltip.hover\r\n                :title=\"`${\r\n                  cursoAcademia.privacidad === 1\r\n                    ? 'Curso público'\r\n                    : 'Curso privado'\r\n                }`\"\r\n              >\r\n                <i\r\n                  :class=\"`fas fa-${\r\n                    cursoAcademia.privacidad === 1 ? 'earth-americas' : 'lock'\r\n                  }`\"\r\n                ></i>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap align-items-center\">\r\n              <span class=\"custom-punto d-flex align-items-center\">\r\n                <i class=\"fas fa-circle-check mr-1\"></i> Última actualización:\r\n                <span class=\"text-primary ml-1\">\r\n                  {{\r\n                    cursoAcademia.ultimaActualizacion | formatLastUpdateDate\r\n                  }}</span\r\n                >\r\n              </span>\r\n              <i class=\"fas fa-clock mr-1\"></i>\r\n              <span class=\"text-white-50 custom-punto d-flex align-items-center\"\r\n                >{{\r\n                  listaClases.reduce(\r\n                    (totalHoras, clase) =>\r\n                      totalHoras + parseInt(clase.duracion),\r\n                    0\r\n                  )\r\n                }}h</span\r\n              >\r\n              <i class=\"fas fa-play-circle mr-1\"></i>\r\n              <span class=\"text-white-50\"\r\n                >{{ listaClases.length }}\r\n                {{ listaClases.length > 1 ? \"clases\" : \"clase\" }}</span\r\n              >\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </b-card>\r\n      <b-card v-if=\"listaClases.length > 0\">\r\n        <div class=\"row\">\r\n          <!-- main content clases -->\r\n          <div class=\"col-12 col-lg\">\r\n            <div class=\"d-flex flex-column w-100 align-items-center\">\r\n              <div class=\"w-100\" v-if=\"isVideoURLValid\">\r\n                <b-embed\r\n                  class=\"rounded\"\r\n                  type=\"iframe\"\r\n                  aspect=\"16by9\"\r\n                  :src=\"selectedVideo.urlClaseVideo\"\r\n                  allowfullscreen\r\n                ></b-embed>\r\n                <div class=\"row mt-4\">\r\n                  <div class=\"col-12\">\r\n                    <div class=\"row\">\r\n                      <div class=\"col-12 col-lg d-flex align-items-center\">\r\n                        <i\r\n                          class=\"fas fa-circle-play mr-2\"\r\n                          style=\"font-size: 2rem\"\r\n                        />\r\n                        <div>\r\n                          <small class=\"text-white-50\" style=\"font-size: 1rem\"\r\n                            >{{ selectedVideo.index + 1 }}/{{\r\n                              listaClases.length\r\n                            }}</small\r\n                          >\r\n                          <h3 class=\"text-capitalize\">\r\n                            {{ selectedVideo.titulo }}\r\n                          </h3>\r\n                        </div>\r\n                      </div>\r\n                      <div class=\"col-12 col-lg-3\">\r\n                        <vs-button-group>\r\n                          <vs-button\r\n                            v-b-tooltip.hover\r\n                            :title=\"previousVideoTitle\"\r\n                            class=\"px-4 py-2\"\r\n                            @click=\"previousVideo\"\r\n                            :disabled=\"selectedVideo.index === 0\"\r\n                            flat\r\n                            icon\r\n                          >\r\n                            <i class=\"fas fa-step-backward\"></i>\r\n                          </vs-button>\r\n                          <vs-button\r\n                            v-b-tooltip.hover\r\n                            :title=\"nextVideoTitle\"\r\n                            :disabled=\"\r\n                              selectedVideo.index === listaClases.length - 1\r\n                            \"\r\n                            class=\"px-4 py-2\"\r\n                            @click=\"nextVideo\"\r\n                            flat\r\n                            icon\r\n                          >\r\n                            <i class=\"fas fa-step-forward\"></i>\r\n                          </vs-button>\r\n                        </vs-button-group>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <!-- descripcion -->\r\n                  <div class=\"col-12 mt-4 w-100\">\r\n                    <span\r\n                      class=\"py-2 text-white-50 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\" />\r\n                    </span>\r\n                    <hr class=\"mt-2\" />\r\n                    <p class=\"h4\" style=\"line-height: 1.5\">\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          <!-- content list clases -->\r\n          <div class=\"col-4 d-none d-lg-block content-list-class\">\r\n            <div\r\n              class=\"row list-clases classListContainer\"\r\n              ref=\"classListContainer\"\r\n            >\r\n              <div\r\n                v-for=\"(clase, index) in listaClases\"\r\n                :key=\"clase.id\"\r\n                class=\"col-12 d-flex align-items-center py-2 bg-dark rounded card-class\"\r\n                :style=\"{\r\n                  transition: 'box-shadow 0.3s ease',\r\n                  boxShadow:\r\n                    index === selectedVideo.index\r\n                      ? 'inset 0 0 0 2px #6653d1'\r\n                      : 'none',\r\n                  cursor: 'default',\r\n                }\"\r\n                @click=\"clickHandle(clase, index)\"\r\n              >\r\n                <div class=\"row w-100\">\r\n                  <div\r\n                    class=\"col-12 col-xl d-flex justify-content-center align-items-center\"\r\n                  >\r\n                    <div\r\n                      class=\"bg-secondary p-3 rounded-circle\"\r\n                      style=\"\r\n                        box-shadow: 0px -1px 33px -8px #d70027;\r\n                        -webkit-box-shadow: 0px -1px 33px -8px #d70027;\r\n                        -moz-box-shadow: 0px -1px 33px -8px #d70027;\r\n                      \"\r\n                    >\r\n                      <i class=\"far fa-circle-play\" style=\"font-size: 2rem\"></i>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-xl-9 my-3 overflow-hidden\">\r\n                    <h4 class=\"font-weight-bold text-capitalize\">\r\n                      {{ clase.titulo }}\r\n                    </h4>\r\n                    <p class=\"text-white-50 m-0 custom-descripcion\">\r\n                      {{ clase.descripcion }}\r\n                    </p>\r\n                    <div\r\n                      class=\"d-flex align-items-center text-white-50 flex-wrap mt-2\"\r\n                    >\r\n                      <i class=\"fas fa-circle-check mr-1\"></i>\r\n                      <small class=\"custom-punto d-flex align-items-center\">\r\n                        última actualización\r\n                        <span class=\"ml-1 text-primary\">{{\r\n                          clase.ultimaAcatualizacion | formatLastUpdateDate\r\n                        }}</span>\r\n                      </small>\r\n                      <i class=\"fas fa-clock mr-1\"></i>\r\n                      <code class=\"text-white\">{{ clase.duracion }}h</code>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- btn sidebar -->\r\n          <vs-button\r\n            v-b-toggle.sidebar-variant\r\n            style=\"\"\r\n            danger\r\n            :active=\"activeSidebar\"\r\n            @click=\"toggleSidebar\"\r\n            :class=\"{ 'd-none': !activeSidebar }\"\r\n            class=\"sidebar-toggle-btn\"\r\n          >\r\n            <i class=\"fas fa-chevron-right\"></i>\r\n          </vs-button>\r\n          <!-- <vs-button\r\n            v-b-toggle.sidebar-variant\r\n            style=\"filter: opacity(70%); background-color: var(--body-bg)\"\r\n            \r\n            :active=\"activeSidebar\"\r\n            @click=\"toggleSidebar\"\r\n            :class=\"{ 'd-none': !activeSidebar }\"\r\n            class=\"sidebar-toggle-btn\"\r\n          >\r\n            <i class=\"fas fa-chevron-right\"></i>\r\n          </vs-button> -->\r\n\r\n          <!-- sidebar list clases -->\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            @hidden=\"toggleSidebar\"\r\n          >\r\n            <template v-slot:title>\r\n              <small>Clases del curso...</small>\r\n              <small class=\"text-primary\" style=\"font-size: 1rem\"\r\n                >{{ selectedVideo.index + 1 }}/{{ listaClases.length }}</small\r\n              >\r\n            </template>\r\n            <div class=\"row mx-auto\">\r\n              <!-- lista completa de videos -->\r\n              <ul class=\"col\">\r\n                <li>\r\n                  <vs-button\r\n                    :flat=\"index !== selectedVideo.index\"\r\n                    :gradient=\"index === selectedVideo.index\"\r\n                    v-for=\"(clase, index) in listaClases\"\r\n                    :key=\"clase.id\"\r\n                    @click=\"clickHandle(clase, index)\"\r\n                    class=\"w-100 py-2 my-2\"\r\n                  >\r\n                    <div class=\"row w-100 d-flex align-items-center\">\r\n                      <!-- icons -->\r\n                      <div class=\"col-2 position-relative\">\r\n                        <i\r\n                          v-if=\"index === selectedVideo.index\"\r\n                          :class=\"`fas fa-play ${\r\n                            index === selectedVideo.index ? 'text-white' : ''\r\n                          }`\"\r\n                          style=\"font-size: 1.5rem\"\r\n                        ></i>\r\n                        <i\r\n                          class=\"fas fa-circle-play font-weight-bold h1 text-primary position-absolute\"\r\n                          style=\"\r\n                            transform: translate(-50%, -50%);\r\n                            top: 50%;\r\n                            left: 50%;\r\n                            opacity: 50%;\r\n                            font-size: 3rem;\r\n                            overflow: hidden;\r\n                          \"\r\n                          v-else\r\n                        >\r\n                        </i>\r\n                      </div>\r\n                      <!-- info class -->\r\n                      <div class=\"col text-left\">\r\n                        <label\r\n                          :class=\"`font-weight-bold text-capitalize ${\r\n                            index === selectedVideo.index\r\n                              ? 'text-white'\r\n                              : 'text-light'\r\n                          }`\"\r\n                        >\r\n                          {{\r\n                            clase.titulo.length > 25\r\n                              ? clase.titulo.substring(0, 25) + \"...\"\r\n                              : clase.titulo\r\n                          }}\r\n                        </label>\r\n                        <p\r\n                          :class=\"`m-0  ${\r\n                            index === selectedVideo.index\r\n                              ? 'text-white'\r\n                              : 'text-black'\r\n                          }`\"\r\n                          \r\n                          :style=\"{\r\n                            opacity:\r\n                              index === selectedVideo.index ? '90%' : '50%',\r\n                          }\"\r\n                        >\r\n                          {{\r\n                            clase.descripcion.length > 60\r\n                              ? clase.descripcion.substring(0, 60) + \"...\"\r\n                              : clase.descripcion\r\n                          }}\r\n                        </p>\r\n                      </div>\r\n                    </div>\r\n                  </vs-button>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </b-sidebar>\r\n        </div>\r\n      </b-card>\r\n      <div\r\n        v-else\r\n        class=\"d-flex justify-content-center align-items-center font-italic h3\"\r\n      >\r\n        <i class=\"fas fa-spinner fa-spin mr-1\"></i>\r\n        Cargando datos...\r\n      </div>\r\n    </div>\r\n  </b-card>\r\n</template>\r\n\r\n<script>\r\nimport moment_timezone from \"moment-timezone\";\r\nexport default {\r\n  name: \"AcademiaVideos\",\r\n  data() {\r\n    return {\r\n      activeSidebar: true,\r\n      cursoAcademia: {\r\n        id: null,\r\n        titulo: \"\",\r\n        descripcion: \"\",\r\n        previewImagenUrl: null,\r\n        privacidad: null,\r\n        responsableId: null,\r\n        responsable: {},\r\n        certificadoFinalizacion: null,\r\n        categoriaCurso: {},\r\n        clases: [],\r\n        categoriaCursoId: null,\r\n        ultimaActualizacion: null,\r\n      },\r\n      listaClases: [\r\n        {\r\n          id: null,\r\n          titulo: \"\",\r\n          descripcion: \"\",\r\n          duracion: \"\",\r\n          urlClaseVideo: \"\",\r\n          crusoAcademiaId: null,\r\n          ultimaAcatualizacion: \"\",\r\n          responsableId: null,\r\n          responsable: {},\r\n          cursoAcademia: {},\r\n        },\r\n      ],\r\n      selectedVideo: null,\r\n      isVideoURLValid: false,\r\n    };\r\n  },\r\n  async mounted() {\r\n    this.$isLoading(true);\r\n    this.cursoAcademia = null;\r\n    this.listaClases = [];\r\n    await this.getListClasesCursoAcademia(this.$route.params.id);\r\n    this.$isLoading(false);\r\n  },\r\n  methods: {\r\n    toggleSidebar() {\r\n      this.activeSidebar = !this.activeSidebar;\r\n    },\r\n    async getListClasesCursoAcademia(cursoId) {\r\n      try {\r\n        let res = await this.$store.dispatch(\"hl_get\", {\r\n          path: `ClasesCursosAcademia/All/${cursoId}`,\r\n        });\r\n        console.log(\"list clases cursoAcademia...\", res);\r\n        if (res.success) {\r\n          this.cursoAcademia = res.data[0].cursoAcademia;\r\n\r\n          console.log(this.cursoAcademia);\r\n          this.listaClases = res.data;\r\n          this.selectedVideo = { ...res.data[0], index: 0 };\r\n          this.validateVideoURL(this.selectedVideo.urlClaseVideo);\r\n        }\r\n      } catch (error) {\r\n        console.log(\"err\", error);\r\n      }\r\n    },\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      // Obtener el contenedor de la lista de clases\r\n      const container = this.$refs.classListContainer;\r\n\r\n      // Obtener el elemento de la lista correspondiente al video seleccionado\r\n      const element = container.children[index];\r\n\r\n      // Calcular la posición del centro del contenedor\r\n      const containerCenter = container.clientHeight / 2;\r\n\r\n      // Calcular la posición del elemento seleccionado\r\n      const elementCenter = element.offsetTop + element.clientHeight / 2;\r\n\r\n      // Ajustar el scroll para que la clase seleccionada quede centrada verticalmente\r\n      container.scrollTop = elementCenter - containerCenter;\r\n    },\r\n    nextVideo() {\r\n      if (this.selectedVideo.index < this.listaClases.length - 1) {\r\n        this.clickHandle(\r\n          this.listaClases[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.listaClases[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.listaClases.slice(0, 3); // Retorna solo los primeros 5 videos\r\n    },\r\n    nextVideoTitle() {\r\n      if (this.selectedVideo.index < this.listaClases.length - 1) {\r\n        return this.listaClases[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.listaClases[this.selectedVideo.index - 1].titulo;\r\n      }\r\n      return \"\";\r\n    },\r\n  },\r\n  filters: {\r\n    formatLastUpdateDate(fechaOriginal) {\r\n      return moment_timezone\r\n        .tz(fechaOriginal, \"America/Bogota\")\r\n        .format(\"MMM D, YYYY\");\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style scoped>\r\n.content-list-class {\r\n  position: relative;\r\n  max-height: 500px;\r\n  overflow: hidden;\r\n}\r\n.list-clases {\r\n  max-height: 500px;\r\n  overflow-y: scroll;\r\n  gap: 1rem;\r\n  padding-bottom: 200px;\r\n  scroll-behavior: smooth;\r\n}\r\n\r\n/*------------- .content-list-class se encuentra en la vista _dark.scss y en custom.css-------------------- */\r\n\r\n/* .content-list-class::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  height: 100px; \r\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(16, 36, 68));\r\n  pointer-events: none;\r\n} */\r\n\r\n@keyframes show {\r\n  from {\r\n    opacity: 0;\r\n    scale: 25%;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    scale: 100%;\r\n  }\r\n}\r\n\r\n.card-class {\r\n  view-timeline-name: --clase;\r\n  view-timeline-axis: block;\r\n\r\n  animation-timeline: --clase;\r\n  animation-name: show;\r\n  animation-range: entry 25% cover 50%;\r\n  animation-fill-mode: both;\r\n}\r\n\r\n.sidebar-toggle-btn {\r\n  height: 10rem;\r\n  position: fixed;\r\n  top: 50%;\r\n  transform: translate(-40%, -50%);\r\n  margin-left: -35px;\r\n  \r\n  /* left: 0; */\r\n  z-index: 0;\r\n}\r\n.sidebar-toggle-btn:hover {\r\n  transform: translate(-20%, -50%);\r\n}\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  width: 24px;\r\n  height: 24px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  text-align: center;\r\n}\r\n\r\n.custom-descripcion {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  word-wrap: break-word;\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 4;\r\n  -webkit-box-orient: vertical;\r\n}\r\n/* .bg-academia {\r\n  background-image: url(/img/blob-scene-haikei-l.svg);\r\n\r\n  background-size: cover;\r\n  background-position: top;\r\n}\r\n.dark .bg-academia {\r\n  background-image: url('/img/blob-scene-haikei.svg');\r\n\r\n  background-size: cover;\r\n  background-position: top;\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/@vue/cli-plugin-babel/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!./AcademiaVideos.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/@vue/cli-plugin-babel/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!./AcademiaVideos.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./AcademiaVideos.vue?vue&type=template&id=415e7e44&scoped=true\"\nimport script from \"./AcademiaVideos.vue?vue&type=script&lang=js\"\nexport * from \"./AcademiaVideos.vue?vue&type=script&lang=js\"\nimport style0 from \"./AcademiaVideos.vue?vue&type=style&index=0&id=415e7e44&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  \"415e7e44\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}