Document Vue best practices

[FireMasterK]

Have you read the FAQ and checked for duplicate open issues?
Yes

What version of Shaka Player are you using?
3.0.8, tried 2.5.20 aswell

Can you reproduce the issue with our latest release version?
Yes

Can you reproduce the issue with the latest code from master?
I have not tried,

Are you using the demo app or your own custom app?
Custom app

If custom app, can you reproduce the issue using our demo app?
No, I feel this is an issue in my code

What browser and OS are you using?
Brave, Windows 10

What are the manifest and license server URIs?

What did you do?

So, I have a vuejs 3 application where I want to load a dash manifest. Here is my code:

                            const shaka = import("shaka-player/dist/shaka-player.compiled.js");
                            shaka
                            .then(shaka => shaka.default)
                            .then(shaka => {
                                this.player = new shaka.Player(
                                    this.$refs.player
                                );

                                var streams = [];

                                streams.push(...this.video.audioStreams);
                                streams.push(...this.video.videoStreams);

                                const dash = require("../utils/DashUtils.js").default.generate_dash_file_from_formats(
                                    streams,
                                    this.video.duration
                                );

                                this.player.load(
                                    "data:application/dash+xml;charset=utf-8;base64," +
                                        btoa(dash)
                                );
                            });

What did you expect to happen?
Load the playlist correctly.

What actually happened?

Uncaught (in promise) TypeError: Cannot read property 'name' of null
    at Object.je (shaka-player.compiled.js?446e:286)
    at xa.eval [as b] (shaka-player.compiled.js?446e:258)
    at Ca (shaka-player.compiled.js?446e:22)
    at Ea.next (shaka-player.compiled.js?446e:23)
    at eval (shaka-player.compiled.js?446e:24)
    at new Promise (<anonymous>)
    at Ga (shaka-player.compiled.js?446e:24)
    at J (shaka-player.compiled.js?446e:24)
    at Ih (shaka-player.compiled.js?446e:258)
    at xa.eval [as b] (shaka-player.compiled.js?446e:257)

[TheModMaker]

Can you try with the uncompiled or debug versions of the library? You can follow our debugging tutorial to see how. That will give us a usable stack trace to see where the problem is.

Also I don't know if we'd detect this as DASH and parse it. We support data URLs, but we need to detect which parser to use. Try passing some extra arguments:

this.player.load(uri, null, 'application/dash+xml');

[ismena]

Hi @FireMasterK
I'm not really familiar with vuejs, but let me do my best to help debug through educated guessing :)

