Develop Reference

How do I add a custom text button to the control bar of the VideoJS Player v.7?

I have tried various snippets of code that I've found online, but I can't get any of them to work with the current version of VideoJS, which is version 7. I'm very new to javascript programming, and the documentation does not give example code on how to implement this. There is a codepen here that can be used to experiment with customizing the player: https://codepen.io/heff/pen/EarCt This is the link to the VideoJS player documentation on adding a button to the player: https://docs.videojs.com/button
I've tried inserting code from various web page and 5-6 different discussions I found on StackExchange, but none of them make a button appear next to the video progress bar.
I'm simply trying to create a button with the text "Exit Course" that will appear to the right of the video progress bar, and that will execute a javascript function when pressed.
Could someone familiar with VideoJS please take a look at the codepen link above to see if they can add such a button to the player? Thank you!
I'm required to add some code to this question, so here is one piece of code that I tried on codepen:
var setup = {
'techOrder' : ['html5', 'flash'],
'controls' : true,
'preload' : 'auto',
'children':{
'controlBar': {
'children': {
'playbackSpeedPopoverMenu': {},
'selectBitrateControlButton': {src:videosrc},
'verticalVolumeMenuButton': {},
'volumeControl': false,
'muteToggle':false,
'liveDisplay':false,
}
}
};
var player = new vjs.Player(vjs.el("id_of_my_video_element_note_that_theres_no_poundsign"),
setup,
function() {
//this is your ready function
}));

I've tested this snippet with video.js 7.4.1 and it works fine. I used video.js's cancel icon instead of text to save space on the control bar. Give it a try:
<script>
var player = videojs('my-player');
var button = videojs.getComponent('Button');
var closeButton = videojs.extend(button, {
constructor: function() {
button.apply(this, arguments);
this.controlText("Exit Course");
this.addClass('vjs-icon-cancel');
},
handleClick: function() {
this.player().dispose();
}
});
videojs.registerComponent('closeButton', closeButton);
player.getChild('controlBar').addChild('closeButton', {});
</script>

var player = videojs('video');
var skipBehindButton = player.controlBar.addChild("button");
var skipBehindButtonDom = skipBehindButton.el();
skipBehindButtonDom.innerHTML = "30<<";
skipBehindButton.addClass("buttonClass");
skipBehindButtonDom.onclick = function(){
skipS3MV(-30);
}
var skipAheadButton = player.controlBar.addChild("button");
var skipAheadButtonDom = skipAheadButton.el();
skipAheadButtonDom.innerHTML = ">>30";
skipAheadButton.addClass("buttonClass");
skipAheadButtonDom.onclick = function(){
skipS3MV(30);
}
function skipS3MV(skipBy) {
player.currentTime(player.currentTime() + skipBy);
}
The reason I've used text ("30<<" and ">>30") is because in my player, the colors are all customizable. So if I used an icon image for skip-back and skip-forward, then I wouldn't be able to change the color of the icon every time someone customizes the player colors (which includes the all the text in the control bar).

Create a meta box which display image from the gallery in wordpress

I have a custom post type with multiple custom text fields (meta boxes), and I need to create a custom field like the box for the featured image. Meaning a field wich will be used to select an image from the media gallery and save it for display.
I don't have any custom fields wordpress plugins.
Is it possible ?

var frame;
$('.image-upload').on( 'click', function(e) {
e.preventDefault();
if (frame) {
frame = null;
}
frame = wp.media({
title: 'Frame title',
button: {
text: 'Frame button text'
},
multiple: false
});
frame.on( 'select', function() {
var attachment = frame.state().get('selection').first().toJSON();
var url = attachment.url;
var id = attachment.id;
});
frame.open();
});
Put this inside admin js file. Pretty self-explanatory.

How to destroy PDFJS object?

