{"version":3,"sources":["webpack:///./src/components/elements/audio-grid.js","webpack:///./src/pages/media.js","webpack:///./src/components/elements/video-grid.js","webpack:///./src/hooks/use-asmet-audios.js","webpack:///./src/hooks/use-asmet-videos.js","webpack:///./src/hooks/use-asmet-photos.js"],"names":["filtersTypeDefault","Todos","type","label","Cuna","Programa","Entrevista","Otro","AudioGrid","allAudios","location","useLocation","queryString","parse","search","t","c","useState","categories","setCategories","filterType","updateFilterType","filterCategory","updateFilterCategory","filteredAudios","setFilteredAudios","useEffect","updateCategories","filteredArr","el","blog_subcategorias","nombre","length","tipo","filteredArr2","navigate","arr","newCategories","id","slug","forEach","ca","className","Object","keys","map","f","i","key","name","defaultValue","onChange","checked","htmlFor","audio","index","controls","src","archivo","publicURL","default","kind","srcLang","titulo","format","publicado_en","to","role","defaultProps","strapiId","MediaPage","asmetHome","useAsmetHome","allVideos","useAsmetVideos","allPhotos","useAsmetPhotos","useAsmetAudios","flattenAudios","concat","values","flattenFotos","flattenVideos","meta","og_titulo","crumbs","path","data-toggle","href","aria-controls","aria-selected","aria-labelledby","menuSecundario","menu_secundario","Spot","Casos","Comerciales","Capacitaciones","VideoGrid","filteredVideos","setFilteredVideos","video","link","alt","useStaticQuery","allStrapiMediaAudio","edges","allStrapiMediaVideo","allStrapiMediaFoto"],"mappings":"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","file":"component---src-pages-media-js-bb1c70425e3807eb5dea.js","sourcesContent":["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  Cuna: {\n    type: \"Cuna\",\n    label: \"Cuña\",\n  },\n  Programa: {\n    type: \"Programa\",\n    label: \"Programa\",\n  },\n  Entrevista: {\n    type: \"Entrevista\",\n    label: \"Entrevista\",\n  },\n  Otro: {\n    type: \"Otro\",\n    label: \"Otro\",\n  },\n}\n\nconst AudioGrid = ({ allAudios }) => {\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 [filteredAudios, setFilteredAudios] = useState(allAudios)\n\n  useEffect(() => {\n    if (filterType === \"Todos\") {\n      updateCategories(allAudios)\n      if (filterCategory === \"Todos\") {\n        setFilteredAudios(allAudios)\n      } else {\n        let filteredArr = _.filter(allAudios, function (el) {\n          return _.filter(el.blog_subcategorias, { nombre: filterCategory })\n            .length > 0\n            ? el\n            : null\n        })\n        setFilteredAudios(filteredArr)\n      }\n    } else {\n      let filteredArr = _.filter(allAudios, { tipo: filterType })\n      updateCategories(filteredArr)\n      if (filterCategory === \"Todos\") {\n        setFilteredAudios(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        setFilteredAudios(filteredArr2)\n      }\n    }\n  }, [filterType, filterCategory, allAudios])\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=\"filterTypeAudioRadios\"\n              id={`typeAudio${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={`typeAudio${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=\"filterCategoryAudioRadios\"\n              id={`categoryAudio${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={`categoryAudio${c.nombre}`}>\n              {c.nombre}\n            </label>\n          </div>\n        ))}\n      </div>\n      <div className=\"row row-cols-1 row-cols-md-3\">\n        {filteredAudios.length > 0 ? (\n          filteredAudios.map((audio, index) => {\n            return (\n              <div className=\"col mb-5\" key={index}>\n                <div className=\"card h-100 rounded-0 border-0\">\n                  <audio\n                    controls\n                    className=\"w-100\"\n                    src={audio.archivo.publicURL}\n                  >\n                    <track default kind=\"captions\" srcLang=\"en\" />\n                    Su navegador no soporta elementos de\n                    <code>audio</code>.\n                  </audio>\n                  <div className=\"card-body\">\n                    {audio.tipo && (\n                      <p className=\"card-subtitle\">\n                        <i className=\"fa fa-headphones mr-1\"></i>\n                        {audio.tipo}\n                      </p>\n                    )}\n                    <h5 className=\"card-title\">{audio.titulo}</h5>\n                    <p className=\"card-text mb-0\">\n                      Publicado el&nbsp;\n                      <Moment format=\"LL\">{audio.publicado_en}</Moment>\n                    </p>\n                    <Link\n                      to={`/audios/${audio.slug}`}\n                      className=\"stretched-link\"\n                    ></Link>\n                  </div>\n                  <div className=\"card-footer\">\n                    <div className=\"card-tags\">\n                      {audio.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 audio con la categoría \"${filterCategory}\"`}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nAudioGrid.propTypes = {\n  allAudios: PropTypes.arrayOf(\n    PropTypes.shape({\n      strapiId: PropTypes.string,\n      slug: PropTypes.string.isRequired,\n      titulo: PropTypes.string.isRequired,\n      publicado_en: PropTypes.string.isRequired,\n      archivo: PropTypes.shape({\n        publicURL: PropTypes.string.isRequired,\n      }),\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\nAudioGrid.defaultProps = {\n  allAudios: [\n    {\n      strapiId: `5ff3ac07ce1b5e19cb07092b`,\n      slug: `cambio-de-regimen`,\n      titulo: `Cambio de régimen`,\n      publicado_en: `2020-12-17T17:00:00.000Z`,\n      archivo: {\n        publicURL: `/static/0c481e87f2774b1bd41a0a70d9b70d11/4d1eaa21992d880810d7f98e7ceb959d.mp3`,\n      },\n      tipo: `Entrevista`,\n      blog_subcategorias: [\n        {\n          slug: `vih`,\n          nombre: `VIH`,\n        },\n      ],\n    },\n  ],\n}\n\nexport default AudioGrid\n","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\"\nimport AudioGrid from \"../components/elements/audio-grid\"\nimport PhotoGrid from \"../components/elements/photo-grid\"\n// Hooks\nimport { useAsmetHome } from \"../hooks/use-asmet-home\"\nimport { useAsmetVideos } from \"../hooks/use-asmet-videos\"\nimport { useAsmetPhotos } from \"../hooks/use-asmet-photos\"\nimport { useAsmetAudios } from \"../hooks/use-asmet-audios\"\n\nconst MediaPage = () => {\n  const asmetHome = useAsmetHome()\n  const allVideos = useAsmetVideos()\n  const allPhotos = useAsmetPhotos()\n  const allAudios = useAsmetAudios()\n\n  const crumbs = [{ path: `/`, label: \"Media\" }]\n\n  let flattenAudios = []\n  allAudios.forEach(el => {\n    flattenAudios = flattenAudios.concat(Object.values(el))\n  })\n\n  let flattenFotos = []\n  allPhotos.forEach(el => {\n    flattenFotos = flattenFotos.concat(Object.values(el))\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: \"Multimedia\" }}>\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\">Multimedia</h3>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"asm-media-main container my-5\">\n        <div className=\"row justify-content-center\">\n          <div className=\"col-12 col-md-6\">\n            <ul className=\"nav nav-tabs nav-justified border-0\" id=\"mediaTab\">\n              <li className=\"nav-item\" role=\"presentation\">\n                <a\n                  className=\"nav-link py-0 px-1 border-0 active\"\n                  id=\"videosTab\"\n                  data-toggle=\"tab\"\n                  href=\"#mediaVideos\"\n                  role=\"tab\"\n                  aria-controls=\"mediaVideos\"\n                  aria-selected=\"true\"\n                >\n                  <h3 className=\"text-600 py-3\">Videos</h3>\n                </a>\n              </li>\n              <li className=\"nav-item\" role=\"presentation\">\n                <a\n                  className=\"nav-link py-0 px-1 border-0\"\n                  id=\"audiosTab\"\n                  data-toggle=\"tab\"\n                  href=\"#mediaAudios\"\n                  role=\"tab\"\n                  aria-controls=\"mediaAudios\"\n                  aria-selected=\"false\"\n                >\n                  <h3 className=\"text-600 py-3\">Audios</h3>\n                </a>\n              </li>\n              <li className=\"nav-item\" role=\"presentation\">\n                <a\n                  className=\"nav-link py-0 px-1 border-0\"\n                  id=\"photosTab\"\n                  data-toggle=\"tab\"\n                  href=\"#mediaPhotos\"\n                  role=\"tab\"\n                  aria-controls=\"mediaPhotos\"\n                  aria-selected=\"false\"\n                >\n                  <h3 className=\"text-600 py-3\">Fotos</h3>\n                </a>\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div className=\"tab-content flex-grow-1 mt-4\" id=\"mediaTabContent\">\n          <div\n            className=\"tab-pane h-100 fade show active\"\n            id=\"mediaVideos\"\n            role=\"tabpanel\"\n            aria-labelledby=\"videosTab\"\n          >\n            <VideoGrid allVideos={flattenVideos} />\n          </div>\n          <div\n            className=\"tab-pane h-100 fade\"\n            id=\"mediaAudios\"\n            role=\"tabpanel\"\n            aria-labelledby=\"audiosTab\"\n          >\n            <AudioGrid allAudios={flattenAudios} />\n          </div>\n          <div\n            className=\"tab-pane h-100 fade\"\n            id=\"mediaPhotos\"\n            role=\"tabpanel\"\n            aria-labelledby=\"photosTab\"\n          >\n            <PhotoGrid allPhotos={flattenFotos} />\n          </div>\n        </div>\n      </div>\n      <hr />\n      <Menu menuSecundario={asmetHome.menu_secundario} />\n    </Layout>\n  )\n}\n\nexport default MediaPage\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 useAsmetAudios = () => {\n  const data = useStaticQuery(\n    graphql`\n      query AudiosQuery {\n        allStrapiMediaAudio(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              publicado_en\n              descripcion\n              archivo {\n                publicURL\n              }\n              tipo\n              blog_subcategorias {\n                id\n                slug\n                nombre\n              }\n            }\n          }\n        }\n      }\n    `\n  )\n  return data.allStrapiMediaAudio.edges\n}\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","import { useStaticQuery, graphql } from \"gatsby\"\n\nexport const useAsmetPhotos = () => {\n  const data = useStaticQuery(\n    graphql`\n      query PhotosQuery {\n        allStrapiMediaFoto(sort: { order: DESC, fields: fecha }) {\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              fecha\n              descripcion\n              imagenes {\n                formats {\n                  thumbnail {\n                    publicURL\n                  }\n                  small {\n                    publicURL\n                  }\n                  medium {\n                    publicURL\n                  }\n                  large {\n                    publicURL\n                  }\n                }\n                url\n              }\n            }\n          }\n        }\n      }\n    `\n  )\n  return data.allStrapiMediaFoto.edges\n}\n"],"sourceRoot":""}