{"version":3,"sources":["webpack:///./src/pages/videos.js","webpack:///./src/components/elements/video-grid.js","webpack:///./src/hooks/use-asmet-videos.js"],"names":["VideosPage","asmetHome","useAsmetHome","allVideos","useAsmetVideos","flattenVideos","forEach","el","concat","Object","values","meta","og_titulo","id","className","crumbs","path","label","menuSecundario","menu_secundario","filtersTypeDefault","Todos","type","Spot","Casos","Comerciales","Capacitaciones","Otro","VideoGrid","location","useLocation","queryString","parse","search","t","c","useState","categories","setCategories","filterType","updateFilterType","filterCategory","updateFilterCategory","filteredVideos","setFilteredVideos","useEffect","updateCategories","filteredArr","blog_subcategorias","nombre","length","tipo","filteredArr2","navigate","arr","newCategories","slug","ca","keys","map","f","i","key","name","defaultValue","onChange","checked","htmlFor","video","index","src","link","alt","titulo","format","publicado_en","to","role","defaultProps","strapiId","useStaticQuery","allStrapiMediaVideo","edges"],"mappings":"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","file":"component---src-pages-videos-js-e70f089424fc3998c851.js","sourcesContent":["import React from \"react\"\n\n// Layout\nimport Layout from \"../components/layout\"\n// Components\nimport Menu from \"../components/home/menu\"\nimport Breadcrumb from \"../components/elements/breadcrumb\"\nimport VideoGrid from \"../components/elements/video-grid\"\n// Hooks\nimport { useAsmetHome } from \"../hooks/use-asmet-home\"\nimport { useAsmetVideos } from \"../hooks/use-asmet-videos\"\n\nconst VideosPage = () => {\n  const asmetHome = useAsmetHome()\n  const allVideos = useAsmetVideos()\n\n  const crumbs = [\n    { path: `/media`, label: \"Media\" },\n    { path: `/videos`, label: \"Videos\" },\n  ]\n\n  let flattenVideos = []\n  allVideos.forEach(el => {\n    flattenVideos = flattenVideos.concat(Object.values(el))\n  })\n\n  return (\n    <Layout meta={{ og_titulo: \"Videos\" }}>\n      <div id=\"asm-template-header\" className=\"contanier-fluid pt-3 pb-3\">\n        <div className=\"container\">\n          <div className=\"row\">\n            <div className=\"col\">\n              <Breadcrumb crumbs={crumbs} />\n              <h3 className=\"text-white-alpha text-left pt-4\">Galería de Videos</h3>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"asm-media-main container my-5\">\n        <VideoGrid allVideos={flattenVideos} />\n      </div>\n      <hr />\n      <Menu menuSecundario={asmetHome.menu_secundario}/>\n    </Layout>\n  )\n}\n\nexport default VideosPage\n","import React, { useState, useEffect } from \"react\"\nimport PropTypes from \"prop-types\"\nimport Moment from \"react-moment\"\nimport { Link } from \"gatsby\"\nimport _ from \"lodash\"\n\nimport { useLocation, navigate } from \"@reach/router\"\nimport queryString from \"query-string\"\n\n// Default Filters by Type\nconst filtersTypeDefault = {\n  Todos: {\n    type: \"Todos\",\n    label: \"Todos\",\n  },\n  Spot: {\n    type: \"Spot\",\n    label: \"Spot\",\n  },\n  Casos: {\n    type: \"Casos\",\n    label: \"Casos de éxito\",\n  },\n  Comerciales: {\n    type: \"Comerciales\",\n    label: \"Comerciales\",\n  },\n  Capacitaciones: {\n    type: \"Capacitaciones\",\n    label: \"Capacitaciones\",\n  },\n  Otro: {\n    type: \"Otro\",\n    label: \"Otro\",\n  },\n}\n\nconst VideoGrid = ({ allVideos }) => {\n  const location = useLocation()\n  // Get variables (t,c) from Url params\n  let { t, c } = queryString.parse(location.search)\n  t = t in filtersTypeDefault ? t : \"Todos\"\n\n  const [categories, setCategories] = useState([])\n  const [filterType, updateFilterType] = useState(t || \"Todos\")\n  const [filterCategory, updateFilterCategory] = useState(c || \"Todos\")\n  const [filteredVideos, setFilteredVideos] = useState(allVideos)\n\n  useEffect(() => {\n    if (filterType === \"Todos\") {\n      updateCategories(allVideos)\n      if (filterCategory === \"Todos\") {\n        setFilteredVideos(allVideos)\n      } else {\n        let filteredArr = _.filter(allVideos, function (el) {\n          return _.filter(el.blog_subcategorias, { nombre: filterCategory })\n            .length > 0\n            ? el\n            : null\n        })\n        setFilteredVideos(filteredArr)\n      }\n    } else {\n      let filteredArr = _.filter(allVideos, { tipo: filterType })\n      updateCategories(filteredArr)\n      if (filterCategory === \"Todos\") {\n        setFilteredVideos(filteredArr)\n      } else {\n        let filteredArr2 = _.filter(filteredArr, function (el) {\n          return _.filter(el.blog_subcategorias, { nombre: filterCategory })\n            .length > 0\n            ? el\n            : null\n        })\n        setFilteredVideos(filteredArr2)\n      }\n    }\n  }, [filterType, filterCategory, allVideos])\n\n  useEffect(() => {\n    navigate(`?t=${filterType}&c=${filterCategory}`)\n  }, [filterType, filterCategory])\n\n  const updateCategories = arr => {\n    let newCategories = [{ id: \"01\", slug: \"todos\", nombre: \"Todos\" }]\n    arr.forEach(el => {\n      el.blog_subcategorias.forEach(ca => {\n        newCategories = [...newCategories, ca]\n      })\n    })\n    setCategories(_.uniqBy(newCategories, \"id\"))\n  }\n\n  return (\n    <div className=\"asm-media-grid\">\n      <div className=\"row justify-content-center mb-5\">\n        {Object.keys(filtersTypeDefault).map((f, i) => (\n          <div className=\"form-check form-check-inline\" key={i}>\n            <input\n              className=\"form-check-input\"\n              type=\"radio\"\n              name=\"filterTypeVideoRadios\"\n              id={`typeVideo${filtersTypeDefault[f].type}`}\n              defaultValue={filtersTypeDefault[f].type || \"\"}\n              onChange={() => updateFilterType(filtersTypeDefault[f].type)}\n              {...(filterType === filtersTypeDefault[f].type\n                ? { checked: true }\n                : { checked: false })}\n            />\n            <label\n              className=\"form-check-label\"\n              htmlFor={`typeVideo${filtersTypeDefault[f].type}`}\n            >\n              {filtersTypeDefault[f].label}\n            </label>\n          </div>\n        ))}\n      </div>\n      <div className=\"row mb-5\">\n        {categories.map((c, i) => (\n          <div className=\"form-check form-check-inline\" key={i}>\n            <input\n              className=\"form-check-input\"\n              type=\"radio\"\n              name=\"filterCategoryVideoRadios\"\n              id={`categoryVideo${c.nombre}`}\n              defaultValue={c.nombre || \"\"}\n              onChange={() => updateFilterCategory(c.nombre)}\n              {...(filterCategory === c.nombre\n                ? { checked: true }\n                : { checked: false })}\n            />\n            <label className=\"form-check-label\" htmlFor={`categoryVideo${c.nombre}`}>\n              {c.nombre}\n            </label>\n          </div>\n        ))}\n      </div>\n      <div className=\"row row-cols-1 row-cols-md-3\">\n        {filteredVideos.length > 0 ? (\n          filteredVideos.map((video, index) => {\n            return (\n              <div className=\"col mb-5\" key={index}>\n                <div className=\"card h-100 rounded-0 border-0\">\n                  <div className=\"card-img-container position-relative\">\n                    <img\n                      // Fetch thumbnail of youtube video based on: https://yt-thumb.canbeuseful.com/en\n                      src={\n                        \"http://img.youtube.com/vi/\" +\n                        video.link +\n                        \"/mqdefault.jpg\"\n                      }\n                      className=\"card-img-top rounded-0\"\n                      alt={video.titulo}\n                    />\n                  </div>\n                  <div className=\"card-body\">\n                    {video.tipo && (\n                      <p className=\"card-subtitle text-left mb-2\">\n                        <i className=\"fa fa-video-camera mr-1\"></i>\n                        {video.tipo}\n                      </p>\n                    )}\n                    <p className=\"card-title\">\n                      {video.titulo}\n                      <i className=\"fa fa-share float-right ml-1\"></i>\n                    </p>\n                    <p className=\"card-text mb-0\">\n                      Publicado el&nbsp;\n                      <Moment format=\"LL\">{video.publicado_en}</Moment>\n                    </p>\n                    <Link\n                      to={`/videos/${video.slug}`}\n                      className=\"stretched-link\"\n                    >\n                      {\"\"}\n                    </Link>\n                  </div>\n                  <div className=\"card-footer\">\n                    <div className=\"card-tags\">\n                      {video.blog_subcategorias.map((c, i) => (\n                        <span key={i} className=\"badge badge-info mr-1\">\n                          {c.nombre}\n                        </span>\n                      ))}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            )\n          })\n        ) : (\n          <div className=\"alert alert-info\" role=\"alert\">\n            {`Ops! No encontramos ningún video con la categoría \"${filterCategory}\"`}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nVideoGrid.propTypes = {\n  allVideos: PropTypes.arrayOf(\n    PropTypes.shape({\n      strapiId: PropTypes.string,\n      slug: PropTypes.string.isRequired,\n      titulo: PropTypes.string.isRequired,\n      link: PropTypes.string.isRequired,\n      publicado_en: PropTypes.string.isRequired,\n      tipo: PropTypes.string,\n      blog_subcategorias: PropTypes.arrayOf(\n        PropTypes.shape({\n          slug: PropTypes.string.isRequired,\n          nombre: PropTypes.string.isRequired,\n        })\n      ),\n    })\n  ).isRequired,\n}\n\nVideoGrid.defaultProps = {\n  allVideos: [\n    {\n      strapiId: `5ff3ac07ce1b5e19cb07092b`,\n      slug: `diabetes-gestacional`,\n      titulo: `Diabetes Gestacional`,\n      link: `4r0IqcCBBVY`,\n      publicado_en: `2020-12-17T17:00:00.000Z`,\n      tipo: `Otro`,\n      blog_subcategorias: [\n        {\n          slug: `vih`,\n          nombre: `VIH`,\n        },\n      ],\n    },\n  ],\n}\n\nexport default VideoGrid\n","import { useStaticQuery, graphql } from \"gatsby\"\n\nexport const useAsmetVideos = () => {\n  const data = useStaticQuery(\n    graphql`\n      query VideosQuery {\n        allStrapiMediaVideo(sort: { order: DESC, fields: publicado_en }) {\n          edges {\n            node {\n              strapiId\n              slug\n              titulo\n              meta {\n                og_titulo\n                og_imagen {\n                  publicURL\n                }\n                og_descripcion\n              }\n              link\n              descripcion\n              publicado_en\n              tipo\n              blog_subcategorias {\n                id\n                slug\n                nombre\n              }\n            }\n          }\n        }\n      }\n    `\n  )\n  return data.allStrapiMediaVideo.edges\n}\n"],"sourceRoot":""}