I am using plyr to play YouTube videos. I would like to hide the data-plyr-provider definition from the html file. It is always going to be YouTube.
Currently I am using this code
<div class="container">
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="somegoogleid"></div>
</div>
<script src='https://web.con/124141/users/plyr/plyr.min.js'></script>
<script>
const player = new Plyr('#player', {});
// Expose player so it can be used from the console
window.player = player;
</script>
What I want to hide is the code in the red box
I was thinking that I can modify plyr.min.js I am using and hardcode the string YouTube but when looking into the code I am not able to do so. I mean I cannot find the right place.
The only reference of data-plyr-provider in the .js I found is this line
attributes: { embed: { provider: "data-plyr-provider", id: "data-plyr-embed-id" } },
Can some one help? Where to modify the code or if there is any other way how to hide plyr.min.js
I'm not sure i really need to write this down here but there is no offical way to pass an attributes directly into Plyr constructor.
So what you can you fork it your own then change the lines like following:
on plyr.js inside src/js/plyr.js
close the lines: #201, #205
and add:
this.provider = 'youtube'; // on line #202
In this way you can create Plyr's from "div" source.
iframe is gonna stay as it is. If you provide iframe it's gonna work as it is.
After all:
npm run build
Create your own build and then use the plyr.min.js from your dist folder with following:
<div id="player" data-plyr-id="https://www.youtube.com/watch?v=SF0w2B6DNUE"></div>
const player = new Plyr('#player');
// Expose player so it can be used from the console
window.player = player;
There you go. An un-offical way to create a plyr specs to youtube online with div creator =)
Update #1:
Just before changes, please checkout to last production build. It may gets broken when you just do it on master branch =)
Update #2:
So since you told me that you don't know how to do it, I'll try to explain.
So first thing first, please go visit https://github.com/sampotts/plyr
Copy the link from image:
After this;
Open a terminal and your code path.
type git clone https://github.com/sampotts/plyr.git
Wait until it's finish and type cd plyr
Install dependencies with npm i
open the current directory with some IDE (can be vscode, sublime or whatever you use for coding.) (code . will open it with VSCode)
After that open the file from the next picture:
Go to line #202 and you wil see following:
On here if you look up you will see this part of code is actually for type div anyway. As you can see there you get the provider from the line #201:
this.provider = this.media.getAttribute(this.config.attributes.embed.provider)
So comment this line(#201) out and add the following to line #202
this.provider = 'youtube';
And also don't forget to comment line #204 which gives us to end result of:
After these changes, (I believe you have node installed)
Save the changes you have made.
Open the terminal again.
checkout the last production build with git checkout v3.6.2
add changes to git via git add .
create a commit with git commit -m "provider set to youtube only"
then build the code with npm run build
After these steps, you will have the builded code from your js and css files from dist folder.
Please Backup your js files before doing following:
Copy the required files from dist/ folder to your server. (plyr.min.js and plyr.css)
After everyting you have done,
You should be able to use everything from top.
I hope you could finally use it =)
Update #3:
Lets also add the dirty way of doing it from #Steve
#Radek, if you go this route, you should go through all the steps if you have time, but if you're looking for something quick and dirty, you can search plyr.min.js for
this.provider=this.media.getAttribute(this.config.attributes.embed.provider),this.media.removeAttribute(this.config.attributes.embed.provider)
and replacing it with
this.provider='youtube'
Related
I was given the task to develop sliders/pop-ups for customers of the company I work for. This works a bit like chatbots (ie. Intercom). The user sees a small bubble on the bottom-right corner, clicks on it and it shows some information from our (Rails) app.
What's the best way to create a javascript code to share with those clients? Should I add my code to a public js file and send those clients a script targeting my app? (like the example below?)
<script src='https://www.myapp.com/script.js'></script>
I've tried to do so, but it looks like the script doesn't link to my CSS files, so styles are broken. So I am not sure if it's the best way to go.
You're using the right approach.
To fix your missing CSS you could adjust your script to add the required CSS references to the head of the page.
let externalCssLink = document.createElement('link')
externalCssLink.rel = 'stylesheet'
externalCssLink.href = 'https://some-external-domain.com/some-css.css'
document.head.appendChild(externalCssLink)
Is there way, in Atom, to open files that are mentioned in comments?
When I edit a code file, there are often other code files of interest that I may want to also open while working on that file. Sometimes these reference files are miles away and require numerous steps of navigation to open them via the left-pane tree structure.
I was thinking, it would be nice if I could put relative file paths into javascript comments in a manner that atom would understand that if I click that path it should open that file in a new tab.
I suspect this isn't an original idea, so I'm hoping someone can direct me to a solution that enables this type of functionality or make me aware of how it is already enabled but I must use some syntax I'm not currently using.
I found open-project-file and it seems like a nice fit.
Update: I tested it and it works great! You just click on the relative path (whether it is located in code or comment) and by hitting ctrl-shift-o it immediately opens the file in a new tab within the atom editor.
Since one week I'm looking for a solution to add a folder with a specific icon to the favorites sidebar (like Dropbox does it)
Is there any solution to do this with Electron or Objective C?
What I've found so far:
drag & drop it by yourself
fileicon
Programmatically add a folder to "Places" in Finder (don't know if I can extend electron)
Ok I've found this solution:
On macOS you can find this Folder
~/Library/Application Support/com.apple.sharedfilelist/
It contents some *.sfl files. You can edit them with this tool /usr/bin/sfltool. (It's installed on your mac >= 10.11 El Capitan automatically)
Example to add a folder to your favorites:
/usr/bin/sfltool add-item com.apple.LSSharedFileList.FavoriteItems file:///YOURPATH
I can run this command via require('child_process').exec in my electron app and add a folder icon with the fileicon module. (https://www.npmjs.com/package/fileicon)
This is a little bit dirty, but I don't know an other solution.
[UPDATE]: Read first comment
You can edit the sidebar on Mac using the com.apple.sidebarlists.plist preference file. The items will be in the favoriteitems dictionary.
The items you see are all set to being AlwaysVisible. You need to edit that file to add your own file.
I will give some links that might help you.
About the com.apple.sidebarlists.plist file,
http://www.thexlab.com/faqs/finder.html
Finding the com.apple.finder.plist,
https://discussions.apple.com/thread/4122582
Another post,
https://apple.stackexchange.com/questions/139305/how-can-i-add-new-folders-to-the-favorites-in-the-finder-sidebar
I'm working through Django By Example and in one chapter a jQuery bookmarklet is built within a Django app so that a user can easily save jpg images from a website into their user profile area within the Django app.
The tutorial does give exact instructions on what to do which I have followed and although I have managed to get the bookmarklet button to appear in my bookmarks bar in Chrome, nothing happens when I click it when browsing a webpage with jpg images.
This is my local Django dashboard where the bookmarklet button is added to the bookmarks bar and this part works fine
and this is how it must look like when clicked on the bookmarklet, this is the part where nothing happens for me when I clicked on bookmarklet.
(how to solve this?)
These are the relevant js files
https://github.com/davejonesbkk/bookmarks/blob/master/images/templates/bookmarklet_launcher.js
https://github.com/davejonesbkk/bookmarks/blob/master/images/static/js/bookmarklet.js
I believe the JavaScript launcher is unable to load the JavaScript files or the JS launcher itself is not getting loaded.
The JavaScript launcher is getting called through a Django template tag "include" inside the anchor tag.
this is the link:
https://github.com/davejonesbkk/bookmarks/blob/master/account/templates/account/dashboard.html
I tried debugging it through CTRL+SHIFT+I console where trouble showed that "include" tag not working properly.
Your include tag is split over two lines:
images from other websites → <a href="javascript:{% include
"bookmarklet_launcher.js" %}" class="button">Bookmark it</a><p>
Django does not support multiple line tags. Change it to:
images from other websites → Bookmark it<p>
I have faced the similar error while going through the book.
The bookmark button is not functioning,when i debugged it through chrome debugger,i could able to see errors at js level.I have made two changes to resolve these errors.
1.Error message: net::ERR_ABORTED
Action step:
In the book its mentioned that to place bookmarklet.js in images application directory,but in bookmarklet_launcher.js the source is refered to below path
http://127.0.0.1:8000/static/js/bookmarklet.js?r=
So place bookmarklet.js in /static/js/ directory inside images application(if folder structure not available create it).
2.Error message: net::ERR_ABORTED
There is one more file that should be placed which is bookmarklet.css which is being refereed at below line in bookmarklet.js.
href: static_url + 'css/bookmarklet.css?r=' + Math.floor(Math.random()*99999999999999999999)
Action step:
create a file bookmarklet.css inside /static/css/ directory and place the css code.Refer below link for css code:
Git Hub link for css code reference
1.After the above steps,restart the development server.
2.Drag the bookmark it button to create a bookmark in browser.
3.Open any website that is HTTP(not https) and click on bookmark it(The one which is bookmarked in browser not bookmark it button).
4.The below pop up appears
the problem is that template doesn't exist so try t do the following
**
1. make sure your include code in same line
2. make sure same name of the template exist on your project director /images/templates/file_name.js.
3. or go to setting and add your templates directory to templates.
4. if it load but no images views don't forget that you only accept jpeg and jpg images only
** so you can try another sites like wikipedia **
I was able to solve this by making sure that the url from ngrok tunnel in the bookmarklet.js and bookmarklet_luncher.js starts with https not http
Instead of this http://127.0.0.1:8000/static/js/bookmarklet.js?r= it should rather be
https://127.0.0.1:8000/static/js/bookmarklet.js?r=
After 4 hours of doing everything... googling, deleting code, and rewriting code...
Only had to hit Ctrl+C to stop server and re-run server .
Just take a break and come back to fix it :)
Mine works same as instructed in the book – no changes, no nothing.
Only restarted the server.
After moving to Wordpress the images of weather cannot be retrieved even though the JavaScript code runs fine. Here is the code that I am using to retrieve images in custom.js. The code:
$('#weather').openWeather({
city: 'New York, US',
placeTarget: '.weather-place',
iconTarget: '.weather-icon',
customIcons: 'files/img/icons/weather/'
});
There is something wrong with
'files/img/icons/weather/'
Well firstly when using html the javascript was in files/js/custom.js and the images were in files/img/weather/ it worked but now with wordpress it does'nt work
Your help would be appreciated.
The files folder is in the root directory.
If your files directory branches off the root, then try adding a slash before the word "files", like so: customIcons: '/files/img/icons/weather/'
Else, you may need to provide the entire path http://www.mydomain.com/files/...
ALSO, you're not providing a file name /files/img/icons/weather/icon.jpg
If you moved to wordpress, the paths might have changed. Where do you keep your javscript library?
I would use the debug console from your browser to see what happens and which icons your script is trying to get and then modify the path. (press F12 and click on the "network" tab, reload the page and check for 404 errors)