This question already has answers here:
JWPlayer - customize listbar to add a "download" link
(2 answers)
Closed 3 years ago.
so this is the sript for the player
jwplayer("flvplayer").setup({
file: "$direct_link",
flashplayer: "$c->{site_url}/player/$name.swf",
image: "$file->{video_img_url}",
duration:"$file->{vid_length}",
width: $file->{vid_width},
height: $file->{vid_height},
provider: 'http',
modes: [ { type: "flash", src: "$c->{site_url}/player/$name.swf" },{ type: "html5", config: {file:'$direct_link','provider':'http'} }, { type: "download" } ] });
I want to add a download link button, like player on this website, example >> http://www.mp4upload.com/a6hxfn9hdxuy
Can you guys help me?
Thanks before :D
This is easy to do - http://support.jwplayer.com/customer/portal/articles/1436999-example-adding-a-download-button
<script>
jwplayer().addButton(
//This portion is what designates the graphic used for the button
"/uploads/myButton.png",
//This portion determines the text that appears as a tooltip
"Download Video",
//This portion designates the functionality of the button itself
function() {
//With the below code, we're grabbing the file that's currently playing
window.location.href = jwplayer().getPlaylistItem()['file'];
},
//And finally, here we set the unique ID of the button itself.
"download"
);
</script>
I see this is for JW5. Here is a plugin you can use, save this file as download.js:
(function(jwplayer){
var template = function(player, div, config) {
var assets = {
download: "http://www.longtailvideo.com/sites/default/files/download.png"
}
var goDownload = function() {
var item = player.getPlaylistItem();
if(item['downloadlink']) {
document.location = item['downloadlink'];
} else if(config.link) {
document.location = config.link;
} else {
document.location = item.file;
}
};
function setup(evt) {
player.getPlugin("dock").setButton(
'downloadButton',
goDownload,
assets.download
);
};
player.onReady(setup);
this.resize = function(width, height) {};
};
jwplayer().registerPlugin('download', template);
})(jwplayer);
Related
I need some pointers how to migrate userElements from htmlarea_rte in TYPO3 7.6 to CKEditor in TYPO3 8.7.
Or to rephrase my question: how can I prepend links in CKEditor with custom html?
This how my userElements look like:
RTE.default {
contentCSS = EXT:mytheme/Resources/Public/Css/Rte.css
proc.allowTagsOutside := addToList(i,em)
proc.entryHTMLparser_db.tags.i >
proc.entryHTMLparser_db.tags.em >
showButtons := addToList(user)
proc.allowedClasses := addToList(envelope, phone, fax)
classesCharacter = envelope, phone, fax
userElements {
10 = Icons
10 {
1 = E-Mail
1.content (
<i class="envelope"></i>
)
2 = Telefon
2.content (
<i class="phone"></i>
)
3 = Fax
3.content (
<i class="fax"></i>
)
}
}
}
So your question is about how to add those styles (<i class="envelope"></i> etc.) to the CKeditor?
First of all, add your .yaml configuration file (see https://typo3worx.eu/2017/02/configure-ckeditor-in-typo3/)
then in the # Inline styles section you could add something like:
- { name: 'Envelope', element: 'i', attributes: { 'class': 'envelope' } }
See also here for reference: https://processwire.com/talk/topic/8342-adding-css-classes-to-ckeditor/
I've created a small CKEditor plugin to fit my needs:
'use strict';
(function () {
CKEDITOR.dtd.$removeEmpty.em = 0;
CKEDITOR.dtd.$removeEmpty.i = 0;
CKEDITOR.plugins.add('icon-envelope', {
icons: 'iconenvelope',
init: function (editor) {
editor.ui.addButton( 'IconEnvelope', {
label: 'Icon E-Mail',
toolbar: 'insert',
command: 'insertIconEnvelope'
});
editor.addCommand( 'insertIconEnvelope', {
exec: function (editor) {
var icon = editor.document.createElement('i');
icon.setAttribute('class', 'fa fa-envelope');
editor.insertElement(icon);
}
});
}
});
})();
The plugin needs this file structure to work:
icon-envelope
plugin.js
icons
iconenvelope.png
Integration in TYPO3 is done via this YAML:
editor:
externalPlugins:
icon-envelope: { resource: "EXT:mytheme/Resources/Public/CkEditorPlugins/icon-envelope/plugin.js" }
The complete code can be found here:
https://gist.github.com/peterkraume/95106c5b27615e06dcfcb01a62b2a30c
I have managed to get my snippets working with the basic autocompletion:
ace.define("ace/snippets/bosun",["require","exports","module"], function(require, exports, module) {
exports.snippets = [
/* Sections */
{
name: "alert definition",
tabTrigger: "alertdef",
content:
"alert ${1:alertname} {\n\
warn =\n\
}\n"
},
{
name: "template def",
tabTrigger: "templatedef",
content:
"template ${1:templatename} {\n\
subject =\n\
}\n"
},
/* Funcs */
{
name: "avg reduction function",
tabTrigger: "avg",
content: "avg(${1:seriesSet})"
}
]
exports.scope = "bosun";
});
In the documentation on snippets it says:
When triggering a snippet through a menu or command you can configure
it to use the text selected prior to inserting the snippet in the
resulting code.
But I'm not clear on how I would create menu to list the snippets? (Ideally a menu that has submenus for each category of snippets, but happy to crawl first...)
Perhaps someone has a better way. But from reading the code in https://github.com/ajaxorg/ace/blob/master/lib/ace/snippets.js I have come up with:
$scope.aceLoaded = function (_editor) {
editor = _editor;
$scope.editor = editor;
editor.$blockScrolling = Infinity;
editor.focus();
editor.getSession().setUseWrapMode(true);
$scope.snippetManager = ace.require("ace/snippets").snippetManager;
$scope.bosunSnippets = $scope.snippetManager.snippetNameMap["bosun"];
editor.on("blur", function () {
$scope.$apply(function () {
$scope.items = parseItems();
});
});
};
$scope.listSnippets = function() {
var snips = $scope.snippetManager.snippetNameMap["bosun"];
if (snips) {
return Object.keys(snips)
}
return {};
}
$scope.insertSnippet = function(snippetName) {
$scope.snippetManager.insertSnippetForSelection($scope.editor, $scope.snippetManager.snippetNameMap["bosun"][snippetName].content);
$scope.editor.focus();
$scope.editor.tabstopManager.tabNext()
}
Which seems to work, perhaps there is a better way.
I need to make a Firefox addon add a button to the address bar if the tab is in a certain domain.
I've managed to find the element navbar-icons for the current window and add a child, but that add the icon to all tabs for that window, instead of just the relevant tab. How can I do this?
EDIT:
Sorry i was on mobile and didn't include the code.
What i have so far:
var windowsUtils = require('sdk/window/utils');
var loadButton = function(doc, urlBtnClick) {
var urlBarIcons = doc.getElementById('urlbar-icons');
var btn = doc.createElement('toolbarbutton');
btn.setAttribute('id', 'button-icon');
btn.setAttribute('image', self.data.url('./images/icon16.png'));
btn.click(onButtonClick);
urlBarIcons.appendChild(btn);
return btn;
}
var onButtonClick = function(event) {
console.log('i was clicked');
}
whenever i call the above i add a icon/button to every tab instead of the current active one.
This is a hacky implementation just using the SDK's tabs and button apis:
let { ActionButton } = require("sdk/ui/button/action");
let tabs = require('sdk/tabs');
let soButton;
tabs.on('activate', (tab) => {
if (/^http[s]*\:\/\/stackoverflow.com/.test(tab.url)) {
soButton = ActionButton({
id: "so-button",
label: "This is StackOverflow!!",
icon: {
"16": "chrome://mozapps/skin/extensions/extensionGeneric.png",
"32": "chrome://mozapps/skin/extensions/extensionGeneric.png"
},
onClick: function(state) {
console.log("clicked");
}
});
} else {
if (soButton && typeof (soButton.destroy === 'Function')) {
soButton.destroy();
}
}
});
It feels klugey to create / destroy the button every time we switch tabs, but the user experience is exactly what you want. A similar and perhaps 'better supported' approach might be instead to just disable the button.
I have a image showing up in a Dialog in my QML app, and I want to be able to change that image later on using onClicked, which I pass by a function to check if the variable I want in the new source URL is one of them I want.
I've tried just by using Image.source = "NEWURL" which is a no go. Also the id of the component the image is in, and the dialog like: id.source = "neurl" - no go.
How do I do that?
EDIT: Added more code; both the function and then listitm used to click. The image is a web image, and I want to have the conncectedUser value (which is a user name) inside the url.
Here is all the related code:
// Check if users is really a user, and if; show skin
function checkCurrentUser(currentUser) {
console.debug('Debug: Check user "'+currentUser+'" if actually a user.')
if (currentUser == "Ingen online") {
currentUser = "Notch" // reset currentUser if pushed earlier
console.debug('Debug: It was not a real user. Showing '+currentUser+' instead')
Image.source = "http://blabla"+currentUser+"yesyes"
}
else {
console.debug('Debug: It was a real user.')
Image.source = "http://blabla"+currentUser+"yesyes"
}
return "http://blabla"+currentUser+"yesyes""
}
// the dialog I want to show with a image
Component {
id: userDialog
Dialog {
id: dialogueUser
title: i18n.tr("Image")
Image {
id: usersSkin
fillMode: Image.PreserveAspectFit
source: "URL"
sourceSize.height: 1200
}
Button {
text: i18n.tr("Close")
color: "red"
onClicked: PopupUtils.close(dialogueUser)
}
}
}
// and then the list containting each link, which on click should show the user image
ListView {
id: userList
width: parent.width
height: units.gu(5)
model: msmData
delegate: ListItem.Standard {
text: connectedUser
onClicked: {
console.debug('Debug: User clicked "'+connectedUser+'"')
checkCurrentUser(connectedUser)
PopupUtils.open(userDialog, userList)
}
}
header: ListItem.Header { text: i18n.tr("Connected Users") }
section.property: "type"
section.criteria: ViewSection.FullString
section.delegate: ListItem.Header { text: i18n.tr(section) }
}
I am not sure if I understood your question correctly, but I will give it a try:
Component
{
id: userDialog
Dialog
{
property int sourceState : 1
id: dialogueUser
title: i18n.tr("Image")
Image
{
id: usersSkin
fillMode: Image.PreserveAspectFit
source: 1 == sourceState ? "OLDURL" : "NEWURL"
sourceSize.height: 1200
}
Button
{
text: i18n.tr("Close")
color: "red"
onClicked:
{
PopupUtils.close(dialogueUser)
dialogueUser.sourceState = 0
}
}
}
}
What I finally did was to just reset the variable in the image URL, and then show the dialog. Working now.
I want to override the image plugin in CKeditor. When I right click on an image I want to open my own dialog. Can anyone point me in the right direction. I've done a basic plugin which I copied from the CKeditor site - How do I swap this to replace the image editor.
CKEDITOR.plugins.add('myplugin',
{
init: function (editor) {
editor.addCommand('mydialog', new CKEDITOR.dialogCommand('mydialog'));
if (editor.contextMenu) {
editor.addMenuGroup('mygroup', 10);
editor.addMenuItem('My Dialog',
{
label: 'Open dialog',
command: 'mydialog',
group: 'mygroup'
});
editor.contextMenu.addListener(function (element) {
return { 'My Dialog': CKEDITOR.TRISTATE_OFF };
});
}
CKEDITOR.dialog.add('mydialog', function (api) {
// CKEDITOR.dialog.definition
var dialogDefinition =
{
title: 'Sample dialog',
minWidth: 390,
minHeight: 130,
contents: [
{
id: 'tab1',
label: 'Label',
title: 'Title',
expand: true,
padding: 0,
elements:
[
{
type: 'html',
html: '<p>This is some sample HTML content.</p>'
},
{
type: 'textarea',
id: 'textareaId',
rows: 4,
cols: 40
}
]
}
],
buttons: [CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton],
onOk: function () {
// "this" is now a CKEDITOR.dialog object.
// Accessing dialog elements:
var textareaObj = this.getContentElement('tab1', 'textareaId');
alert("You have entered: " + textareaObj.getValue());
}
};
return dialogDefinition;
});
}
});
Hi the reason I wanted to do this was that we have our image editor control which for "usability" reasons we need to carry on using. It gets used in different bits of the site and two dialogs would confuse people. In summary what I did was
Remove the image plugin CKEDITOR.config.removePlugins = 'image, forms, div,flash,iframe,table';
Add extra plugins extraPlugins: 'tinsertimage,teditimage,teditlink,tinsertlink,teditimagelink' on creating the CKEditor
In the plugin run some JS which intercept the right click on the image
CKEDITOR.plugins.add('teditimage',
{
init: function (editor) {
editor.addCommand('tEditImage',
{
exec: function (editor) {
//This opens the custom editor
ZWSInlineEditor.openImageProperties(editor, false);
}
});
if (editor.addMenuItem) {
// A group menu is required
// order, as second parameter, is not required
editor.addMenuGroup('gImage');
// Create a manu item
editor.addMenuItem('gEditImageItem', {
label: 'Edit Image Properties',
command: 'tEditImage',
group: 'gImage'
});
}
if (editor.contextMenu) {
editor.contextMenu.addListener(function (element, selection) {
// Get elements parent, strong parent first
var parents = element.getParents("img");
// Check if it's strong
if (parents[0].getName() != "img")
return null; // No item
return { gEditImageItem: CKEDITOR.TRISTATE_ON };
});
}
}
});
I don't understand what's the point in what you're doing (or please explain us). Maybe you should rather customize dialogs than do things from scratch?