I need functionality for book library and for that I have used:
Turn.js, which is used for flipbook effect (only 3rd release working, 4th release not working with it, if someone have similar functionality with 4th release of turn.js, then please share your code).
pdf.js, which converts PDF to HTML on client side
This is a reference link, that I have followed.
I have modified one function for using that script dynamically, which adds PDF's path into that function and according to that link, books open in popup.
Here is the JavaScript function for that:
function display_book(path){
var url = path;
PDFJS.disableWorker = false;
PDFJS.getDocument(url).then(function(pdfDoc) {
numberOfPages = pdfDoc.numPages;
pdf = pdfDoc;
$('#book').turn.pages = numberOfPages;
$('#book').turn({acceleration: false,
pages: numberOfPages,
elevation: 50,
gradients: !$.isTouch,
// display: 'single',
when: {
turning: function(e, page, view) {
// Gets the range of pages that the book needs right now
var range = $(this).turn('range', page);
// Check if each page is within the book
for (page = range[0]; page<=range[1]; page++) {
addPage(page, $(this));
//renderPage(page);
};
},
turned: function(e, page) {
$('#page-number').val(page);
if (firstPagesRendered) {
var range = $(this).turn('range', page);
for (page = range[0]; page<=range[1]; page++) {
if (!rendered[page]) {
renderPage(page);
rendered[page] = true;
}
};
}
}
}
});
$("button.close").click(function(){
//code for destroy pdfjs object
$(".modal").css({"display":"none"});
});
});
}
on that popup close event, I want to destroy object of PDFJS (to release memory). In this code turn.js 3rd released version is used, and if I replace that version with 4th release then code doesn't work.

You just need to call destroyon the pdfDoc instance.
In your code sample, it looks like pdfDoc is assign to the global variable pdf. So, this should do what you want:
pdf.destroy();

Backbone.js Pinterest modal

