➕ ADD: Player

Se agrega la pagina correspondiente al player del podcast.

Issue #15

Author: konami12

components/PlayerAudio.js

@@ -1,6 +1,6 @@
 // Dependencias
 import PropTypes from "prop-types";
-import React, { Fragment } from "react";
+import React from "react";
 
 /**
  * Listdado de los ultimos podcast.
@@ -11,7 +11,7 @@ const PlayerAudio = ({
     audioMp3, channel,
     poster, title,
 }) => (
-    <Fragment>
+    <>
         <div className="player">
             <picture>
                 <img src={poster} alt={title} />
@@ -40,10 +40,26 @@ const PlayerAudio = ({
                         margin-top: 2em;
                         width: 100%;
                     }
+                  picture {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex: 1 1;
+                    flex-direction: column;
+                    width: auto;
+                    padding: 10%;
+                  }
+                  picture img {
+                    width: 320px;
+                    height: 320px;
+                    background-position: 50% 50%;
+                    background-size: contain;
+                    background-repeat: no-repeat;
+                  }
                 `}
             </style>
         </div>
-    </Fragment>
+    </>
 );
 
 PlayerAudio.propType = {

pages/podcast.js

@@ -0,0 +1,51 @@
+// Dependencias
+import PropTypes from "prop-types";
+import React from "react";
+import "isomorphic-fetch";
+
+// Componentes
+import { PlayerAudio, Layout } from "../components";
+import { api, audio } from "./config.json";
+
+/**
+ * Player que permite esuchar el audio.
+ *
+ * @param {Object} Header  Configuraciones para el header.
+ * @param {Object} player Configuracion correspondiente el reproductor.
+ */
+const PodCast = ({ header, player }) => (
+    <Layout header={header}>
+        <PlayerAudio {...player} />
+    </Layout>
+);
+
+/**
+ * Metodo encargado de realizar la peticion al Api.
+ *
+ * @param  {String}  query Id correspondiente al consulta.
+ * @return {Promise}
+ */
+PodCast.getInitialProps = async ({ query }) => {
+    const REQUEST = await fetch(`${api}${audio}/${query.id}.mp3`);
+    const { body: { audio_clip: mp3 = { } } } = await REQUEST.json();
+    const { channel = {}, title = "", urls = {} } = mp3;
+    const PROPS = {
+        audioMp3: urls.high_mp3,
+        channel: channel.title,
+        poster: urls.image,
+        title,
+    };
+    return { header: { back: `/channel?id=${channel.id}` }, player: PROPS };
+};
+
+PodCast.prototype = {
+    header: PropTypes.shape(PropTypes.object),
+    player: PropTypes.shape(PropTypes.object),
+};
+
+PodCast.defaultProps = {
+    header: {},
+    player: {},
+};
+
+export default PodCast;