I'am try to convert my code bellow into Reactjs. I use this code bellow to embed THEOplayer to my website, as long as i know we can use "ref" to replace the document.querySelector('.classname') instead to target particular DOM to change or modifiying it but i'm still confused and getting error, what is the best practice to change my code bellow.
var playerConfig = {
"libraryLocation": "//cdn.theoplayer.com/dash/theoplayer/",
ui: {
fluid: true
},
};
var element = document.querySelector('.video-container');
var player = new THEOplayer.Player(element, playerConfig);
player.source = {
sources : [{
src : '//cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8', // sets HLS source // //cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/index.m3u8
type : 'application/x-mpegurl' // sets type to HLS
}],
textTracks : [{
default: true, //optional
kind : 'subtitles',
src : 'example.srt',
srclang : 'en'
}]
};
player.addEventListener('sourcechange', function() {
player.removeEventListener('playing', firstplay);
player.addEventListener('playing', firstplay);
});
You could simple write a react component and add your custom event listeners in componentDidMount method
const playerConfig = {
"libraryLocation": "//cdn.theoplayer.com/dash/theoplayer/",
ui: {
fluid: true
},
};
class App extends React.Component {
componentDidMount() {
const player = this.player;
player.addEventListener('sourcechange',() => {
player.removeEventListener('playing', this.firstplay);
player.addEventListener('playing', this.firstplay);
});
this.playerSrc = new THEOplayer.Player(player, playerConfig);
this.playerSrc.source = {
sources : [{
src : '//cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8', // sets HLS source // //cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/index.m3u8
type : 'application/x-mpegurl' // sets type to HLS
}],
textTracks : [{
default: true, //optional
kind : 'subtitles',
src : 'example.srt',
srclang : 'en'
}]
};
}
render() {
return <div className={video-container} ref={(ref) => this.player = ref}/>
}
}
Related
I have a custom SAPUI5 application that used SAPUI5 version 1.40.11.
Since this version has been removed from CDN recently, I had to use a long-term maintenance available compatible version for the app. It is - version - 1.38.55.
I'm having an issue with MessagePopoverItem as the subtitle property is not available for this version.
So I'm trying to customize the template of the MessagePopoverItem to display the subtitle field.
While I'm trying to do this via a custom control I received the following error as it looks for a renderer.js from CDN without looking at it from the local location.
Cannot load from
https://sapui5.hana.ondemand.com/1.38.55/resources/sap/m/MessagePopoverItemRenderer.js
This is my custom controller and it's renderer.js
And I followed the below link
TooltipBaseRenderer.js: 404 - NOT FOUND
sap.ui.define([
"sap/m/MessagePopoverItem",
"./CustomMessagePopupItemRender",
], function (MessagePopoverItem,CustomMessagePopupItemRender) {
"use strict";
return MessagePopoverItem.extend("demoapp.customControls.CustomMessagePopoverItem", {
renderer:CustomMessagePopupItemRender,
metadata : {
properties: {
subtitle: {
type: "string",
defaultValue: ""
}
}
},
onAfterRendering: function() {
if(MessagePopoverItem.prototype.onAfterRendering) {
MessagePopoverItem.prototype.onAfterRendering.apply(this, arguments);
}
//...check if there is a highlight and tooltip
if(this.getTitle() !== "") {
sapMLIBContent
var oHl = this.$().find(".sapMLIBContent");
var ss = oHl;
}
}
});
});
Renderer.js
sap.ui.define([
"sap/ui/core/Renderer",
], function(Renderer) {
"use strict";
return Renderer.extend("demoapp.customControls.CustomMessagePopupItemRender", {
apiVersion: 2,
render: function(renderManager, control) {
// Issue: render function is called twice.
// See: https://github.com/SAP/openui5/issues/3169
// Update: fixed since 1.88
const child = control.getAggregation("content");
if (child && child.isA("sap.ui.core.Control")) {
renderManager.openStart("div", control)
.accessibilityState(control, { role: "tooltip" })
.style("max-width", "95vw")
.style("width", control.getWidth())
.openEnd()
.renderControl(child)
.close("div");
} else {
renderManager.openStart("span", control)
.accessibilityState(control, { role: "tooltip" })
.style("max-width", "90vw")
.style("width", control.getWidth())
.style("padding", "0.5rem")
.class("sapThemeBaseBG-asBackgroundColor")
.openEnd()
.text(control.getText())
.close("span");
}
},
});
});
Is this possible to customize the item template of the MessagePopover?
TooltipBaseRenderer.js: 404 - NOT FOUND is a completely different issue than the issue in this question. The element sap.m.MessagePopoverItem which extends sap.ui.core.Item, is not a sap.ui.core.Control but an sap.ui.core.Element. It is not supposed to have a renderer by definition.
sap.ui.core.TooltipBase, on the other hand, is a sap.ui.core.Control. It's a different issue.
Instead, you'll have to:
Extend sap.m.MessagePopoverItem by the subTitle property but without a renderer since it's not a control.
Extend the control that actually renders items using the information from your extended MessagePopoverItem element.
I have managed to extend the sap.m.MessagePopoverItem as mentioned by #Boghyon Hoffmann.
Here's the answer
CustomMessagePopoverItem.js
sap.ui.define([
"sap/m/MessagePopoverItem",
], function (MessagePopoverItem) {
"use strict";
return MessagePopoverItem.extend("demoapp.customControls.CustomMessagePopoverItem", {
metadata : {
properties: {
subtitle: {
type: "string",
defaultValue: ""
}
}
}
});
});
CustomMessagePopover.js
sap.ui.define([
"sap/m/MessagePopover",
"sap/m/StandardListItem",
"sap/ui/core/IconPool",
"./CustomMessagePopoverItem"
], function (MessagePopover,StandardListItem,IconPool,CustomMessagePopoverItem) {
"use strict";
var MessagePopover = MessagePopover.extend("demoapp.customControls.CustomMessagePopover", {
metadata : {
aggregations: {
/**
* A list with message items
*/
items: {type: "demoapp.customControls.CustomMessagePopoverItem", multiple: true, singularName: "item"},
},
},
//Override following method to add the subtitle as the description of the Standard List Item
_mapItemToListItem :function (oMessagePopoverItem) {
if (!oMessagePopoverItem) {
return null;
}
var sType = oMessagePopoverItem.getType(),
oListItem = new StandardListItem({
title: oMessagePopoverItem.getTitle(),
icon: this._mapIcon(sType),
description :oMessagePopoverItem.getSubtitle(),
type: sap.m.ListType.Navigation
}).addStyleClass(CSS_CLASS + "Item").addStyleClass(CSS_CLASS + "Item" + sType);
oListItem._oMessagePopoverItem = oMessagePopoverItem;
return oListItem;
}
});
var CSS_CLASS = "sapMMsgPopover",
ICONS = {
back: IconPool.getIconURI("nav-back"),
close: IconPool.getIconURI("decline"),
information: IconPool.getIconURI("message-information"),
warning: IconPool.getIconURI("message-warning"),
error: IconPool.getIconURI("message-error"),
success: IconPool.getIconURI("message-success")
},
LIST_TYPES = ["all", "error", "warning", "success", "information"],
// Property names array
ASYNC_HANDLER_NAMES = ["asyncDescriptionHandler", "asyncURLHandler"],
// Private class variable used for static method below that sets default async handlers
DEFAULT_ASYNC_HANDLERS = {
asyncDescriptionHandler: function (config) {
var sLongTextUrl = config.item.getLongtextUrl();
if (sLongTextUrl) {
jQuery.ajax({
type: "GET",
url: sLongTextUrl,
success: function (data) {
config.item.setDescription(data);
config.promise.resolve();
},
error: function() {
var sError = "A request has failed for long text data. URL: " + sLongTextUrl;
jQuery.sap.log.error(sError);
config.promise.reject(sError);
}
});
}
}
};
});
Here I invoke the custom control from the controller
var oMessageTemplate = new demoapp.customControls.CustomMessagePopoverItem({
type: '{TYPE}',
title: 'My Title',
description: '{DESC}',
subtitle: '{DESC}'
});
var oMessagePopover2 = new demoapp.customControls.CustomMessagePopover({
items: {
path: '/Messages',
template: oMessageTemplate
}
});
Is there a way to disable the default title block in the Gutenberg editor with JavaScript? Couldn't find anything in the official API.
Something like a property in the settings object that you pass when setting up the Gutenberg.
Currently, I do like so (with the title):
const window = this.iframe.contentWindow // this.iframe is a React ref
const wpData = window.wp ? window.wp.data : false
if (!wpData) {
return
}
const newPost = Object.assign({ content: { raw: '', rendered: '' } }, window._wpGutenbergDefaultPost)
const editorSettings = {
alignWide: false,
availableTemplates: [],
blockTypes: true,
disableCustomColors: false,
disablePostFormats: false,
titlePlaceholder: '',
bodyPlaceholder: 'Add content here'
}
const editor = wpData.dispatch('core/editor')
editor.setupEditor(newPost, editorSettings)
i have a control as below
i need to fire the event closed when i click on the close icon press
sap.ui.define(["sap/ui/core/Control",
"sap/m/Carousel",
"sap/m/Panel",
"sap/m/Toolbar",
"sap/ui/core/Icon",
"sap/m/Label",
"sap/m/Button",
"sap/m/ToolbarSpacer"], function (Control,Carousel,Panel,Toolbar,Icon,Label,Button,ToolbarSpacer) {
"use strict";
return Control.extend("com.example.Control", {
metadata : {
aggregations : {
_panel : {
type : "sap.m.Panel",
multiple: false,
visibility:'hiddden'
}
},
events : {
closed : {
}
}
},
renderer : function (oRM, oControl) {
oRM.write("<div");
oRM.writeControlData(oControl);
oRM.addClass("sapUiSizeCompact");
oRM.writeClasses();
oRM.write(">");
oRM.renderControl(oControl.getAggregation("_panel"));
oRM.write("</div>");
},
init : function () {
var that = this;
var _carousel = new Carousel({
pages : [new Label({
text : "Test"
}),
new Label({
text : "Test"
})]
});
var _closeIcon = new Icon({
src : "sap-icon://decline",
press :jQuery.proxy(this.onCloseInfoWindow,this)
});
var _toolBar = new Toolbar({
content : [
new Label({
text :"Information"
}),
new ToolbarSpacer(),
_closeIcon,
]
});
var _panel = new Panel({
headerToolbar : _toolBar
});
_panel.addContent(_carousel);
this.setAggregation('_panel',_panel);
},
onCloseInfoWindow : function(oEvent){
}
});
});
The onCloseInfoWindow is not triggering the press event when click on close icon
do i need to do some add the icon also as aggregation and need to render?
Do you want to fire the closed event that you have created in your custom control ?
Use the below code for calling the closed event from your custom control:
onCloseInfoWindow : function(oEvent){
//console.log('Called');
this.fireClosed(oEvent);
}
View XML: here, Control is my name for your control.
<c:Control closed='onClose'/>
Controller:
onClose:function(oEvent) {
console.log('Closed Called!');
}
Why are you using press :jQuery.proxy(this.onCloseInfoWindow,this) ? I've never used that jQuery.proxy in ui5.
For triggering the close function, you could do
var _closeIcon = new Icon({
src : "sap-icon://decline",
press : function(oEvent){
this.fireClosed(oEvent);
}.bind(this)
});
I am able to access the onclick properties function for the printButton property at the end of the block. Although I am unable to initiate the onclick functions under the exportButton property.I have the following code.
B.exporting = {
type : "image/png",
url : "http://export.highcharts.com/",
width : 800,
enableImages : false,
buttons : {
exportButton : {
symbol : "exportIcon",
x : -10,
symbolFill : "#A8BF77",
hoverSymbolFill : "#768F3E",
_titleKey : "exportButtonTitle",
menuItems : [{
textKey : "downloadPNG",
onclick : function() {
this.exportChart()
}
}, {
textKey : "downloadJPEG",
**onclick : function() {
this.exportChart({
type : "image/jpeg"
})**
}
}, {
textKey : "downloadPDF",
onclick : function() {
this.exportChart({
type : "application/pdf"
})
}
}, {
textKey : "downloadSVG",
onclick : function() {
this.exportChart({
type : "image/svg+xml"
})
}
}
}]
},
printButton : {
symbol : "printIcon",
x : -36,
symbolFill : "#B5C9DF",
hoverSymbolFill : "#779ABF",
_titleKey : "printButtonTitle",
onclick : function() {
this.print()
}
}
}
};
I am binding keyboard controls to the click events using the jquery plugin this is what I used to print. This Works!:
Mousetrap.bind('ctrl+s', function(e) { B.exporting.buttons.printButton.onclick(this.print());
});
This code is what I tried to access an individual onclick function under the exportButton property in the json above
Mousetrap.bind('*', function(e) {B.exporting.buttons.exportButton.menuItems[0].onclick;});
The result i get is the value but i want to run the function as the onclick property does.Does anyone know how to run a function under a json property?I Appreciate any help here thanks folks.
Mousetrap.bind('click', B.exporting.buttons.exportButton.menuItems[0].onclick);
Your ctrl-s binding also looks wrong, it should be:
Mousetrap.bind('ctrl+s', B.exporting.buttons.printButton.onclick);
The printButton.onclick function doesn't take an argument. Your binding calls this.print before calling the printButton.onclick function, and then the printButton.onclick function
does it again.
Creating a ajava script array in given format with carousel ?
Iam using carousel.js & carousel.css, its working fine with static data, but when im trying to put dynamic data its hot happening. Im not able to create the value array in given format.
<script>
var carousel2 = new widgets.Carousel( {
uuid : "carousel2",
widgetDir : "carousel/",
args : { "theme" : "gray", "scrollCarousel" : true, },
value : [
{
"image" : "images/banner/big_banner_01.jpg",
},
{
"image" : "images/banner/big_banner_02.jpg",
},
{
"image" : "images/banner/big_banner_03.jpg",
},
{
"image" : "images/banner/big_banner_04.jpg",
},
{
"image" : "images/banner/big_banner_05.jpg",
}
]
} );
</script>
I need to pass the value for "value" key dynamically. How can i form this dynamically .IM TRYING WITH THE BELOW ONE
<repeat index="index.value" ref="DATA">
<repeat ref="VAL">
<choose ref="LANGUAGE">
<when value="${lang}">hiii
<script>
val[index.value] = "{"+"'image' :" +${IMAGE}+"}";</script>
</when>
<otherwise/>
</choose>
</repeat>
</repeat>
This is not working.
<script>
var generateCaroseul = {
getData: function(){
//loop through html to create an object with the data.
var dataObj = null;
$('li').each(function(index) {
var imgUrl = $(this).attr("src");
dataObj.add("image", imgUrl);
});
return dataObj;
}
};
var carousel2 = new widgets.Carousel( {
uuid : "carousel2",
widgetDir : "carousel/",
args : { "theme" : "gray", "scrollCarousel" : true, },
value : generateCaroseul.getData()
} );
</script>