Trying to embed Twitch video via AngularJS custom directive

[Nicolas Cerrato]

Hello Angular community,

I'm a beginner developer and i've been struggling lately trying to embed the Twitch video player in my AngularJS front end.

From my research, it seems like creating a directive and using angular.element is the way to go but now i’ve been stuck at that point for a while.

Here’s my directive function code:

function testDirective() {

          return {
            restrict: 'EA',
            template: '<script src="https://embed.twitch.tv/embed/v1.js"></script> <div id="twitchemb"></div>',
            link: function($scope, iElm, iAttrs) {
              var script = '<script type="text/javascript">'
                  'var options = {'
                    'width: 854,'
                    'height: 480,'
                    '};'
                'var player = new Twitch.Player("twitchemb", options);'
              '</script>';

              var scriptElem = document.createElement(script);
              scriptElem.attr("src", "https://player.twitch.tv/?autoplay=false&video=v165913358&t=15707s"); // set var appropriately
              element.append(scriptElem);
              }
          };
    };

When I remove the link attribute entirely and use a dummy template, say "<div>yo</div>, then I get the "yo" displayed in my html page.

But when using the code above, I get a "String contains invalid character error". I think the issue is coming from the script variable used by document.createElement().

Am I way off the mark?! Is it just a little syntax mistake?

Any kind of light shed on the matter will be greatly appreciated!

[Sander Elias]

Hi Nicolas,

In AngularJS you can not use `<script>` tags in your templates. What you can is load the script using a loader from within your code.

Regards

Sander

[Nicolas Cerrato]

Hello Sander,

Thanks for your reply!

Now I can see where to dig a bit more clearer.

If you have any code example you could link to, that'd be much appreciated as well.

Best regards,

Nicolas

[Sander Elias]

Hi Nicolas,

Something like this(untested):

function scriptLoad(src) {

return new Promise(resolve => {

const s = document.createElement('script');

s.addEventListener('load', resolve);

document.head.appendChild(s);

s.src = src;

});

}

scriptLoad('someScript').then(() => {

// do the things you want to do once the script is loaded.

});

Probably will do?

Regards

Sander

[Nicolas Cerrato]

Sander, thanks so much!

I did it and your bit of code really helped a lot. I'm really a noob: I had no idea about DOM manipulation with javascript. Deciphering your code helped me make sure I was learning the right things to write the rest of it.

Here's the final working code to get Twitch' embed inline script loaded via an AngularJS directive:

    function testDirective() {

      return {

        restrict: 'EA',

        replace: false,

        template: '<div id="yoyoyo"></div>',

        link: function(scope, element, attrs) {

          function scriptLoad(src) {

            return new Promise(function (resolve, reject) {

              const s = document.createElement('script');

              document.head.appendChild(s);

              s.src = src;

              s.addEventListener('load', resolve);

            });

          }

          scriptLoad('https://embed.twitch.tv/embed/v1.js').then(function(response) {

            console.log(response);

            var testE = angular.element('<script/>')

                    .attr('type', 'text/javascript');

            var scriptText =

                    'var options = {' +

                    'video: "v165913358"' +

                  '};' +

                  'var player = new Twitch.Embed("yoyoyo", options);';

            testE[0].text = scriptText;

            element.append(testE);

          })

        }

      }

    }

Somehow using "Twitch.Player" towards the end threw a "not a constructor" error but I saw someone using "Twitch.Embed" while wandering on Twitch forums and it worked like that for me.

Cheers