No puedo hacer que la respuesta que hago a una API sea "única", en vez de devolverme un sólo recurso me trae una colección y necesito ver sólo un recurso.
¿Qué estoy haciendo?
- En mi controlador
PlayVideosController
hago una llamada hacia una API en donde le agrego una variable$id
al parámetro de mi función, esta busca en la API la columna de _id, luego la guardo en una variable que guarda un array.
public function thps4($id)
{
$id++;
$thps4Videos = Http::get('http://thvid-api.herokuapp.com/videos/game/THPS4/$id/1')->json();
$thps4Video = $thps4Videos[0];
return view ('videos.thps4', compact('thps4Video'));
}
- Esta información la paso a un componente de Livewire en donde realizo un forelse, y dentro tengo un
<a href="">
, aquì le paso el$key
para poder seleccionar un recurso, esto como resultado me genera una URL asi: http:://thpsvido.com/videos/thps4/4
<div wire:init="loadTHPS4">
<div>
@forelse ($thps4Results as $key => $thps4)
<div wire:key="results-{{ $thps4['_id'] }}">
<img src="{{ $thps4['Thumbnail'] }}">
<div>
<a class="relative bottom-4" href="videos/thps4/{{ $key }}">
<svg>
</svg>
</a>
<p class="text-sm font-semibold ml-14">
{{ $thps4['Title'] }}
</p>
</div>
</div>
@empty
@foreach (range(1,6) as $thumbnail)
<div wire:key="empty-{{ $thumbnail }}">
<p>cargando...</p>
</div>
@endforeach
@endforelse
</div>
</div>
- Al hacer clic en el href uno es redireccionado a otra página en donde existe un elemento de tipo
<video>
, y utilizando una librería, VideoJS hago que se carge un video de Youtube. Es en las propiedades de la librería en donde escribo la dirección, y aquí en la dirección: reemplazo el ID del video de youtube con la variable que tengo en mi controlador. Aquí, la variable de$key
ya tiene que haber asociado la posición de un array, con la columna ID. Y esto debería de suceder para todas las arrays, obteniendo un video con un ID diferente.
<div class="pt-20 h-full w-screen">
<video
id="vid1"
class="video-js"
controls
autoplay="true"
preload="auto"
>
</video>
<div
x-data="{close: true}"
x-show="close"
class="text-center"
>
<p class="text-sm text-gray-500">
Mute is enabled by default, sorry for the inconveniences
</p>
<p
x-on:click="close = false"
class="text-green-500 text-sm cursor-pointer"
>
close
</p>
</div> {{-- inconveniences message --}}
</div>
<!-- videojs -->
<script src="//vjs.zencdn.net/7.10.2/video.min.js"></script>
<script src="{{ asset ('/js/Youtube.min.js') }}"></script>
<script>
var player = videojs('vid1', {
"techOrder": ["youtube"],
"sources": [{ "type": "video/youtube",
"src": "http://www.youtube.com/watch?v={{ $thps4Video['ID'] }}"}],
"fluid": true,
"autoplay": true
});
player.ready(function() {
setTimeout(function() {
player.autoplay('muted');
player.volume(0.5);
player.fluid('true')
}, 2000);
});
</script>
¿Qué debería de suceder?
Dependiendo de la URL, un video diferente se debería de cargar cada vez que se hace clic, ya que si la URL es la siguiente http:://thpsvido.com/videos/thps4/4 entonces deberíamos de cargar sólamente un video, y ese sería el que esté en la posición 4. Otro ejemplo, si la dirección es la siguiente: http:://thpsvido.com/videos/thps4/5, entonces debería de devolver el de la posición 5.
¿Qué es lo que sucede?
No importa cual sea el número que aparezca en la URL, por ejemplo, puede ser: http://thvid-api.herokuapp.com/videos/game/THPS4/$id/2, aquí se cargan 2 videos debería de ver sólamente 1, el de la posición 2.
Si hago un dd($thps4Videos)
en mi función y le doy clic al video que sea, siempre me devuelve el mismo video en el array.
Un array dentro de la colección tiene estas columnas:
array:1 [▼
0 => array:8 [▼
"_id" => "605a43ea667cd39060f435ac"
"Title" => "THPS4 Rewind: Summer Of 2003 Unreleased (Edited by Maxfli)"
"Game" => "THPS4"
"ID" => "Qxd7D1KN1No"
"Thumbnail" => "https://i.ytimg.com/vi_webp/Qxd7D1KN1No/maxresdefault.webp"
"newduration" => "00:22:53"
"category" => "gameplay"
"updatedAt" => "2021-04-12T17:45:27.167Z"
]
]
No tengo ningun error en cuanto a excepciones o mensajes de error.
Estoy utilizando una librería Javascript llamada VideoJS, versión 7.10.2, estoy usando Mozilla Firefox en Windows 10. También estoy utilizando la extensión de Youtube de esta misma librería. VideoJS: https://github.com/videojs/video.js Youtube extension: https://github.com/videojs/videojs-youtube
La API recolecta estos datos de Youtube.
$id
literalmente. Prueba con comillas dobles para que sea reemplazado por el ID que pasa en la ruta.$thps4Videos = Http::get('http://thvid-api.herokuapp.com/videos/game/THPS4/'. $id .'/1')->json();