FIX: no se podia subir los videos

bootstrap/web/setup.php

@@ -17,15 +17,6 @@ return [
     );
   },
   ProVM\TotalSport\Common\Service\MediaLoader::class => function(Container $c) {
-    $obj = new ProVM\TotalSport\Common\Service\MediaLoader($c->get('folders.images'), $c->get('urls')['images']);
+    return new ProVM\TotalSport\Common\Service\MediaLoader($c->get('folders.images'), $c->get('urls')['images']);
-    $obj->setFFMpeg($c->get(FFMpeg\FFMpeg::class));
-    return $obj;
-  },
-  FFMpeg\FFMpeg::class => function(Container $c) {
-    $obj = null;
-    try {
-      $obj = FFMpeg\FFMpeg::create();
-    } catch (\Exception $e) {}
-    return $obj;
   }
 ];

common/Controller/Web/Admin/Eventos.php

@@ -123,4 +123,38 @@ class Eventos {
       ->withHeader('Content-Type', 'application/json')
       ->withStatus(201);
   }
+  public function addVideo(Request $request, Response $response, Container $container, DataHandler $handler, MediaLoader $loader, $evento): Response {
+    $post = $request->getParsedBody();
+    $files = $request->getUploadedFiles();
+    if (count($files) == 0) {
+      $output = [
+        'informacion' => '',
+        'evento' => $evento,
+        'estado' => false
+      ];
+      $response->getBody()->write(json_encode($output));
+      return $response->withHeader('Location', implode('/', [
+        $container->get('urls')['admin'],
+        'evento',
+        $evento
+      ]));
+    }
+    $file = $files['video'];
+    $eventos = $handler->load('eventos');
+    $e = $eventos[$evento];
+    if (is_array($file)) {
+      $status = false;
+      foreach ($file as $f) {
+        $status |= $loader->add($e, $f);
+      }
+    } else {
+      $status = $loader->add($e, $file);
+    }
+    $response->getBody()->write(json_encode($output));
+    return $response->withHeader('Location', implode('/', [
+      $container->get('urls')['admin'],
+      'evento',
+      $evento
+    ]));
+  }
 }

common/Service/MediaLoader.php

@@ -11,10 +11,6 @@ class MediaLoader {
     $this->folder = $media_folder;
     $this->media_url = $media_assets_url;
   }
