I have built a custom video player component in React using video js. I am trying to implement a context menu using videojs-contextmenu and videojs-contextmenu-ui. However when I try to initialize the plugin, I get the following error.
Message: Uncaught TypeError: this.playerInstance.contextmenuUI is not a function - URL: webpack-internal:///375 - Line: 116 - Column: 27 - Error object: {}
Since I have customised the components, how do I initialize the plugin. I have imported videojs and only after that have I imported videojs-contextmenu and videojs-contextmenu-ui.
import videojs from 'video.js';
import SmartModeToggleMenuButton from './SmartModeToggleMenuButton';
import 'videojs-contextmenu';
import 'videojs-contextmenu-ui';
const Player = videojs.getComponent('Player');
videojs.registerComponent('smartModeToggleMenuButton', SmartModeToggleMenuButton);
class SmartModePlayer extends Player {
constructor(tag, options,ready) {
super(tag,options, ready);
//some custom code
}
}
videojs.registerComponent('SmartModePlayer', SmartModePlayer);
export default SmartModePlayer;
Then, elsewhere I use the SmartModepLayer as follows:
this.playerInstance = new SmartModePlayer(this.kaalRecordingPlayer, options , function () {});
this.playerInstance.contextmenuUI();
How do I correctly use videojs-conetxtmenu-ui plugin when using in a custom component as above.
I had to specifically call these 2 lines:
videojs.registerPlugin('contextmenu', VjsContextMenu);
videojs.registerPlugin('contextmenuUI', VjsContextMenuUI);
Related
I have a vue.js 3 application that needs to dynamically create components and access them.
The proper way to dynamically create them and injected them in the DOM seems to be th wrap them in an app using createApp, and this part works, when I call test() a new copy of the components appears at the bottom of the DOM.
Now I need to be able to get a reference to that component son I can call public (exposed) methods on it.
In my (actual) code below, what would allow me to get a reference to my component ?
import { createApp, h } from "vue";
import ConfirmModal from '#/views/components/ui/confirm-modal.vue';
function test()
{
let componentApp = createApp({
setup() {
return () => h(ConfirmModal, { title: "Fuck yeah!", type: "primary" });
}
});
const wrapper = document.createElement('div');
wrapper.setAttribute('id', 'confirm-modal-0');
componentApp.mount(wrapper);
document.body.appendChild(wrapper);
let _confirmModal: ConfirmModal = ???????????????????
_confirmModal.show();
}
EDIT : Here's my use-case: I have a helper function in a service which is used to confirm actions (like deletes) using a Modal dialog. This helper/service is pure TS, not a Vue component, but needs to instanciate the modal (which is a vue component), have it injected in the DOM and have its public methods callable (by my helper/service).
Right now, the only thing that works is to have a sungle copy of the modal component in my root layout and have to root layout foward the ref to my service, which can then use the component. But this isn't great because I need multiple instances of the dialog, and isn't good SOC to have to root layout handle a modal dialog.
I have created a new native module in my React Native application (It's called RCTAVAudioSessionModule).
When looking in the AppDelegate I found this code snippet:
- (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge
{
NSArray<id<RCTBridgeModule>> *extraModules = [_moduleRegistryAdapter extraModulesForBridge:bridge];
// If you'd like to export some custom RCTBridgeModules that are not Expo modules, add them here!
return extraModules;
}
I want to add my native module to the extraModules array.
I tried to do something like that:
- (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge
{
NSArray<id<RCTBridgeModule>> *extraModules = [_moduleRegistryAdapter extraModulesForBridge:bridge];
// If you'd like to export some custom RCTBridgeModules that are not Expo modules, add them here!
return [extraModules arrayByAddingObject:(RCTAVAudioSessionModule.new)];
}
However, when I try to call a method from module I get an error that says:
TypeError: null is not an object (evaluating 'RCTAVAudioSessionModule.getCurrentRoute')
How can I correctly add my native module and use it on iOS?
I'll try to be short but clear.
I downloaded a template of Vuejs for admin (from here), but I am having troubles modifying it. I created one new component but I can't use it because is not being recognized. The console error says:
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I don't know why is this happening because I am importing the component as every other one. Look the script code in the father component.
import LTable from 'src/components/UIComponents/Tables/Table.vue'
import ETable from 'src/components/UIComponents/Tables/EditableTable.vue' //THIS IS MY NEW COMPONENT
import Card from 'src/components/UIComponents/Cards/Card.vue'
const tableColumns = [//some data]
const tableData = [//some data]
export default {
components: {
LTable,
ETable, //THIS IS MY NEW COMPONENT
Card
},
data () {
return {
//some data
}
},
//some methods
}
Of course the name tag in my new component is 'edit-table'.
There is happening other strange issue: when I change the name value in the component imported as 'LTable' it seems not to matter because everything keeps working good.
Please, any help is appreciated it.
I am new to ES6 and Aurelia. I would like to execute some code after a template for a component loads. What I'm trying to do is get the page down editor working inside an Aurelia component. The imports seem to work for the most part (although Sanitizer doesn't seem to be imported), but I'm not sure how to run my initialization code after the template loads.
import 'Markdown.Converter'
import 'Markdown.Sanitizer'
import 'Markdown.Editor'
export class AddProject {
constructor(){
}
}
// initialization code
var converter1 = new Markdown.Converter();//Markdown.getSanitizingConverter(); // commented out doesn't work
var editor1 = new Markdown.Editor(converter1);
editor1.run();
I just want to run my initialization code for the template after it get's loaded into the dom. Any ideas?
Use attached
export class MyClass{
attached(){
alert('My template is attached');
}
}
I got div with if.bind working as was suggested in this question: Using literal JavaScript values in an Aurelia view. But then I noticed that showTemplate on viewModel is being constantly checked by framework, about 10 times per second. The stack is following:
execute._prototypeProperties.visible.get (welcome.js:29)
getValue (dirty-checking.js:93)
isDirty (dirty-checking.js:127)
check (dirty-checking.js:63)
(anonymous function) (dirty-checking.js:49)
Is it supposed to be like this? Seems to be not very resource-friendly.
Best regards, Eugene.
Aurelia uses Object.observe for simple Javascript properties. If showTemplate is a function or a getter/setter, then Aurelia currently reverts to dirty checking. This can be removed by declaring the dependencies of the function. This is outlined here: https://github.com/aurelia/binding/pull/41
I have created a version of the Aurelia Skeleton project that implements this: https://github.com/ashleygrant/skeleton-navigation/tree/declare_dependencies
To implement this, you must switch to using the aurelia-main attribute. Add a main.js file:
import {LogManager} from 'aurelia-framework';
import {ConsoleAppender} from 'aurelia-logging-console';
import {ComputedObservationAdapter, ObjectObservationAdapter} from 'aurelia-framework';
LogManager.addAppender(new ConsoleAppender());
LogManager.setLevel(LogManager.levels.debug);
export function configure(aurelia) {
aurelia.use
.defaultBindingLanguage()
.defaultResources()
.router()
.eventAggregator();
aurelia.container
.registerSingleton(ObjectObservationAdapter, ComputedObservationAdapter);
aurelia.start().then(a => a.setRoot('app', document.body));
}
Then, in welcome.js, add the following import statement:
import {declarePropertyDependencies} from 'aurelia-framework';
and then outside the Welcome class, add the following method call:
declarePropertyDependencies(Welcome, 'fullName', ['firstName', 'lastName']);