data_src is null when Tweet has video media

[Matra-Simca]

Hi Just edited title as have pinned down the issue more (sorry bad trouble-shooting) - believe actual issue is an error of "data_src null" and failure of any embedding when a Tweet contains a video.

[Matra-Simca]

This is more specifically how Chrome is reporting the issue -

Uncaught TypeError: Cannot read property 'length' of null at extractImagesUrl (twitterFetcher_min.js:17) at Object.callback (twitterFetcher_min.js:64)

Only happens when "showImages": true - maybe script could check if media is video rather than image and if so discard? Not so worried that the video doesn't show, more that it causes all embedding to fail, not just the video tweet.

Queries 3-5 examples on the main project page don't seem to be working - I see right now on Twitter several of the latest Tweets for #caturday contain videos so possibly the same issue?

[enkota]

+1 Same issue for me when there's video media the whole feed won't load. On safari it produces:

TypeError: null is not an object (evaluating 'data_src.length')

[adupuis2]

Line 89-98

function extractImagesUrl(image_data) {
    if (image_data !== undefined && image_data.innerHTML.indexOf('data-image') >= 0) {
        var data_src = image_data.innerHTML.match(/data-image=\"([A-z0-9]+:\/\/[A-z0-9]+\.[A-z0-9]+\.[A-z0-9]+\/[A-z0-9]+\/[A-z0-9\-]+)\"/ig);
+        if(data_src !== null)
            for (var i = 0; i < data_src.length; i++) {
                data_src[i] = data_src[i].match(/data-image=\"([A-z0-9]+:\/\/[A-z0-9]+\.[A-z0-9]+\.[A-z0-9]+\/[A-z0-9]+\/[A-z0-9\-]+)\"/i)[1];
                data_src[i] = decodeURIComponent(data_src[i]) + '.jpg';
            }
            return data_src;
    }
}

Line 416-423

if (showImages && images[n] !== undefined && extractImagesUrl(images[n]) !== undefined) {
    var extractedImages = extractImagesUrl(images[n]);
+    if (extractedImages !== null)
        for (var i = 0; i < extractedImages.length; i++) {
            op += '<div class="media">' +
                '<img src="' + extractedImages[i] +
                '" alt="Image from tweet" />' + '</div>';
        }
}

I'm not sure if this is breaking anything behind the scenes, but it works fine for me. Maybe relevant: I am using dataOnly=true.

[ADmad]

The regex to match URL for data-img is too specific and fails to match URL of form https://pbs.twimg.com/ext_tw_video_thumb/<id>/pu/img/<id> used for video poster images.

A quick fix is change the regex from

/data-image=\"([A-z0-9]+:\/\/[A-z0-9]+\.[A-z0-9]+\.[A-z0-9]+\/[A-z0-9]+\/[A-z0-9\-]+)\"/ig

to

/data-image=\"([^"]+)\"/ig

[jasonmayes]

Thanks @ADmad Do you want to submit a pull?

[quedicesebas]

@jasonmayes please make a release with the @ADmad fix

[andrewtannernumiko]

Can confirm that @ADmad 's fix also works for me. Is it possible to get this PR merged and a new release, please @jasonmayes ?

[miodragkocic]

Video doesn't have data-image-format attribute, this works:

if(image_data!==undefined && image_data.innerHTML.indexOf('data-image')>=0 && image_data.innerHTML.indexOf('data-image-format')>=0) {...}