audio player buttons do not appear

[rreegz]

The media player does work because I know where to click - where the play/pause button should be, but the play/pause and volumn/mute button do not appear in the player. Not sure if this is a bug or if I have missed a step. Looking for guidance here if I've missed something. I'm using the grey theme if that makes a difference.

thanks!

[mattstratton]

ah, i'll check on the grey theme myself - is this in the grid layout or row layout? if it's the row layout, does it happen on the main page or the individual episode pages?

[rreegz]

Thank you! Row layout on the episode pages. I am not using gulp either and it looked like you might be doing something with gulp to copy the files. Is that right? I just assumed that I could just start hugo server and could view it correctly locally without running any other scripts. I hope that helps!

[mattstratton]

That is correct; gulp is only needed for theme development, but using the theme doesn't require gulp!

I'll try a local build with the grey theme and see what I see!

[mattstratton]

oh wow, I totally messed this one up! apologies! I was standardizing the player and I seem to have used the wrong code. I'll try to get a fix out in the next hour or so!

[mattstratton]

I take it back; I was mis-remembering. This is fixed in #358 which hasn't been merged yet; I will get that merged and released shortly!

[mattstratton]

OK, so this was fixed in the release I just pushed which is 1.15.0

it's also merged into master if that is how you're getting the theme :)

[rreegz]

hi Matt. I downloaded the them again from master and I am still not seeing the audio player buttons. When the page initially loads they appear with a light background in that section, but then it is like it is overlayed with black and the buttons are then gone. Seems like a css issue maybe still.

[mattstratton]

How are you downloading? The zip archive from the releases page? Or are you doing a submodule?

Do you have an example I can see somewhere? A gh repo with your site maybe?

[mattstratton]

Do you see the button on this site? It's built when merged from main

https://sample-castanet.netlify.app/

HugoCast

HugoCast

The HugoCast is the best podcast you've ever seen. You will learn everything you ever needed to know about podcasting from the most inspiring experts to ever show up on the whole internet.

[rreegz]

I downloaded the zip archive directly from main here https://github.com/mattstratton/castanet and replacing my folder in themes. I then downloaded the zip archive from the release page and replaced my folder in themes.

I don't have it on github since we are doing something internally only right now. I have not added any other styling.

I do see the player icons from that site above. However, that site above is not using the grey theme is it?

GitHub

mattstratton/castanet

A podcast-oriented theme for Hugo. Contribute to mattstratton/castanet development by creating an account on GitHub.

[mattstratton]

If you switch to the blue theme do you have the same issue? I can try building on my computer later to see if grey isn't working (I'm fairly certain I tested it on grey but not sure) but that would be later tonight.

[mattstratton]

I just ran the exampleSite with the current code that is in the main branch, and changed to the grey theme, and I see the player buttons:

[rreegz]

Yes I just tried the blue theme and same result - no play or volume button. I see in the head_includes.html there is mejs-controls.svg ... is there something else I need to do with that?

[mattstratton]

if you have all the files from the release in your themes directory, everything should just work.

The static directory of themes/castanet in your site's directory should look something like this:

.
├── audiojs
│   ├── audio.min.js
│   ├── audiojs.swf
│   └── player-graphics.gif
├── components
│   └── audiojs
│       └── audiojs.js
├── css
│   ├── all.css
│   ├── blue.css
│   ├── blue.css.map
│   ├── bootstrap.css
│   ├── bootstrap3_player.css
│   ├── grey.css
│   ├── grey.css.map
│   ├── jssocials-theme-plain.css
│   ├── jssocials.css
│   ├── mediaelementplayer.min.css
│   ├── orange.css
│   ├── orange.css.map
│   ├── site.css
│   ├── site.css.map
│   ├── speed.min.css
│   └── theme.css
├── fonts
│   ├── FontAwesome.otf
│   ├── FontAwesome0.otf
│   ├── fontawesome-webfont.eot
│   ├── fontawesome-webfont.svg
│   ├── fontawesome-webfont.ttf
│   ├── fontawesome-webfont.woff
│   └── fontawesome-webfont.woff2
├── img
│   ├── episode
│   │   ├── default-social.jpg
│   │   └── default.jpg
│   ├── guest
│   │   └── default-guest.png
│   ├── mejs-controls.png
│   ├── mejs-controls.svg
│   ├── player-graphics.gif
│   └── player-graphics@2x.gif
├── js
│   ├── castanet-min.js
│   ├── castanet-min.js.map
│   ├── castanet.js
│   ├── player-graphics.gif
│   └── player-graphics@2x.gif
├── player-graphics@2x.gif
├── scss
│   ├── blue.scss
│   ├── blue_variables.scss
│   ├── bootstrap3_player.css
│   ├── custom.scss
│   ├── grey.scss
│   ├── grey_variables.scss
│   ├── orange.scss
│   ├── orange_variables.scss
│   └── site.scss
├── swf
│   └── audiojs.swf
└── webfonts
    ├── fa-brands-400.eot
    ├── fa-brands-400.svg
    ├── fa-brands-400.ttf
    ├── fa-brands-400.woff
    ├── fa-brands-400.woff2
    ├── fa-regular-400.eot
    ├── fa-regular-400.svg
    ├── fa-regular-400.ttf
    ├── fa-regular-400.woff
    ├── fa-regular-400.woff2
    ├── fa-solid-900.eot
    ├── fa-solid-900.svg
    ├── fa-solid-900.ttf
    ├── fa-solid-900.woff
    └── fa-solid-900.woff2

12 directories, 65 files

If you open the page in chrome dev tools (or similar) are you getting any errors?

[mattstratton]

