I am trying to get jPlayer working with the flash fallback in a rails app and so far no luck! My constructor right now looks like this:
$("#jquery_jplayer_1").jPlayer({
preload: "auto",
errorAlerts: true,
swfPath: "javascripts",
solution: "flash, html",
supplied: "oga",
wmode: "window",
ended: function(e) {
...some function...
}
});
I cannot get the swfPath correct it seems, and I must be missing something here about how jPlayer is looking for that path. My other assets, such as images from stylesheets, seem to be correctly routed to the assets folder/images folder. I can't seem to find the magic combination to get jPlayer to find the Jplayer.swf. I have tried putting the swf file in the public folder, in a folder within the public folder, in the assets folder, and in the javascripts folder within the assets folder. No luck! Has anybody dealt with this problem before?
I have the same problem... After finding no answer on the Internet, I started trying stuff :)
This worked for me (Rails 3.2):
$(document).ready(function(){
$("#jplayer").jPlayer({
ready: function (event) {
$(this).jPlayer("setMedia", {
m4a: "url goes here"
});
},
swfPath: "/",
supplied: "m4a",
solution: "flash, html"
});
});
or in coffeescript:
$ = jQuery
$ ->
$(document).ready ->
$("#jplayer").jPlayer(
ready: (event) ->
$(this).jPlayer "setMedia",
m4a: "url goes here"
preload: "auto",
swfPath: "/",
solution: "html, flash",
supplied: 'm4a')
I placed the Jplayer.swf file under public/. Works now!
I think a nifty way of doing this is to add a swf dir to the asset pipeline.
You can do this by adding
config.assets.paths << Rails.root.join("app", "assets", "swf")
to your config/application.rb file and drop the Jplayer.swf file in vendor/swf/Jplayer.swf
In your JS file you import this by using .js.erb
$(document).ready(function(){
$("#jplayer").jPlayer({
swfPath: "<%= asset_path "Jplayer.swf" %>"
});
});
Since nobody has mentioned it here yet, you can also do it like this in your jplayer initialization code:
Works with Rails >= 3.2 that uses the asset pipeline!
swfPath: "<%= escape_javascript(asset_path('jplayer/Jplayer.swf')) %>",
solution: "flash,html",
supplied: "rtmpa,mp3",
And remember the file has a capital J :-)
Related
I'm trying to get vue2-dropzone (version 3.0.3) to cooperate nicely with my Rails 5.1.4 app. I've added Dropzone to to my form and loaded the module but somehow I am not able to see the default styles. I don't think this is a problem with vue2-dropzone as much as with how webpacker loads the css.
My current setup:
application.js
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.css'
const myForm = new Vue({
el: '#multistep-form',
components: {
vueDropzone: vue2Dropzone
},
data: function () {
return {
dropzoneOptions: {
url: 'https://httpbin.org/post',
thumbnailWidth: 150,
maxFilesize: 5,
dictDefaultMessage: "<i class='fa fa-cloud-upload'></i> Drop files here to upload",
headers: { "My-Awesome-Header": "header value" }
}
}
}
and my _form.html.erb partial:
<vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions">
</vue-dropzone>
I see that the Dropzone form is loaded. However, I cannot see the default style. I see the following in the console when I run :
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--1-2!node_modules/postcss-loader/lib/index.js??ref--1-3!node_modules/vue2-dropzone/dist/vue2Dropzone.css:
[0] ./node_modules/css-loader?{"minimize":false,"sourceMap":true,"importLoaders":2}!./node_modules/postcss-loader/lib?{"sourceMap":true,"config":{"path":"/Users/myuser/Documents/apps/myapp/.postcssrc.yml"}}!./node_modules/vue2-dropzone/dist/vue2Dropzone.css 30.5 kB {0} [built]
I don't think it's an error since it says webpack: Compiled successfully. but I do think that webpack isn't loading vue2Dropzone.css for some reason. How should I configure webpacker to load that css file?
If I put the css file manually into my app/assets/stylesheets/ then it works without a problem.
Thanks in advance!
I think your CSS file should be loaded in CSS and not in js.
Here's how I'm doing it in my project.
Create application.css in packs folder and import into the Rails layout file, application.html.erb
<%= javascript_pack_tag 'application' %>
#import 'vue2-dropzone/dist/vue2Dropzone.css'
If you do this though, you will get an error because #import is a sass syntax. So you will need to do some extra webpack config.
You will find this post useful if you want to use css inside the application.js file.
https://medium.com/#mayorsan/rails-angular-webpacker-gem-like-a-pro-7cf40a588ab9
I have .swf files under vendor/assets/images/swf/. I need the asset path of that folder.
But this (.js.coffee.erb)
#= soundmanager2
$ ->
soundManager.setup
url: '<%= asset_path "swf/" %>'
is rendering this (.js):
(function() {
var $ = jQuery;
$(function() {
return soundManager.setup({
url: '/swf/'
});
});
}).call(this);
I am using rails 4.0.0.rc1. I am on development mode. The path /assets/swf/soundmanager2.swf returns 200, while /swf/soundmanager2.swf returns 404. The helper image_path returns /images/swf/, but /images/swf/soundmanager2.swf also returns 404.
It is not worth the trouble, because you would have to disable digest to get the name of the files right. So the solution is to fix the library. In the case of Sound Manager 2, I did this:
Some CoffeeScript that I require:
#= require soundmanager2
jQuery ->
soundManager.swfNames =
"/soundmanager2.swf": "<%= asset_path('swf/soundmanager2.swf') %>"
"/soundmanager2_debug.swf": "<%= asset_path('swf/soundmanager2_debug.swf') %>"
"/soundmanager2_flash9.swf": "<%= asset_path('swf/soundmanager2_flash9.swf') %>"
"/soundmanager2_flash9_debug.swf": "<%= asset_path('swf/soundmanager2_flash9_debug.swf') %>"
soundManager.setup
debugMode: <% if Rails.env.development? %>true<% else %>false<% end %>
url: '/'
In my copy of soundmanager2.js (V2.97a.20130512), inside the definition of normalizeMovieURL:
url = ... // After url is set
url = sm2.swfNames[url]; // Workaround
on rails 4 all the asset helpers (image_path, asset_path and the likes) appear to only return a config.assets.prefix-prefixed path if the asset you're accessing is actually resolvable by sprockets.
put simply: it must exist in you asset path on the disk after precompilation.
therefore, asset_path('swf/') will not work since it is a directory and not a file.
also, i experienced the following: rails < 4 (sprockets, rather) copied original images (and thus swf files) and created a digested version of that same file. because of this soundmanager was still able to find the non-digested swf files even though i have config.assets.digest = true.
with rails 4, these original images are not copied anymore because they changed some precompile internals which leads soundmanager to throw up if it wants to fallback to flash.
to properly fix this soundmanager needs to be patched, like michelpm proposes.
for soundmanager-rails i started working on a fix including a proper patch for soundmanager which you can find over on github.
So I've been using yeoman.io for my projects and I have a set folder structure for my images. But when I build it changes the file name of my files.
I even use:
$ yeoman build:text
because I want to only minify my css,js and html templates, yet it still minifies the images.
Not sure if im doing something wrong.
EDIT:
I commented out all instances of img in the gruntfile and that seemed to work, but I dont think thats the right way.
You mean image optimization or revisioning? There is no problem to configure GruntFile.js to your own needs. It makes Yeoman/Grunt very powerful, because it is highly adaptable.
If you don't want image optimization, remove the configuration in the img task.
// Optimizes JPGs and PNGs (with jpegtran & optipng)
img: {
},
If you dont want the renaming of image files, remove the img line from the rev task:
// renames JS/CSS to prepend a hash of their contents for easier
// versioning
rev: {
js: 'scripts/**/*.js',
css: 'styles/**/*.css'
},
If you remove the image revving it will bust your cache, you should try to keep the revving and update your JS files instead.
Try updating your usemin block to something like this:
usemin: {
html: ['<%= yeoman.dist %>/{,*/}*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
js: '<%= yeoman.dist %>/scripts/{,*/}*.js',
options: {
assetsDirs: [
'<%= yeoman.dist %>',
'<%= yeoman.dist %>/images',
'<%= yeoman.dist %>/styles'
],
patterns: {
js: [
[/(images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images']
]
}
}
}
You should already have the usemin method, just add the js attribute with you js path regex and add the pattern attribute.
This will replace all occurrences of the image in your JS files with the new revved version, so that the clients' browsers don't use a cached image instead of a new one.
I'm trying to use jPlayer to play an mp3. I have the jPlayer CSS and images working, now it's just a matter of playing the mp3. To do so, I include the following javascript in the application.html.erb layout's head:
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "media/sound.mp3",
// m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
// oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
});
},
swfPath: "/javascripts",
supplied: "mp3, m4a, oga"
});
});
When I load the page and click the play button, I get the following routing error:
ActionController::RoutingError (No route matches [GET] "/calls/media/sound.mp3")
Would someone mind taking a spare minute to explain to me why this is? Should I be including the javascript in something like this?
<%= javascript_tag 'some js code' %>
Any assistance is very much appreciated. Thanks in advance.
I realized I was I was missing a starting / i.e. changed "media/sound.mp3" to "/media/sound.mp3".
Then, I decided to use a path helper
I'm struggling with the asset pipeline. I'm loading dojo from Google CDN putting this in my template:
= javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js', :'data-dojo-config' => %Q(dojoBlankHtmlUrl:'/blank.html', baseUrl: 'assets/', modulePaths: {custom: 'javascripts/modules'})
I just want a fallback to a local version if running locally or if the CDN is down. I thought of doing this:
script typeof(dojo) === "undefined" && document.write(unescape('%3Cscript src="js/libs/dojo-1.6.1.min.js"%3E%3C/script%3E'));
But I don't like it as it works out of the asset pipeline. I want to keep dojo in vendors/assets/javascripts/dojo. How can I get the fallback to be served by the asset pipeline.
Is there a way do declare conditional require in the asset pipeline. What I want is to run some javascript tests, and depending on the result serve a file.
Thanks
I suggest you use yepnope, a lightweight library for loading libraries like this in parallel (for speed) and it gives you the option to run some other code to test if the library is loaded. For example:
yepnope([{
load: 'http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js',
complete: function () {
if (!window.jQuery) {
yepnope('asset_path('you_local_copy_of_dojo') ');
}
}
}])
(Note: You will need erb tags around the asset_path helper)
The local dojo file would be in the assets/javascript folder, but not included in the application manifest. You need to add the dojo file to the precompile array:
config.assets.precompile += 'your_local_file.js'
And this will make it available to the asset_path helper.
Thanks Richard!
I don't want to have yepnope to load one library. It would be overkill imo. Here is the solution I came up with, based on your help (written in slim):
1/ In vendors/assets/javascripts/, I have my dojo.js.
2/ In config/application.rb:
# Precompile these assets files
config.assets.precompile += ['dojo.js']
3/ In the template:
= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/dojo/#{Settings.dojoVersion}/dojo/dojo.xd.js", :'data-dojo-config' => %Q(dojoBlankHtmlUrl:'/blank.html', baseUrl: 'assets/', modulePaths: {custom: 'javascripts/modules'})
script = "typeof(dojo) === \"undefined\" && document.write(unescape('%3Cscript src=\"#{asset_path('dojo')}\"%3E%3C/script%3E'));".html_safe
I also posted on the Rails Google Group to request the addition of two options to the javascript_include_tag, :test and :local that would take care of all the work. We'll see.