cambios

config/routes.yaml

 ###FRONTEND###
-front_index:   
+solicitar_numero:
     path: /
     controller: App\FrontendBundle\Controller\IndexController::solicitarNumero
     methods: [GET,POST]
+front_index:
+    path: /inicio
+    controller: App\FrontendBundle\Controller\IndexController::presentacion
+    methods: [GET,POST]    
 front_validar_msisdn:
     path: app/musica/validar/msisdn
     controller: App\FrontendBundle\Controller\IndexController::validarMsisdn
@@ -27,6 +31,11 @@ front_canciones_contratar:
     controller: App\FrontendBundle\Controller\ListadoController:contratar
     methods: [POST]
 
+front_confirma_contratar:
+    path: app/lista/confirmarContratar
+    controller: App\FrontendBundle\Controller\ListadoController:confirmarContratar
+    methods: [GET]    
+
 front_canciones_descontratar:
     path: app/lista/canciones/descontratar
     controller: App\FrontendBundle\Controller\ListadoController::desuscribir

public/frontend/css/style.css

@@ -440,6 +440,7 @@ h3.slider-artista {
 
 .discos-destacados-top {
   margin-top: 30px;
+  margin-bottom: 40px;
 }
 
 h5.dest-top {
@@ -754,4 +755,8 @@ ul li.item-suscripcion {
   top: 15px;
   right: 35px;
   }
-}s
+}
+
+
+
+/************** REPRODUCTOR DE AUDIO RESPONSIVE ********************/

public/frontend/css/styles-player.css

