d9media opened a new issue #265: Can't seem to get Cordova Media to work in Capacitor & Ionic React URL: https://github.com/apache/cordova-plugin-media/issues/265 I am currently trying to get the plug-in to work with capacitor and Ionic react. First, I've installed the plug-in as suggested running the following commands described on this help page: https://capacitor.ionicframework.com/docs/cordova/using-cordova-plugins/ ``` npm install @ionic-native/media npm install cordova-plugin-media npx cap sync ``` I am then including the plugin within my page script: ``` import { Plugins } from '@capacitor/core'; import { Media, MediaObject } from '@ionic-native/media'; ... const Library: React.FC = () => { const playAudio = async () => { console.log("play request triggered"); // const media_item = Media.create(testaudio); const testaudio = "https://link-to-audio-file.mp3";; const file: MediaObject = Media.create(testaudio); // to listen to plugin events: file.onStatusUpdate.subscribe(status => console.log(status)); // fires when file status changes file.onSuccess.subscribe(() => console.log('Action is successful')); file.onError.subscribe(error => console.log('Error!', error)); // play the file file.play(); console.log(file); } // code not related to the issue const [items, setItems] = React.useState([]); React.useEffect(() => { sendGetRequest().then( data => setItems(data.products) ); }, []); return ( <IonPage> <IonHeader> <IonToolbar> <IonTitle>My Music</IonTitle> </IonToolbar> </IonHeader> <IonContent> <IonRow> { items.map(item => { return ( <IonCol size="12"> <IonCard> <IonImg src={item['info']['thumbnail']} /> <IonCardHeader> <IonCardSubtitle>Audio Length</IonCardSubtitle> <IonCardTitle>{item['info']['title']}</IonCardTitle> </IonCardHeader> <IonCardContent> {item['info']['content']} </IonCardContent> <IonItem routerLink="/library/details" > <IonIcon icon={play} slot="start" onClick={playAudio}/> <IonLabel> <h2>Session starten</h2> </IonLabel> </IonItem> <IonItem routerLink="/library/details"> <IonIcon icon={heart} slot="start" /> <IonLabel> Für später merken </IonLabel> </IonItem> </IonCard> </IonCol> ); }) } </IonRow> </IonContent> </IonPage> ); }; ``` Most demo code using the plugin in Ionic seems to be using Angular. I'm aware that React is still a new platform for Ionic so I'm wondering if I'm doing anything wrong or maybe it is still to early on to use it for my use case? Any hints are much appreciated.
---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: [email protected] With regards, Apache Git Services --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