For what it's worth, I just upgraded the theme on one of my shows and loaded it (it's the grey/row config).

I am seeing the player icons, so it should work.

For the record, this is how I "upgrade" the theme

(snippet of bash - full script for reference)

wget https://github.com/mattstratton/castanet/releases/download/$version/castanet-$version.zip
rm -rf themes/castanet
unzip castanet-$version.zip -d themes/

Just sharing that to see if it triggers anything to you in that you're doing something else to install the theme?

Does the player show for you here? https://deploy-preview-19--quiche-anon.netlify.app/? That's a non-exampleSite implementation using the latest released version.

Quiche-Anon

Quiche-Anon

Hosts Kelli and Matt talk about their favorite conspiracy theories, as well as favorite recipes and cooking tips. A delightful mix of conspiracy and cooking.

[rreegz]

Hey Matt. Thanks for your quick responses here. I'm confused at why these won't show for me. I'm wondering if there are certain features blocked for me. Is it a .gif, .svg, or some other file time that is actually being rendered for the media player buttons?

Also, would it make a difference the type of audio file I am streaming? I am streaming mp4.

Thanks

[mattstratton]

If you open the page in chrome dev tools (or similar) are you getting any errors?

anything failing in there? Maybe a javascript error, or something not loading?

[rreegz]

mejs-controls.svg:1 Failed to load resource: the server responded with a status of 404 (Not Found)

[mattstratton]

Does this only happen on your builds? Does it work for you on the deploy preview link I put up there for quiche-anon? (just want to make sure that it's not something local to your browser)

[mattstratton]

I am 99% sure that mejs-controls.svg is from the older version of the theme in a weird way; are you sure that the local copy is the latest and you don't have any stray files from a previous version?

[mattstratton]

No, it should be in the theme. hold on...

[mattstratton]

what is the content of themes/castanet/static/img in your site?

should look like this:

├── episode
│   ├── default-social.jpg
│   └── default.jpg
├── guest
│   └── default-guest.png
├── mejs-controls.png
├── mejs-controls.svg
├── player-graphics.gif
└── player-graphics@2x.gif

[rreegz]

I can't get to that deploy link because it is blocked at my work. :) I might be able to get to it after 24 hours from now...

[mattstratton]

can you check the contents of the theme's static/img directory? If you are getting a 404 and the image is there, then there is another issue :/

[rreegz]

Yes it is there in the folder. hmmm

[mattstratton]

okay. assuming you are running hugo with watch (sub in whatever hostname works) do any of these URLs work for you:

http://localhost:1313/img/mejs-controls.svg http://localhost:1313/img/mejs-controls.png http://localhost:1313/img/episode/default-social.jpg

[mattstratton]

I guess that's another question - how are you running hugo locally? For example, are you doing something like hugo server -w --baseUrl="http://localhost:1313"?

[rreegz]

just hugo server

2 of the 3 links for for me without error. The log from the mejs-controls.svg are:

content.js:521 Uncaught TypeError: Cannot set property 'cssText' of undefined at DgChromeContent.constructIframe (content.js:521) at new DgChromeContent (content.js:443) at content.js:645 at content.js:646 onloadwff.js:71 Uncaught (in promise) TypeError: Cannot read property 'querySelectorAll' of null at s. (onloadwff.js:71) at l (onloadwff.js:71) at Object.next (onloadwff.js:71) at n (onloadwff.js:71)

[mattstratton]

I'm really at a loss here - I can't reproduce this, so I'm not sure if there's something in your browser that is making it unhappy. Do you have the same issue with another browser? Have you tried it in an incognito window to confirm that there are not extensions/plugins that are interfering?

I just haven't seen this happen in any other implementations, so it's puzzling to me, and I'm troubleshooting blind here :)

[mattstratton]

What is the exact command you are running for hugo locally? Just want to see if I can reproduce it exactly (doesn't sound like you are running with -w if I read correctly)

I wonder if there is something in the config file that is different for some reason that is causing the static files to not load properly.

Like I said, there are a lot of things that might be different in your setup than mine, but it's hard without being able to diff.

[rreegz]

hugo server (without -w)

I've tried it with IE, Edge, and Firefox. I'm at a lost too at this point. I disable my extensions and the two .js errors above go away and a 200 response occurs when I go straight to the path of the .svg. However, it still does not display on the page. Bummer!

[rreegz]

Oh heck when I just used hugo server -w it works as it should! I am such a newb with Hugo....

[mattstratton]

Oh good! I think this is resolved then. I'm glad it got figured out!

[rreegz]

Close... it shows when I build and run locally. When I try to push/publish to Gitlab pages it will not show the svg. When Iink directly to the svg it returns fine with 200 status. When I simply try to display the page with the svg on the player I get a 404 on the svg.

Similar to this issue. https://gitlab.com/gitlab-org/gitlab/-/issues/26104

If you're aware of any workarounds I'd be forever grateful!

GitLab

Cannot insert SVG image from inside repo to README.md (#26104) · Issues · GitLab.org / GitLab

Summary I can't embed SVG images to the markdown document. I've tested it on https://gitlab.com/chez14/image-test

[rreegz]

I figured it out based on hosting with Gitlab pages. If you want to add a note somewhere about this, in reference.md or elsewhere let me know and I'll look to contribute back! :)

[mattstratton]

that would be great! is the general gist "there's a thing you have to do if you are hosting on gitlab pages" (if I wanted to add a section to the reference docs)?

[rreegz]

Yes it is very simple.

[mattstratton]

cool! i'll put together a draft PR with a section on that which you can contribute to in the next day or so (while it's fresh in your mind)

feel free to drop notes in this issue if you want to get them out of your brain :)