xDae / vue-fireMovie

🎥 Realtime movie search with Vuejs and Firebase
https://vue-firemoviex.firebaseapp.com/
20 stars 5 forks source link

[IDEA] incluir trailers #1

Open UlisesGascon opened 8 years ago

UlisesGascon commented 8 years ago

Hola @xDae!

Estoy pensando que podría ser muy interesante incluir los trailers de las películas.

He visto que utilizas el IMBD ID en MovieCard.vue para realizar la petición de posters usando fanArt.

Podrías usar la misma variable para cargar el trailer usando el API de traileraddict.

Te paso un ejemplo:

<trailers>
<trailer>
<title>The Program: Theatrical Trailer</title>
<link>
http://www.traileraddict.com/the-program/theatrical-trailer
</link>
<pubDate>Mon, 22 Feb 2016 12:41:35 -0800</pubDate>
<trailer_id>110074</trailer_id>
<imdb>3083008</imdb>
<embed>
<![CDATA[
<iframe width="680" height="383" src="//v.traileraddict.com/110074" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" scrolling="no" frameborder="0"></iframe> <p><a href="http://www.traileraddict.com/the-program/theatrical-trailer">Theatrical Trailer</a> for <a href="http://www.traileraddict.com/the-program">The Program</a> on <a href="http://www.traileraddict.com">TrailerAddict</a>.</p>
]]>
</embed>
<cached>no</cached>
</trailer>
<trailer>
<title>The Program: Featurette - Becoming Lance</title>
<link>
http://www.traileraddict.com/the-program/featurette-becoming-lance
</link>
<pubDate>Mon, 19 Oct 2015 16:21:24 -0700</pubDate>
<trailer_id>106483</trailer_id>
<imdb>3083008</imdb>
<embed>
<![CDATA[
<iframe width="680" height="383" src="//v.traileraddict.com/106483" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" scrolling="no" frameborder="0"></iframe> <p><a href="http://www.traileraddict.com/the-program/featurette-becoming-lance">Featurette - Becoming Lance</a> for <a href="http://www.traileraddict.com/the-program">The Program</a> on <a href="http://www.traileraddict.com">TrailerAddict</a>.</p>
]]>
</embed>
<cached>no</cached>
</trailer>
<trailer>
<title>The Program: TV Spot - Best Films (Condensed)</title>
<link>
http://www.traileraddict.com/the-program/tv-spot-best-films-condensed
</link>
<pubDate>Wed, 14 Oct 2015 12:54:35 -0700</pubDate>
<trailer_id>106345</trailer_id>
<imdb>3083008</imdb>
<embed>
<![CDATA[
<iframe width="680" height="383" src="//v.traileraddict.com/106345" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" scrolling="no" frameborder="0"></iframe> <p><a href="http://www.traileraddict.com/the-program/tv-spot-best-films-condensed">TV Spot - Best Films (Condensed)</a> for <a href="http://www.traileraddict.com/the-program">The Program</a> on <a href="http://www.traileraddict.com">TrailerAddict</a>.</p>
]]>
</embed>
<cached>no</cached>
</trailer>
<trailer>
<title>The Program: TV Spot - Never Tested Positive</title>
<link>
http://www.traileraddict.com/the-program/tv-spot-never-tested-positive
</link>
<pubDate>Fri, 09 Oct 2015 14:12:52 -0700</pubDate>
<trailer_id>106165</trailer_id>
<imdb>3083008</imdb>
<embed>
<![CDATA[
<iframe width="680" height="383" src="//v.traileraddict.com/106165" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" scrolling="no" frameborder="0"></iframe> <p><a href="http://www.traileraddict.com/the-program/tv-spot-never-tested-positive">TV Spot - Never Tested Positive</a> for <a href="http://www.traileraddict.com/the-program">The Program</a> on <a href="http://www.traileraddict.com">TrailerAddict</a>.</p>
]]>
</embed>
<cached>no</cached>
</trailer>
</trailers>

Aunque esto tiene un par de complicaciones... por un lado que el formato es xml. Este formato se puede parsear fácilmente.

XML parseado.

Por otro lado traileraddict unicamente entiende como ID valores numéricos. En algunos casos IMBD asigna IDs no numéricas. Esto se puede solucionar usando parseInt() para eliminar los elementos no numéricos.

¿ @xDae ... que opinas?

Un abrazo!

xDae commented 8 years ago

gracias por la info @UlisesGascon, no conocia esa API pero tiene muy buena pinta, le echaré un vistazo! :+1:

xDae commented 8 years ago

y como soy bastante vago para hacer el parseado xml a json manualmente, he encontrado: https://davidwalsh.name/convert-xml-json

voy a ver si encuentro alguna API pública al que le envie el xml y me devuelva la llamada en .json jeje

UlisesGascon commented 8 years ago

hahahaha! Más fácil... te paso un borrador que puede servirte, al final solo necesitas la url :+1:

function peticionAJAX(imbdID) {
    var peticion = new XMLHttpRequest();
    peticion.onreadystatechange = function() {
        if (peticion.readyState == 4 && peticion.status == 200) {
            var trailerURL = dameTrailer(peticion.responseText);
            console.log(trailerURL);
            document.body.innerHTML = '<iframe src="http://' + trailerURL + '" height="100%" width="100%"></iframe>';
        }
    };
    peticion.open("GET", "http://crossorigin.me/http://api.traileraddict.com/?imdb=" + imbdID + "&count=4&width=680", true);
    peticion.send();
}

function dameTrailer(datosXML) {

    var datosConvertidos;
    if (window.DOMParser) {
        var parser = new DOMParser();
        datosConvertidos = parser.parseFromString(datosXML, "text/xml");
    } else {
        // IE
        datosConvertidos = new ActiveXObject("Microsoft.XMLDOM");
        datosConvertidos.async = false;
        datosConvertidos.loadXML(datosXML);
    }

    datosConvertidos = datosConvertidos.getElementsByTagName("embed")[0].childNodes[0].nodeValue;
    var inicio = datosConvertidos.indexOf('//');
    var fin = datosConvertidos.indexOf('"', inicio);

    return datosConvertidos.substring(inicio, fin);

}

peticionAJAX(3083008);