+
+header h2 {
+  color: #f09f8b;
+  text-align: center;
+}
+
+/* HTML5 Audio player with playlist styles */
+/* https://github.com/codovate/MINImusic-Player  */
+
+
+.example,
+.example2,
+.example3 {
+  margin: 30px auto 0;
+}
+
+.player {
+  background: #25aade;
+  height: 160px;
+  position: fixed;
+  width: 100%;
+  z-index: 9999;
+  bottom: 0 !important;
+  left: 0 !important;
+}
+.title,
+.artist {
+  font-family: verdana;
+  left: 135px;
+  position: absolute;
+
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+.title {
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: bold;
+  top: 10px;
+}
+.artist {
+  color: #eeeeee;
+  font-size: 12px;
+  top: 32px;
+}
+.pl {
+  background: url(../img/control/playlist.png) no-repeat;
+  cursor: pointer;
+  height: 40px;
+  left: 330px;
+  position: absolute;
+  top: 20px;
+  width: 39px;
+}
+.pl:hover {
+  top: 21px;
+}
+.cover {
+  border-radius: 3px 3px;
+  height: 85px;
+  left: 20px;
+  position: absolute;
+  top: 10px;
+  width: 85px;
+}
+.controls {
+  cursor: pointer;
+  left: 0px;
+  position: absolute;
+  top: 50px;
+  left: 130px;
+}
+.controls .play,
+.controls .pause {
+  width: 40px;
+  height: 40px;
+  margin: 5px 5px 5px 5px;
+}
+.controls .play,
+.controls .pause,
+.controls .rew,
+.controls .fwd,
+.controls .stop {
+  text-indent: -10000px;
+  border: none;
+  float: left;
+}
+.controls .rew,
+.controls .fwd,
+.controls .stop {
+  width: 40px;
+  height: 40px;
+  margin: 5px 5px 5px 5px;
+}
+.controls .play {
+  background: url(../img/control/play.svg) no-repeat;
+  background-size: 40px 40px;
+}
+.controls .pause {
+  background: url(../img/control/pause.svg) no-repeat;
+  background-size: 40px 40px;
+  display: none;
+}
+.controls .rew {
+  background: url(../img/control/rewind.svg) no-repeat;
+  background-size: 40px 40px;
+}
+.controls .fwd {
+  background: url(../img/control/next.svg) no-repeat;
+  background-size: 40px 40px;
+}
+.controls .stop {
+  background: url(../img/control/stop.svg) no-repeat;
+  background-size: 40px 40px;
+}
+.hidden {
+  display: none;
+}
+.controls .visible {
+  display: block;
+}
+.volume {
+  display: none !important;
+  height: 11px;
+  left: 30px;
+  position: absolute;
+  top: 142px;
+  width:80%;
+}
+.mute .volume-btn {
+  background: url(../img/control/volume-off.svg) no-repeat;
+  background-size: 20px 20px;
+}
+.volume-btn {
+  background: url(../img/control/volume-up.svg) no-repeat;
+  background-size: 20px 20px;
+  height: 20px;
+  width: 20px;
+  float: left;
+  position: relative;
+  top: -4px;
+  margin-right: 15px;
+}
+.volume-adjust {
+  height: 11px;
+  position: relative;
+  width: 50%;
+  background: #fff;
+  float: left;
+}
+.volume-adjust > div > div {
+  height: 11px;
+  background: #151b48;
+}
+.progressbar {
+  background-color: #fff;
+  cursor: pointer;
+  z-index: 1;
+  right: 6.875em; /* 110 */
+  height: 15px;
+  left: 0px;
+  position: absolute;
+  width: 90%;
+  top: 108px;
+  margin: 0px 5%;
+}
+.novolume .progressbar {
+  right: 4.375em; /* 70 */
+}
+.progressbar div {
+  width: 0%;
+  height: 15px;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.bar-loaded {
+  background-color: #f1f1f1;
+  z-index: 1;
+}
+.bar-played {
+  background: #151b48;
+  z-index: 2;
+}
+.timeHolder {
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: bold;
+  top: 126px;
+  position: absolute;
+  margin: 0px 5%;
+  width: 90%;
+}
+.time-current,
+.time-duration,
+.time-separator {
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: bold;
+  float: left;
+}
+.volume .ui-slider-handle {
+  background: url("../images/spr.png") no-repeat scroll -201px -188px
+    rgba(0, 0, 0, 0);
+  height: 13px;
+  width: 13px;
+}
+.playlist {
+  display:none;
+  background-color: #fff;
+  list-style-type: none;
+  margin: -10px 0 0 2px;
+  padding-bottom: 10px;
+  padding-top: 15px;
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+  margin: 0px auto;
+}
+.playlist li,
+.playlist div {
+  color: #151b48;
+  cursor: pointer;
+  margin: 0 0 5px 15px;
+}
+.playlist li > a,
+.playlist div > a {
+  color: #151b48;
+  text-decoration: none;
+}
+.playlist li.active,
+.playlist div.active {
+  font-weight: bold;
+}
+/* .slick-dots {
+  bottom: 5px !important;
+}
+.slick-dots li button:before {
+  font-size: 8px !important;
+} */

public/frontend/img/bullet-home.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" baseProfile="tiny" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" viewBox="0 0 48 48" xml:space="preserve">
+<polygon fill="#25AADE" points="33.69,23.99 33.69,23.99 17.7,8 14.29,11.41 26.89,24.01 14.31,36.59 17.72,40 33.71,24.01 "/>
+</svg>

public/frontend/img/destacados/icono-play.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" baseProfile="tiny" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" viewBox="0 0 52 52" xml:space="preserve">
+<g>
+	<polygon fill="#25AADE" points="40.04,26 11.96,6.75 11.96,45.25 	"/>
+</g>
+</svg>

public/frontend/img/flecha-submenu.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<polygon class="st0" points="38.7,26 35.2,22.5 35.2,22.5 16.8,4.1 13.3,7.7 31.7,26 13.3,44.3 16.8,47.9 35.2,29.5 35.2,29.5 
+	38.7,26 38.7,26 "/>
+</svg>

src/FrontendBundle/Controller/IndexController.php

@@ -299,10 +299,10 @@ class IndexController extends AbstractController {
         $codigoPin->enviarSms($em);
 
         if ($codigoPin->getCpiEstado() == PluCodigoPin::ESTADO_ENVIADO_OK) {
-            $log->debug('Hemos enviado un sms con el código de validación');
+            $log->debug('Hemos enviado un sms con el código de validación');
            // $json->setStatusCode(JsonResponse::HTTP_OK, 'Hemos enviado un sms con el código de validación');
             //$json->setData(array('msg' => 'Hemos enviado un sms con el código de validación'));
-            $msj = "Hemos enviado un sms con el código de validación";
+            $msj = "Hemos enviado un sms con el código de validación";
             return $this->render('frontend/paginas/validar_pin.html.twig', ["msj"=>$msj, "msisdn"=>$msisdn]);
             //return $json;
         } else {
@@ -313,7 +313,7 @@ class IndexController extends AbstractController {
         }
     }
 
-    public function validarPin(Request $request) {
+    public function validarPin(Request $request): Response {
         $log = Utiles::setLog('App\FrontendBundle\Controller::IndexController::validarPin', 'app/frontend/presentacion');
         $msisdn = $request->get("msisdn");
         $pin = $request->get("pin");
@@ -341,8 +341,6 @@ class IndexController extends AbstractController {
         }
             $codigoPin = $em->getRepository(PluCodigoPin::class)->getPin($pin, $msisdn);    
         
-        
-
         if ($codigoPin) {
             $codigoPin->setCpiEstado(PluCodigoPin::ESTADO_VALIDADO);
             $em->persist($codigoPin);
@@ -351,8 +349,13 @@ class IndexController extends AbstractController {
             $session = $request->getSession();
             $session->set('msisdn', $msisdn);
             $this->generarRegistroSession($em, $msisdn);
-            $json->setStatusCode(JsonResponse::HTTP_OK, 'CODIGO VALIDADO');
-            return $json;
+            //$json->setStatusCode(JsonResponse::HTTP_OK, 'CODIGO VALIDADO');
+
+            //return $this->redirect($this->generateUrl("front_index ,  array('msisdn' => $msisdn)), 302);
+            $url = $this->container->get('router')->generate('front_index',  array('msisdn' => $msisdn));
+
+            return new RedirectResponse($url, 302);
+            
         } else {
             $log->debug('Estimado cliente, el código es inválido.');
            // $json->setStatusCode(JsonResponse::HTTP_NOT_ACCEPTABLE, 'Estimado cliente, el código es inválido.');

src/FrontendBundle/Controller/ListadoController.php

@@ -22,8 +22,10 @@ class ListadoController extends AbstractController
         $ua = $request->headers->get('User-Agent');
         $log->debug("Mostrando canciones de la lista $id...");
         //$cancionesLista = $this->getDoctrine()->getRepository(PluCancion::class)->getCancionesLista($id);
+        $em = $this->getDoctrine()->getManager('default');
+        $lista = $em->getRepository(PluLista::class)->find($id);
         $cancionesLista = $this->getDoctrine()->getRepository(PluLista::class)->getCancionesLista($id);
-        return $this->render('frontend/paginas/canciones.html.twig', array("cancionesLista"=>$cancionesLista, "IdentificadorListaCanciones"=>$id, "isChrome" => Utiles::isWindowsChrome($ua)));  
+        return $this->render('frontend/paginas/listado.html.twig', array("cancionesLista"=>$cancionesLista, "IdentificadorListaCanciones"=>$id, "lista" => $lista, "isChrome" => Utiles::isWindowsChrome($ua)));  
     }
     
      public function cancionesNoContratadas(Request $request): Response{
@@ -35,6 +37,19 @@ class ListadoController extends AbstractController
         return $this->render('frontend/paginas/canciones_no_contratadas.html.twig', array("cancionesLista"=>$cancionesLista, "IdentificadorListaCanciones"=>$id));  
     }
    
+
+   public function confirmarContratar(Request $request) : Response{
+        $log = Utiles::setLog('App\FrontendBundle\Controller::ListadoController::confirmarContratar', 'app/frontend/contratacion');
+        $em = $this->getDoctrine()->getManager('default');
+        $msisdn = $request->get("msisdn");
+        $lisId = $request->get("lisId");      
+
+        $lista = $em->getRepository(PluLista::class)->find($lisId);  
+      
+        return $this->render('frontend/paginas/confirmarContratar.html.twig', array("lista"=>$lista, "msisdn"=>$msisdn));
+        
+    }
+
     public function contratar(Request $request) : Response{
         $log = Utiles::setLog('App\FrontendBundle\Controller::ListadoController::contratar', 'app/frontend/contratacion');
         $em = $this->getDoctrine()->getManager('default');

templates/frontend/paginas/confirmarContratar.html.twig

+{% extends 'frontend/base.html.twig' %}
+{% block title %}Mi Cuenta{% endblock %}
+{% block stylesheets %}
+    <link href="{{ asset('frontend/NewDataTables/css/dataTables.bootstrap4.min.css')}}" rel="stylesheet" />
+    <link href="{{ asset('frontend/NewDataTables/css/responsive.bootstrap4.min.css')}}" rel="stylesheet" />
+{% endblock %}
+{% block body %}
+    <header class="masthead-sc text-white">
+
+    <div class="masthead-content">
+
+
+      <!-- header con mensaje -->
+
+<form action="{{ path('front_canciones_contratar') }}" method="post" }}>
+<input type="hidden" id="lisId" name="lisId" value="{{ lista.lisId }}">
+<input type="hidden" id="msisdn" name="msisdn" value="{{ msisdn }}">
+
+      <div class="container subheader-info col-10 offset-1 mt-4 mb-3">
+        <div class="row">
+            <div class="col-12">
+              <p class="numero-top text-left">
+                {{ lista.lisNombre }} <a href="{{ path('front_canciones_lista', { 'lisId': lista.lisId }) }}" target="_blank">(Ver canciones) </a>
+              </p>
+              <p>Suscribete a esta categoria por $500 semanales</p>
+              <button type="submit" class="btn btn-codigo-suscripcion col-11 mt-4 mb-5">Suscríbete aquí</button>
+
+              <h4 class="ti-beneficios">Beneficios</h4>
+            </div>
+          </div>
+        </div>
+</form>
+
+    <div class="container">
+        <div class="row">
+
+        <div class="col-11">
+
+          <ul>
+            <li class="item-suscripcion mb-2">Descarga una canción gratis a la semana</li>
+            <li class="item-suscripcion mb-2">50% descuento en el resto de las canciones de la categoría Rock</li>
+            <li class="item-suscripcion mb-2">Pago Fácil el monto se descontara automáticamente de tu prepago o se abonara a tu plan</li>
+            <li class="item-suscripcion mb-2">Tenemos canciones nuevas toda la semanas!</li>
+            <li class="item-suscripcion mb-2">Participa por increíbles premios.</li>
+            <li class="item-suscripcion mb-2">Para cancelar tu suscripción solo envía SALIR al XXXX</li>
+          </ul>
+        </div>
+     </div>
+    </div>
+</div>
+  </header>
+{% endblock %}

templates/frontend/paginas/listado.html.twig

+{% extends 'frontend/base.html.twig' %}
+{% block title %}Mi Cuenta{% endblock %}
+{% block stylesheets %}
+    <link href="{{ asset('frontend/NewDataTables/css/dataTables.bootstrap4.min.css')}}" rel="stylesheet" />
+    <link href="{{ asset('frontend/NewDataTables/css/responsive.bootstrap4.min.css')}}" rel="stylesheet" />
+{% endblock %}
+{% block body %}
+    <header class="masthead-rock-listado text-center text-white">
+
+
+    <div class="container">
+
+
+      <!-- Actual search box -->
+      <!-- <div class="form-group has-search">
+        <span class="form-control-feedback"><img src="img/destacados/lupa-busqueda.svg" width="28" class="mr-3 img-fluid" alt="..."></span>
+        <input type="text" class="buscador-top form-control" placeholder="Busca por artista, álbum o canción">
+      </div>
+    </div> -->
+
+    <!-- header con mensaje -->
+
+    <div class="container subheader-info">
+      <div class="row">
+          <div class="col-12">
+            <p class="titulo-genero">
+            {{ lista.lisNombre }}
+          </p>
+          </div>
+
+          <div class="rock-listado-container">
+            Descarga tu canción por $0
+          </div>
+
+        </div>
+      </div>
+
+    <!-- cierre con mensaje -->
+
+    <div class="masthead-content">
+
+
+
+
+
+    <div class="row borde-superior borde-inferior pt 10">
+
+
+      <!-- audio player listado (oculto) -->
+
+      <!-- Script Music Player -->
+      <script type="text/javascript" src="js/script-musicPlayer.js"></script>
+
+
+     <table class="table table-striped discos-destacados-top">
+
+       <tbody>
+       {% set i = 1 %}
+       {% for cancion in cancionesLista %}
+         <tr data-href="#">
+           <th scope="col" class="fila-class-top"><img src="http://newbackendcontenidos.gearlabs.cl/{{cancion.getCanPathImagenAlbum()}}" width="80px" height="80px"></th>
+           <td scope="col" class="fila-class-top">
+             <h5 class="dest-top">{{ "%02d"|format(i) }}&nbsp;{{cancion.getIdOriginal().getCon().getConNombre()}}</h5>
+            <span class="disco-top">{{cancion.getIdOriginal().getCon().getAlb().getAlbNombre()}}</span>
+          </td>
+           <td class="flecha"> <img src="../../frontend/img/destacados/icono-play.svg" width="28" class="mr-3 img-fluid" alt="..."> </td>
+         </tr>   
+         {% set i = i + 1 %}      
+         {% endfor %} 
+       </tbody>
+     </table>
+    </div>
+
+
+</div>
+  </header>
+    
+{% endblock %}