2

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?

  1. 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'));
    }
  1. 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>
  1. 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.

5
  • No sé si alcance a entender bien la pregunta, pero el resultado debería de ser un video. La API en respuesta devuelve arrays en formato Json y las columnas de ese array yo las estoy devolviendo según el elemento que sea, por ejemplo una columna me devuelve una URL hacia una imagen, otra respuesta dentro del array vendría siendo el ID del video. Espero haber respondido bien a la pregunta, saludos.
    – Eduardo
    el 15 abr. 2021 a las 1:21
  • 2
    la llamada inicial con Http Client está interpolando el $id entre comillas simples., o sea mandas $id literalmente. Prueba con comillas dobles para que sea reemplazado por el ID que pasa en la ruta.
    – ffflabs
    el 15 abr. 2021 a las 9:49
  • Gracias, @ffflabs eso me funciono, lo hice de esta manera: $thps4Videos = Http::get('http://thvid-api.herokuapp.com/videos/game/THPS4/'. $id .'/1')->json();
    – Eduardo
    el 15 abr. 2021 a las 15:50
  • 2
    Pregunta por si esta pregunta la ve un moderador del sitio -> No necesitamos un moderador para eso. Si encuentras la respuesta en base a un comentario o por tu cuenta, eres libre de responder tú mismo la pregunta. Eso si, el sistema no te permitirá marcarla como aceptada hasta pasadas 24h, pero tras ese periodo podrás aceptarla normalmente como cualquier otra respuesta. De hecho, es una práctica recomendada responder tus preguntas tú mismo con la solución si nadie la responde bien! Lo importante es que ninguna pregunta quede sin respuesta!
    – Benito-B
    el 15 abr. 2021 a las 16:22
  • Gracias por la aclaración ya quedo editada la pregunta original.
    – Eduardo
    el 15 abr. 2021 a las 17:09

0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

Examina otras preguntas con la etiqueta o formula tu propia pregunta.