-  protected $ffmpeg;
-  public function setFFMpeg(FFMpeg $ffmpeg) {
-    $this->ffmpeg = $ffmpeg;
-  }
   protected function getFolder($event) {
     return implode(DIRECTORY_SEPARATOR, [
       $this->folder,
@@ -40,7 +36,7 @@ class MediaLoader {
       case 'avi':
       case 'ogg':
       case 'webm':
-        return implode(PHP_EOL, [
+        return implode('', [
           '<video class="media" controls="controls">',
           implode('', [
             '<source src="',
@@ -104,6 +100,9 @@ class MediaLoader {
       $medias[$name]->{$type} = $obj;
     }
     array_walk($medias, function(&$item) {
+      if ($item->media === null) {
+        $item->media = $item->original;
+      }
       if ($item->thumb === null) {
         $item->thumb = $item->media;
       }
@@ -259,10 +258,6 @@ class MediaLoader {
     ]);
     $file->moveTo($filename);
 
-    if ($this->ffmpeg === null) {
-      return file_exists($filename);
-    }
-
     $thumb = implode(DIRECTORY_SEPARATOR, [
       $folder,
       implode('.', [
@@ -274,23 +269,32 @@ class MediaLoader {
       ])
     ]);
 
-    $video = $this->ffmpeg->open($filename);
+    $image = imagecreatetruecolor(300, 300);
-    $video
+    $black = imagecolorallocate($image, 0, 0, 0);
-      ->filters()
+    imagefill($image, 0, 0, $black);
-      ->resize(new FFMpeg\Coordinate\Dimension(320, 240))
+
-      ->synchronize();
+    $pfile = implode(DIRECTORY_SEPARATOR, [
-    $video
+      dirname($this->folder, 3),
-      ->frame(FFMpeg\Coordinate\TimeCode::fromSeconds(1))
+      'resources',
-      ->save($thumb);
+      'data',
-    $media = implode(DIRECTORY_SEPARATOR, [
+      'play.png'
-      $folder,
-      implode('.', [
-        $base_name,
-        $extension
-      ])
     ]);
-    $video
+    $play = imagecreatefrompng($pfile);
-      ->save(new FFMpeg\Format\Video\X264(), $media);
+    list($w, $h) = getimagesize($pfile);
+    $r = $w / $h;
+    $w = 100;
+    $h = $r * $w;
+    $play = imagescale($play, $w, $h);
+
+    $x = (300 - $w) / 2;
+    $y = (300 - $h) / 2;
+    $x2 = (300 + $w) / 2 - $x;
+    $y2 = (300 + $h) / 2 - $y;
+
+    imagecopyresampled($image, $play, $x, $y, 0, 0, $x2, $y2, $w, $h);
+
+    imagejpeg($image, $thumb, 50);
+
     return file_exists($filename);
   }
   public function delete($event, $filename) {

public/assets/scripts/admin/eventos.js

@@ -42,7 +42,7 @@ var imagenes = {
     $('#agregar_imagen').css('cursor', 'pointer').click(() => {
       imagenes.add()
     })
-    $('.trash.icon').css('cursor', 'pointer').click(function() {
+    $('#imagenes .trash.icon').css('cursor', 'pointer').click(function() {
       let i = $(this).attr('data-media')
       imagenes.deleteImage(i)
     })
@@ -80,11 +80,11 @@ var imagenes = {
     div = $('<div></div>').attr('class', 'ui modal').append(
       $('<i></i>').attr('class', 'inside close icon')
     )
-    if (imagenes.imagenes.length >= 12) {
+    if (imagenes.imagenes.length + videos.videos.length >= 12) {
       div.append(
-        $('<div></div>').attr('class', 'header').html('Media')
+        $('<div></div>').attr('class', 'header').html('Foto')
       ).append(
-        $('<div></div>').attr('class', 'content').html('Se ha llegado al máximo de media.')
+        $('<div></div>').attr('class', 'content').html('Se ha llegado al máximo de elementos.')
       )
       imgs.after(div)
       div.modal('show')
@@ -92,7 +92,7 @@ var imagenes = {
     }
 
     div.append(
-      $('<div></div>').attr('class', 'header').html('Media')
+      $('<div></div>').attr('class', 'header').html('Foto')
     ).append(
       $('<div></div>').attr('class', 'content').append(imagenes.buildForm())
     )
@@ -108,6 +108,129 @@ var imagenes = {
     })
   },
   addImage: () => {
+    let form = $('#add_image')
+    $('#add_image #resultado').html('')
+    $('#add_image #resultado').append(
+      $('<div></div>').attr('class', 'ui active loader')
+    )
+    let data = new FormData(form[0])
+    let url = imagenes.url + '/evento/' + imagenes.evento + '/image/add'
+    let fallo = () => {
+      $('#add_image #resultado').html('')
+      $('#add_image #resultado').append(
+        $('<div></div>').attr('class', 'ui negative message')
+          .append($('<i></i>').attr('class', 'inline close icon'))
+          .append('<p>No se pudo agregar.</p>')
+      )
+      $('#add_image #resultado .message .close').on('click', function() {
+        $(this).closest('.message')
+            .transition('fade');
+      });
+    }
+    $.ajax({
+      url: url,
+      data: data,
+      processData: false,
+      contentType: false,
+      type: 'POST',
+      success: (output) => {
+        if (output.estado) {
+          window.location.reload()
+          return
+        }
+        fallo()
+      },
+      error: () => {
+        fallo()
+      }
+    })
+  },
+  deleteImage: (i) => {
+    let media = imagenes.imagenes[i]
+    let url = imagenes.url + '/evento/' + imagenes.evento + '/image/delete'
+    $.post(url, {media: media}, (output) => {
+      if (output.estado) {
+        window.location.reload()
+      }
+    })
+  }
+}
+var videos = {
+  videos: [],
+  url: '',
+  evento: '',
+  setup: () => {
+    $('#agregar_video').css('cursor', 'pointer').click(() => {
+      videos.add()
+    })
+    $('#videos .trash.icon').css('cursor', 'pointer').click(function() {
+      let i = $(this).attr('data-media')
+      videos.deleteVideo(i)
+    })
+  },
+  buildForm: () => {
+    let form = new Elem('form', {
+      class: 'ui form',
+      id: 'add_video',
+      method: 'post',
+      enctype: 'multipart/form-data',
+      action: videos.url + '/evento/' + videos.evento + '/video/add'
+    }).addChild(
+      new Elem('div', {class: 'ui grid'}).addChild(
+        new Elem('div', {class: 'row'}).addChild(
+          new Elem('div', {class: 'sixteen wide column'}).addChild(
+            new Elem('div', {class: 'ui fluid input'}).addChild(
+              new Elem('input', {type: 'file', name: 'video[]', multiple: 'multiple'}, false)
+            )
+          )
+        )
+      ).addChild(
+        new Elem('div', {class: 'row'}).addChild(
+          new Elem('div', {class: 'two wide column'}).addChild(
+            new Elem('div', {class: 'ui fluid button', type: 'submit'}).html('Agregar')
+          )
+        )
+      )
+    )
+    return form.build()
+  },
+  add: () => {
+    var vds = $('#videos')
+    var div = vds.next('.modal')
+    if (div.length > 0) {
+      div.remove()
+    }
+    div = $('<div></div>').attr('class', 'ui modal').append(
+      $('<i></i>').attr('class', 'inside close icon')
+    )
+    if (imagenes.imagenes.length + videos.videos.length >= 12) {
+      div.append(
+        $('<div></div>').attr('class', 'header').html('Video')
+      ).append(
+        $('<div></div>').attr('class', 'content').html('Se ha llegado al máximo de elementos.')
+      )
+      vds.after(div)
+      div.modal('show')
+      return
+    }
+
+    div.append(
+      $('<div></div>').attr('class', 'header').html('Video')
+    ).append(
+      $('<div></div>').attr('class', 'content').append(videos.buildForm())
+    )
+    vds.after(div)
+    div.modal('show')
+    div.find('form .button').click((e) => {
+      div.find('form').submit()
+    })
+    /*div.find('form').submit((e) => {
+      e.preventDefault()
+      videos.addImage()
+      return false
+    })*/
+  },
+  /*addImage: () => {
     let form = $('#add_image')
     $('#resultado').html('')
     $('#resultado').append(
@@ -144,10 +267,10 @@ var imagenes = {
         fallo()
       }
     })
-  },
+  },*/
-  deleteImage: (i) => {
+  deleteVideo: (i) => {
-    let media = imagenes.imagenes[i]
+    let media = videos.videos[i]
-    let url = imagenes.url + '/evento/' + imagenes.evento + '/image/delete'
+    let url = videos.url + '/evento/' + videos.evento + '/video/delete'
     $.post(url, {media: media}, (output) => {
       if (output.estado) {
         window.location.reload()

resources/data/eventos.yml

@@ -169,3 +169,13 @@
     incididunt ut labore et dolore magna
     aliqua. Ut enim ad minim veniam, quis
     nos
+- 
+  titulo: 4° Colonia de Invierno 2019
+  empresa: Dimerc
+  servicio: Eventos Recreativos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos

resources/routes/web/admin/eventos.php

@@ -10,8 +10,14 @@ $app->group('/eventos', function($app) {
 });
 $app->group('/evento/{evento}', function($app) {
   $app->post('/edit', [Eventos::class, 'edit']);
-  $app->post('/add', [Eventos::class, 'addImage']);
   $app->get('/delete', [Eventos::class, 'delete']);
-  $app->post('/image/delete', [Eventos::class, 'deleteImage']);
+  $app->group('/image', function($app) {
+    $app->post('/add', [Eventos::class, 'addImage']);
+    $app->post('/delete', [Eventos::class, 'deleteImage']);
+  });
+  $app->group('/video', function($app) {
+    $app->post('/add', [Eventos::class, 'addVideo']);
+    $app->post('/delete', [Eventos::class, 'deleteImage']);
+  });
   $app->get('[/]', [Eventos::class, 'show']);
 });

resources/views/admin/eventos/show.blade.php

@@ -66,38 +66,86 @@
       </div>
     </form>
     <div class="ui header">
-      Media
+      Elementos
     </div>
-    <table class="ui collapsing table" id="imagenes">
+    <div class="ui equal width grid">
-      <thead>
+      <div class="column">
-        <tr>
+        <h4 class="ui header">
-          <th colspan="2" class="right aligned">
+          Fotos
-            <i class="plus icon" id="agregar_imagen"></i>
+        </h4>
-          </th>
+        <table class="ui collapsing table" id="imagenes">
-        </tr>
+          <thead>
-        <tr>
-          <th>Archivo</th>
-          <th>Borrar</th>
-        </tr>
-      </thead>
-      <tbody>
-        @if ($imagenes)
-          @foreach (array_values($imagenes) as $i => $imagen)
             <tr>
-              <td>
+              <th colspan="2" class="right aligned">
-                <div class="ui mini image">
+                <i class="plus icon" id="agregar_imagen"></i>
-                  <img src="{{$imagen->thumb->filename}}" />
+              </th>
-                </div>
-                {{$imagen->media->n}}</span>
-              </td>
-              <td class="center aligned">
-                <i class="trash icon" data-media="{{$i}}"></i>
-              </td>
             </tr>
-          @endforeach
+            <tr>
-        @endif
+              <th>Archivo</th>
-      </tbody>
+              <th>Borrar</th>
-    </table>
+            </tr>
+          </thead>
+          <tbody>
+            @if ($imagenes)
+              @foreach (array_values($imagenes) as $i => $imagen)
+                @if (strpos($imagen->media->html, '<img') === false)
+                  @continue
+                @endif
+                <tr>
+                  <td>
+                    <div class="ui mini image">
+                      <img src="{{$imagen->thumb->filename}}" />
+                    </div>
+                    {{$imagen->media->n}}</span>
+                  </td>
+                  <td class="center aligned">
+                    <i class="trash icon" data-media="{{$i}}"></i>
+                  </td>
+                </tr>
+              @endforeach
+            @endif
+          </tbody>
+        </table>
+      </div>
+      <div class="column">
+        <h4 class="ui header">
+          Videos
+        </h4>
+        <table class="ui collapsing table" id="videos">
+          <thead>
+            <tr>
+              <th colspan="2" class="right aligned">
+                <i class="plus icon" id="agregar_video"></i>
+              </th>
+            </tr>
+            <tr>
+              <th>Archivo</th>
+              <th>Borrar</th>
+            </tr>
+          </thead>
+          <tbody>
+            @if ($imagenes)
+              @foreach (array_values($imagenes) as $i => $imagen)
+                @if (strpos($imagen->media->html, '<img') !== false)
+                  @continue
+                @endif
+                <tr>
+                  <td>
+                    <div class="ui mini image">
+                      <img src="{{$imagen->thumb->filename}}" />
+                    </div>
+                    {{$imagen->media->n}}</span>
+                  </td>
+                  <td class="center aligned">
+                    <i class="trash icon" data-media="{{$i}}"></i>
+                  </td>
+                </tr>
+              @endforeach
+            @endif
+          </tbody>
+        </table>
+      </div>
+    </div>
   </div>
 @endsection
 
@@ -106,15 +154,31 @@
 @endpush
 
 @push('readyjs')
-  imagenes.imagenes = [
+  imagenes.imagenes = {
     @if ($imagenes)
-      @foreach (array_values($imagenes) as $imagen)
+      @foreach (array_values($imagenes) as $i => $imagen)
-        '{{$imagen->media->n}}',
+        @if (strpos($imagen->media->html, '<img') === false)
+          @continue
+        @endif
+        {{$i}}: '{{$imagen->media->n}}',
       @endforeach
     @endif
-  ]
+  }
   imagenes.url = '{{$urls->admin}}'
   imagenes.evento = '{{$evento->id}}'
   imagenes.setup()
+  videos.videos = {
+    @if ($imagenes)
+      @foreach (array_values($imagenes) as $i => $imagen)
+        @if (strpos($imagen->media->html, '<img') !== false)
+          @continue
+        @endif
+        {{$i}}: '{{$imagen->media->n}}',
+      @endforeach
+    @endif
+  }
+  videos.url = imagenes.url
+  videos.evento = imagenes.evento
+  videos.setup()
   $('#servicio').dropdown()
 @endpush

resources/views/evento.blade.php

@@ -81,5 +81,11 @@
     var id = $(this).attr('data-id')
     var src = media[id]
     $('#seleccionada').html(src)
+    if (src.indexOf('<img') < 0) {
+      $('#seleccionada').removeClass('image').addClass('embed')
+      $('#seleccionada').find('video').width($('#seleccionada').width())
+    } else {
+      $('#seleccionada').removeClass('embed').addClass('image')
+    }
   })
 @endpush