Clean up MRjs console output

[lobau]

Currently, any MRjs project starts with all this in the console (try mrjs.io for example).

We should clean this up, I hate when libraries pollute my console

[hanbollar]

adding a note: An AudioContext was prevented... warning

the warning has to do with audio context being started when the browser hasnt had a user interaction (click/mousemove) yet, just page load. This is common in more modern/chrome-based browsers to prevent music to start playing on page load for user-experience

manually triggering an event doesnt work to make this happy - since it's a warning, we might want to wrap it in something or we'll have to change how we're allowing audio to start

if audio starts as muted, it is allowed to load on page load

[hanbollar]

adding a note: unsupported GPOS table LookupType... warnings

these are from text loading - possibly due to troika - not an actual error, just something to do with the rendering interaction

Glyph Positioning (GPOS) and Glyph Substitution (GSUB) tables within the font files being used on the web page. These tables are part of the OpenType font specification and are used to control how glyphs (the visual representations of characters in the font) are positioned and substituted when the text is rendered.

main reasonings are either for font-specific issues that we'll have to add more info for or browser compatability:

• Browser Compatibility: Not all browsers have the same level of support for all features of the OpenType specification. If you're seeing these errors, it might be that the browser you're using does not support the specific LookupTypes used in the font, or there are bugs in how the browser handles these LookupTypes.
  • note: this shows up on chrome and firefox, so it's not really a browser problem imo
• Font Issues: The font file itself might be using advanced OpenType features that are not widely supported, or the font could be corrupted or not properly optimized for web use.
  • note: i think this might partially be the problem, but i think we might just need to include more info/data for the font we're using as default

[hanbollar]

adding note: unreachable code after return... warning

i dont see this anymore, but if it does pop up again that's something to look into nvm i see it, im not sure how we fix this fully at the moment but the best option here would be to suppress rapier warnings unless in debug mode

thoughts:

• maybe go to rapier and do a pr if it's opensource
• though it's not the best to forcibly suppress warnings in any case

[lobau]

adding a note: An AudioContext was prevented... warning

the warning has to do with audio context being started when the browser hasnt had a user interaction (click/mousemove) yet, just page load. This is common in more modern/chrome-based browsers to prevent music to start playing on page load for user-experience

manually triggering an event doesnt work to make this happy - since it's a warning, we might want to wrap it in something or we'll have to change how we're allowing audio to start

if audio starts as muted, it is allowed to load on page load

Should we not start an AudioContext on every MRjs app? Or at least wait for an audio file to be loaded before starting the context?

[hanbollar]

adding a note: An AudioContext was prevented... warning the warning has to do with audio context being started when the browser hasnt had a user interaction (click/mousemove) yet, just page load. This is common in more modern/chrome-based browsers to prevent music to start playing on page load for user-experience manually triggering an event doesnt work to make this happy - since it's a warning, we might want to wrap it in something or we'll have to change how we're allowing audio to start if audio starts as muted, it is allowed to load on page load

Should we not start an AudioContext on every MRjs app? Or at least wait for an audio file to be loaded before starting the context?

yea that's another way to do it - right now we have it as part of the constructor for the audio system, but moving that fill out to later (or when it's actually connected) should definitely be doable

[hanbollar]

i think that was all the notes i had for these for now - i'll see if i can tackle any part of these during next week along with the other priorities ~

[hanbollar]

adding a note: unsupported GPOS table LookupType... warnings

these are from text loading - possibly due to troika - not an actual error, just something to do with the rendering interaction

Glyph Positioning (GPOS) and Glyph Substitution (GSUB) tables within the font files being used on the web page. These tables are part of the OpenType font specification and are used to control how glyphs (the visual representations of characters in the font) are positioned and substituted when the text is rendered.

main reasonings are either for font-specific issues that we'll have to add more info for or browser compatability:

• Browser Compatibility: Not all browsers have the same level of support for all features of the OpenType specification. If you're seeing these errors, it might be that the browser you're using does not support the specific LookupTypes used in the font, or there are bugs in how the browser handles these LookupTypes.

  • note: this shows up on chrome and firefox, so it's not really a browser problem imo

• Font Issues: The font file itself might be using advanced OpenType features that are not widely supported, or the font could be corrupted or not properly optimized for web use.

  • note: i think this might partially be the problem, but i think we might just need to include more info/data for the font we're using as default

looked into this more and it has to do with the fonts themselves that we're using in the css of our samples and mrjs pages -- an online solution provided something along the lines of:

/* get the required local files */
@font-face {
  font-family: 'Roboto';
  src: url('roboto.eot'); /* IE9 Compat Modes */
  src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('roboto.woff') format('woff'), /* Modern Browsers */
  url('roboto.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* use the font */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 48px;
}

stating that just using truetype and not allowing other options was what might be causing this

@lobau - i tried the above and it didnt fix all the printing outputs, but it seems the right path - since this isnt directly part of mrjs but the samples themselves from the font we're doing in the css, do you have tips on better ways to load in the fonts in the css? is there a way we can do a url load with all the options instead of directly importing from an assets folder?

[hanbollar]

adding note: unreachable code after return... warning

~i dont see this anymore, but if it does pop up again that's something to look into~ nvm i see it, im not sure how we fix this fully at the moment but the best option here would be to suppress rapier warnings unless in debug mode

thoughts:

• maybe go to rapier and do a pr if it's opensource
• though it's not the best to forcibly suppress warnings in any case

updated my browser and this went away.... fishy... 🐟

[hanbollar]

adding a note: An AudioContext was prevented... warning the warning has to do with audio context being started when the browser hasnt had a user interaction (click/mousemove) yet, just page load. This is common in more modern/chrome-based browsers to prevent music to start playing on page load for user-experience manually triggering an event doesnt work to make this happy - since it's a warning, we might want to wrap it in something or we'll have to change how we're allowing audio to start if audio starts as muted, it is allowed to load on page load

Should we not start an AudioContext on every MRjs app? Or at least wait for an audio file to be loaded before starting the context?

yea that's another way to do it - right now we have it as part of the constructor for the audio system, but moving that fill out to later (or when it's actually connected) should definitely be doable

looks like the changes in the video pr made this happy

[hanbollar]

quick recap of pending todos here for console outputs:

• [x] the font issue - waiting on followup on a question for lobau
• ⚠️ the rapier issue disappeared on browser reload 🐟
• ⚠️ the audio context issue disappeared, i wonder if it had something to do with the video loading change recently

i'll check back on the warning ⚠️ items in a bit, but for now theyre considered resolved

the checkbox item with lobau is an ongoing discussion

[lobau]

Regarding the question, it happens even when you don't define any font, and use whatever is the default ( sample here https://create.mrjs.io/view/blueberry-brownie-E9fFhTO/ ) Unfortunately, it's very rare that fonts get released with all the formats listed, especially variable fonts, which are usually one TTF file. Ultimately, I don't care too much about mrjs.io having a clean console. I think what's important is that a blank project has a blank console. If possible, this page should return no console log:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Hello world</title>
    <script src="https://cdn.jsdelivr.net/npm/mrjs@0.4.92/dist/mr.js"></script>
</head>
<body>

<mr-app>
    <mr-panel data-comp-anchor="type: fixed;">
            <mr-text>Hello world</mr-text>
    </mr-panel>
</mr-app>

</body>
</html>