When you're creating a player (this.player = new shaka.Player( this.$refs.player );) what is this.$refs.playerthat you're passing into the constructor? shaka.Player constructor expects a video element, so maybe you should be passing this.video instead (I see it's used later in your code).

What do you get if you look at this.player in the console?

[joeyparrish]

Also I don't know if we'd detect this as DASH and parse it. We support data URLs, but we need to detect which parser to use.

The data URI parser supports the MIME type parameter in the URI, so that should still work without needing to also specify it in the load() call. If it doesn't, let us know.

But I am betting that @ismena is right about the source of your exception. That part of your code doesn't look right to me.

[FireMasterK]

Here's my debug logs:

Assertion failed: Missing next step!
The walker saw an error:
Error Message: Cannot read property 'name' of null
Error Stack: TypeError: Cannot read property 'name' of null
    at Object.enterNode (webpack-internal:///./node_modules/shaka-player/dist/shaka-player.compiled.debug.js:692:283)
    at $jscomp.generator.Engine_.eval [as program_] (webpack-internal:///./node_modules/shaka-player/dist/shaka-player.compiled.debug.js:634:486)
    at $jscomp.generator.Engine_.nextStep_ (webpack-internal:///./node_modules/shaka-player/dist/shaka-player.compiled.debug.js:37:105)
    at $jscomp.generator.Engine_.next_ (webpack-internal:///./node_modules/shaka-player/dist/shaka-player.compiled.debug.js:33:234)
    at $jscomp.generator.Generator_.next (webpack-internal:///./node_modules/shaka-player/dist/shaka-player.compiled.debug.js:38:73)
    at eval (webpack-internal:///./node_modules/shaka-player/dist/shaka-player.compiled.debug.js:39:230)
    at new Promise (<anonymous>)
    at Object.$jscomp.asyncExecutePromiseGenerator (webpack-internal:///./node_modules/shaka-player/dist/shaka-player.compiled.debug.js:39:123)
    at Object.$jscomp.asyncExecutePromiseGeneratorProgram (webpack-internal:///./node_modules/shaka-player/dist/shaka-player.compiled.debug.js:39:419)
    at shaka.routing.Walker.takeNextStep_ (webpack-internal:///./node_modules/shaka-player/dist/shaka-player.compiled.debug.js:634:87)

Uncaught (in promise) TypeError: Cannot read property 'name' of null
    at Object.enterNode (shaka-player.compiled.debug.js?1310:formatted:10895)
    at $jscomp.generator.Engine_.eval [as program_] (shaka-player.compiled.debug.js?1310:formatted:9977)
    at $jscomp.generator.Engine_.nextStep_ (shaka-player.compiled.debug.js?1310:formatted:471)
    at $jscomp.generator.Engine_.next_ (shaka-player.compiled.debug.js?1310:formatted:424)
    at $jscomp.generator.Generator_.next (shaka-player.compiled.debug.js?1310:formatted:501)
    at eval (shaka-player.compiled.debug.js?1310:formatted:534)
    at new Promise (<anonymous>)
    at Object.$jscomp.asyncExecutePromiseGenerator (shaka-player.compiled.debug.js?1310:formatted:530)
    at Object.$jscomp.asyncExecutePromiseGeneratorProgram (shaka-player.compiled.debug.js?1310:formatted:544)
    at shaka.routing.Walker.takeNextStep_ (shaka-player.compiled.debug.js?1310:formatted:9970)

this.video is some json data, which helps me load the video into the player.

This is console.log(this.$refs.player) looks like this:

console.log(shaka) looks like this:

console.log(this.player) looks like this:

[FireMasterK]

Any help on why this could be happening?

[joeyparrish]

@FireMasterK, I'm sorry, but the symptoms don't look familiar to me. Are you willing to share your application source with us, either publicly or privately ([email protected])? We might be able to help you debug the issue if we could see it ourselves.

If not, I don't think there will be much more we can do to help from here.

[FireMasterK]

Sure, I will try to create a replicable example for this :D

[joeyparrish]

Thanks! If you use the private email alias, please also ping the issue back so we know to look for the email.

[FireMasterK]

Here's my demo code: https://github.com/StuffNoOneCaresAbout/bugreport-shaka-player

You have to run these:

yarn install
yarn serve

And then you can open http://localhost:8080/watch to reproduce the bug :D

[FireMasterK]

Were you able to replicate the issue on your end?

I also tried creating a fresh Vue app and it works there, I suspect this has something related to the single page app/router.

[FireMasterK]

@joeyparrish were you able to reproduce this? Do I need to do anything else to help?

[ismena]

Hi @FireMasterK sorry for the delay, let me take this over.
I'm able to reproduce with your app.
Things I noticed:

• This manifest loads fine in the demo page, so it probably is a problem with the app code
• The logs say, the problem's coming from our Walker/Load graph logic. One of my least favorite pieces of code. Sigh. ;)
• Beyond that, log's aren't terribly helpful

@FireMasterK Could you help me out a bit, I haven't worked with Vue before and am not sure how to do something.
Is there a way to load our uncompiled library with your app? (See our debugging tutorial for an example). If we can do it, I'd be able to drill down into what exactly is throwing the error.

Thanks!

[FireMasterK]

Hi @ismena,

I was unable to load the uncompiled library, unfortunately, it kept giving errors related to goog, which I assume is the closure library.

I've used the debug version in the app, is that of any help?

Most of the player logic for loading the library and the manifest is in WatchVideo.vue

[FireMasterK]

I did some more debugging, the issue only occurs when shaka-player is initialized from WatchVideo.vue, I moved the code to App.vue and it worked.

To further test, I initialized the player from App.vue when the element was in WatchVideo.vue.

I tried putting the shaka-player initialization code in a setTimeout function and it worked! So, this is what I'm going to stick with for now.

Would this be of any help to you?

[ismena]

Nice! I'm glad to hear it's working.
I'll keep your experience in mind in case other people bring up issues with Vue.js.

I'm gonna close the issue as it sounds like you were able to resolve the problem and it seems to be a Vue.js integration issue rather than a player one.

If you ever feel like writing a tutorial for integrating Shaka with Vue, we'll be happy to link to it from the README! :)

[theodab]

So, I ended up looking into this again (because of #3622), and found the root cause of that Cannot read property 'name' of null error.

It appears that Shaka Player cannot handle being made into a reactive object, which is what happens if you put it into a Vue data object. I found, in your demo code, that if you define Shaka Player outside of a data object (or prefix the variable name with $ or _ to make Vue not make it reactive) it loads the asset successfully.

This is a problem because, if Vue converts an object to one of its special Proxy objects, it also converts nested objects within that object into Proxy objects. This leads to some of our internal workings being converted into proxies, which causes some object equality checks to fail when they should be succeeding (because proxies are not equal to the object they are wrapping). In your demo code, this line in particular is the one that is affected.

I'll update our documentation to mention that Shaka Player should not be converted into a Vue reactive object.