Hello everyone, I’m just getting started with rails and I’m building a sort of mediasharing platform/player application to be accessed via browser. Right now I have a working prototype that uses carrierwave for file upload , devise for auth and a model called medium in which I link the actual files to the db.
Now, the html player called by send_file medium.file.path, disposition: 'inline' is definetly lacking in fuctionality and I wanted to add a better player.
Looking around I’ve found many premade projects, but a particular gem called plyr that implements the plyr player in rails caught my eye. On the github of the gem though it says “For rails 4 and 5”.
Are there some modifications required to my standard rails app to make it work, or is it just an outdated gem and something else is available for rails 7?
Please help me pick a player for my rails app, any insight is greatly appreciated.
You could try it, I suppose. I just had a quick look at the source, and I believe that if you were using one of the Sprockets-friendly approaches (cssbundling + jsbundling) rather than the import map asset handling, this might stand a good chance of working without modification.
That said, Plyr is available from NPM, plyr - npm which means you could add it to your project with yarn add plyr or the equivalent pin command (I don’t use that approach, so you’ll have to look it up). The gem doesn’t really do anything except put these assets into your asset pipeline; everything else is DIY–you still have to add the trigger classnames to your HTML in the project templates manually.
So on balance, if this is a “green field” project started in Rails 7, I would say skip the gem (except for the readme for some tips) and carry on with the modern front-end approach using your preferred JS bundling strategy.
Walter
Thank you Walter for your reply. Is there some player that I can utilize with the rails 7 general scaffolding made with rails new using the default import map asset handling? Fogive my technical inadequacy as I’m just getting started with backend and in particular rails
Have a look at the documentation around import maps: https://github.com/rails/importmap-rails
You can “pin” anything you can find on NPM with these commands.
Walter
Hello again Walter, I took your suggestion and I tried to add Plyr with ./bin/importmap pin plyr.
I tried to set it up, but the stream page where the player is supposed to load shows a prototype of a html players for half a second and then its just blank but for the debug statement.
For the sake of simplicity I’ve made a imgur album of snippets of code if you’de be so kind to take a look and point me to the right direction.
What I’m doing in the controller is getting @medium=Medium.find(params:id) then I declare @mpath=@medium.file.path and in the view I use it like this
<audio id="player" controls> <source src="<%@mpath%>" type="audio/mp3" /> </audio>
Thank you so much for your help so far
Does your browser’s JavaScript console (developer tools) show any error messages? The fact that the UI loads for an instant but then disappears rules out the Rails part as far as I can tell. And the only console you showed appeared correct – it ended in a 200 success header for the route.
I would look in your browser’s console, and also try a different browser to see if there is something specific about the script (which I have never used) and a particular browser or version.
Also, look carefully to see if there is anything else in the DOM (in your browser) with the ID “player”. HTML requires that any ID be completely unique within the entire page. Browsers forgive this error all the time, but JavaScript is cruel and does random things when you break this rule.
Walter
I updated the album with the browser console, and changed the name of the player to “myplayer” just to be sure, but the error still occurs. In the browser console it seems the error TypeError: n is not a function is stemming from the plyr source code directly.
I also tried opera and ie but with the same results
Yes, I see the error, but I don’t know how you’re going to sort this. You could try a different version of the plyr library and see if that makes any difference. I don’t use import maps, so I don’t know how to do this, but I recall seeing directions somewhere to pin things like this with an @ and a version number. You’ll have to look and see.
Walter
Bless you Walter! It worked by “pinning” version 3.7.3, it seems things get buggy 3.7.4 and onward.
The file is not loading correctly, but I think thats my bad. It starts a request like GET /full/path/of/file that returns 404 albeit the file obviously exists.
I think I need to find some other way to reference the file in:
<source src="<%= @mpath %>" type="audio/mp3" /> (where I was also missing a = after %)
Not saying anything is wrong with carrier_wave, but GitHub - janko/image_processing: High-level image processing wrapper for libvips and ImageMagick/GraphicsMagick is becoming the Rails default I think. Might want to look before you get too deep.
Thank you Greg! I’m using CarrierWave because I’m managing multiple file types in the same uploader/model pair.
I basically have a “Medium” model in which the file_type attribute can be “song”, “image”, “video” and so on. The uploader helps me define those types and automatically assign them when the file is uploaded.
Isn’t the github you linked just for images? Do you think I should have a separate uploader for images? I don’t really plan on modifying or manipulating the images, just displaying them
Hey I have found very good channel for Ruby on Rails