i'm using backbone.js to build my frontend.
So what i want to do is, to render a view in a "lightbox" (the same way like pinterest).
I tried it that way:
var itemDetailsBoxView = CloseableView.extend({
el: '#itemwrapperItemBox #itemwrapperItem2',
initialize: function(options) {
var self = this;
self.render(options);
},
render: function(options) {
$('#itemwrapperItemBox').fadeIn(300);
var self = this;
app._itemDetailsView = new itemDetailsView({id: options.id, el: '#itemwrapperItemBox #itemwrapperItem2'});
self.rendered(app._itemDetailsView);
},
events: {
'keydown': 'keydownHandler'
},
keydownHandler: function(e) {
switch (e.which) {
// esc
case 27 :
$('#itemwrapperItemBox').hide();
break;
}
}
This view just opens another view (itemDetailsView) in a lightbox. This itemDetailsBoxView is opened when i click on an item:
itemDetails: function(events) {
var self = this;
var that = $(events.currentTarget).parents('.item');
var id = that.find('.covercontainer').find('img').data('id');
if (app._itemDetailsBox) {
app._itemDetailsBox.close();
}
app._itemDetailsBox = new itemDetailsBoxView({id: id});
self.rendered(app._itemDetailsBox);
app.navigate("/collage/" + id, false);
},
However, there are several problems with this approach:
When the itemWrapperItem2 appears (like a pin on Pinterest when you zoom in), there are two scrollbars. One for the itemStream in the background and one for the lightbox.
The itemDetailsView generates also an itemStream. When i click there on an item, it loads again in the itemDetailsBoxView and also pushes the url (Same functionality, when u have a pin open and click again on a pin). This means, that when i want to go back to the original itemStream, i have a problem because i don't know the URL.
There are more - but this is enough to see, that this approach doesn't work to good. So do you know a solution for backbone.js to copy the whole pinterest "zoom in on a pin" functionality (including, that you land on another page when you reload the pin).
This is my first post here - please be gentle if this post has to less description :)

Link add-on SDK panel to toolbar button

The add-on SDK attaches panels to widgets as seen here. I would like to achieve the same effect using the add-on SDK with a toolbar button instead.
The toolbar button I'm using is of the type menu-button, which means that the left side is an icon and has an oncommand listener. The right side is a drop-down arrow which shows its contents on click. Here's the code to create such a button with the add-on SDK:
const doc = require('sdk/window/utils').getMostRecentBrowserWindow().document;
var navBar = doc.getElementById('nav-bar')
var btn = doc.createElement('toolbarbutton');
btn.setAttribute('id', 'hylytit');
btn.setAttribute('type', 'menu-button');
btn.setAttribute('class', 'toolbarbutton-1');
btn.setAttribute('image', data.url('resources/hylyt_off.png'));
btn.setAttribute('orient', 'horizontal');
btn.setAttribute('label', 'Hylyt.it');
btn.addEventListener('command', function(event) {
if (event.button===0) btnClick();
console.log(TAG+'button clicked');
}, false);
var panel = doc.createElement('panel');
panel.setAttribute('id', 'search-panel');
panel.addEventListener('command', function(event) {
console.log(TAG+'dropdown clicked');
}, false);
var label = doc.createElement('label');
label.setAttribute('control', 'name');
label.setAttribute('value', 'Article List');
var textbox = doc.createElement('textbox');
textbox.setAttribute('id', 'name');
panel.appendChild(label);
panel.appendChild(textbox);
btn.appendChild(panel);
navBar.appendChild(btn);
The panel above is not an add-on SDK panel, it's a XUL panel and is severely limited in that it can't be styled with CSS. On top of this, the panel's onCommand listener never fires despite the fact that the btn's onCommand fires as expected. The XUL panel shows itself when I click the dropdown button (as long as it has children), but because I can't access its click handler, I can't just create an add-on SDK panel on click.
So my question is this. Is there a way to access the toolbar button's menu portion's click handler or is there a way to append an add-on SDK panel as a child of a toolbar button?

Thanks for pointing me in the direction of arrow panels. Is there a way to place an HTML file in one rather than having to dynamically create XUL elements? The effect I'm trying to achieve is similar to the Pocket extension, which does one thing when the button part is clicked and another when the arrow is clicked. – willlma 7 hours ago
You have 900+ rep, you should know better. It is common knowledge to create another question topic rather then ask how to do something different in a comment especially after solution acceptance.
Nonetheless, this is what you do to accomplish the Pocket toolbarbutton effect. Based on code supplied by contributor above.
Ask another question and I'll move this there and you can accept my solution there.
var doc = document;
var navBar = doc.getElementById('nav-bar')
var btn = doc.createElement('toolbarbutton');
btn.setAttribute('id', 'hylytit');
btn.setAttribute('type', 'menu-button');
btn.setAttribute('class', 'toolbarbutton-1');
btn.setAttribute('image', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMjgwMTE3NDA3MjA2ODExODcxRjlGMzUzNEZGQkNGQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxRUM5MTQ0MkJFNkUxMUUxOUM3NzgwMzc3MDc2Rjk1MCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxRUM5MTQ0MUJFNkUxMUUxOUM3NzgwMzc3MDc2Rjk1MCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDI4MDExNzQwNzIwNjgxMTg3MUZFQTk0QUU4RTMwMEYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDI4MDExNzQwNzIwNjgxMTg3MUY5RjM1MzRGRkJDRkIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5kJv/fAAAByUlEQVR42qRTPWvCYBC+mKiolFYURVSwfoCLkw4iGDM5WoO460/o4tKuHToV+gd0t5Ku4mQWJ8Fd/NhEpy6K3+ldakKsi+ALb3hzd89zd8+9L6MoCtyyOPpkMpl3m81WM5lMV4GOxyOsVqu3Xq/3qhIEg8Ga1+sFs9l8FcFut4P5fP6Cxz8CAvt8PmBZ9iqCw+Ggn9WaKTOB9/s9FAoF4Hn+LIjOZCMfxVGrWrWcFkRiWiwWiMfjIv6GOI77kGUZ1us15PN5SKVSz2ifttvtL2yBPRNRI1gsFiCK4pMkSVUE/GBrn5vN5i4ajVYxpFEsFuuRSIR1u91wQcAwDOAkwOl0VjBjCIFit9sdoOshl8sNsLp6IBCoOBwOME5LJSABqU8i8Pv91Kcwm83kdDrNk9/lcslYTYLi7HY7aBidIJvNTjqdziNpQBmIBDVIoFDT05TuPR6PCqbs2+0WBEGYqJWfbmKx2WxKo9FIDSAbtgDL5VLNQqRWq1Vtky4R6gDlcpnE/mYMV7nearUqw+FQJzEuDRyLxaBUKjXQVDVWoJNgFZV+vw/j8VgXi4DhcBiSySRl18H6+P5tAbekXC7p5DuLZ259jb8CDAAxmdyX9iaHkQAAAABJRU5ErkJggg==');
btn.setAttribute('orient', 'horizontal');
btn.setAttribute('label', 'Hylyt.it');
////
var toolbarbuttonPanel = doc.createElement('panel');
toolbarbuttonPanel.setAttribute('id', 'toolbarbutton-panel');
toolbarbuttonPanel.setAttribute('type', 'arrow');
var toolbarbuttonLabel = doc.createElement('label');
toolbarbuttonLabel.setAttribute('value', 'toolbarbutton panel');
toolbarbuttonPanel.appendChild(toolbarbuttonLabel);
////
////
var dropmarkerPanel = doc.createElement('panel');
dropmarkerPanel.setAttribute('id', 'dropmarker-panel');
dropmarkerPanel.setAttribute('type', 'arrow');
var dropmarkerLabel = doc.createElement('label');
dropmarkerLabel.setAttribute('value', 'dropmarker panel');
dropmarkerPanel.appendChild(dropmarkerLabel);
////
navBar.appendChild(btn);
var mainPopupSet = document.querySelector('#mainPopupSet');
mainPopupSet.appendChild(dropmarkerPanel);
mainPopupSet.appendChild(toolbarbuttonPanel);
btn.addEventListener('click',function(event) {
console.log('event.originalTarget',event.originalTarget);
if (event.originalTarget.nodeName == 'toolbarbutton') {
dropmarkerPanel.openPopup(btn);
} else if (event.originalTarget.nodeName == 'xul:toolbarbutton') {
toolbarbuttonPanel.openPopup(btn);
}
}, false);

Panels don't have an onCommand method see MDN - Panels Article
You can make your panel stylized, give it type arrow like panel.setAttribute('type', 'arrow') and then to attach to your button. I didn't give it type arrow below.
Heres the working code. Copy paste to scratchpad and set Environment > Browser then run it.
var doc = document; //to put this back in sdk do const doc = require('sdk/window/utils').getMostRecentBrowserWindow().document;
var navBar = doc.getElementById('nav-bar')
var btn = doc.createElement('toolbarbutton');
btn.setAttribute('id', 'hylytit');
btn.setAttribute('type', 'menu-button');
btn.setAttribute('class', 'toolbarbutton-1');
btn.setAttribute('image', ''); //i made this image blank because i dont have the image and im running from scratchpad
btn.setAttribute('orient', 'horizontal');
btn.setAttribute('label', 'Hylyt.it');
var panel = doc.createElement('panel');
btn.addEventListener('command', function(event) { //moved this below var panel = doc.createElement because panel needs to be crated before we write this function
//if (event.button===0) btnClick();
//console.log(TAG+'button clicked'); //what is TAG? its undefeined for me
panel.openPopup(btn);
}, false);
panel.setAttribute('id', 'search-panel');
/*
panel.addEventListener('command', function(event) {
console.log(TAG+'dropdown clicked'); //what is TAG? its undefeined for me
}, false);
*/
var label = doc.createElement('label');
label.setAttribute('control', 'name');
label.setAttribute('value', 'Article List');
var textbox = doc.createElement('textbox');
textbox.setAttribute('id', 'name');
panel.appendChild(label);
panel.appendChild(textbox);
btn.appendChild(panel);
navBar.appendChild(btn);

You can create a Toolbarbutton and Panel using the Addon SDK and some Jetpack modules. Try toolbarwidget-jplib and browser-action-jplib by Rob--W.
You can easy add a button to the toolbar and style the panel whatever you want with css / html:
var badge = require('browserAction').BrowserAction({
default_icon: 'images/icon19.png', // optional
default_title: 'Badge title', // optional; shown in tooltip
default_popup: 'popup.html' // optional
});