Implementieren von benutzerdefinierten Schaltflächen

Einleitung

Benutzerdefinierte Schaltflächen können auf der Detailseite Ihrer App hinzugefügt werden. Sie können zum Beispiel eine Schaltfläche "Herunterladen" und/oder eine Schaltfläche "Standort" hinzufügen. Sie sind für die Programmierung der Tastenfunktionalität verantwortlich.

Anwendungsfälle

Hier sind einige Anwendungsfälle für benutzerdefinierte Schaltflächen:

• Eine Schaltfläche zum Herunterladen , damit die Nutzer eine Kopie des Videos herunterladen können
• Eine Standort-Schaltfläche , mit der Nutzer ihren Standort in Videos markieren können

Ereignisfluss

Dieses Diagramm zeigt den Ereignisfluss für eine benutzerdefinierte Schaltfläche:

Auslösende Ereignisse

Die folgenden Ereignisse können in Ihrem Plugin-Code verwendet werden, um benutzerdefinierte Schaltflächen zu steuern:

Daten zum Ereignis

Die folgenden Daten können mit dem Schaltflächenereignis übergeben werden:

Anmerkungen zu den Daten:

• Beim Anrufen detailsPageRemoveCustomButton

Codebeispiel

Hier ist die JavaScript-Code-Syntax für die Erstellung einer benutzerdefinierten Schaltfläche:

window.postMessage({
  event: 'detailsPageAddCustomButton',
  data: {
    title: 'Test Button',
    font_awesome_icon: 'fa fa-info-circle',
    element_id: 'TEST_BTN_ID'
  }
}, window.location.origin);

Zuhören bei Ereignissen

Die folgenden Ereignisse werden vom Player abgehört, wenn Tastenereignisse in Ihrem OTT-Plugin-Code ausgelöst werden:

Daten zum Ereignis

Die folgenden Daten werden zurückgegeben, wenn das Ereignis "Schaltfläche angeklickt" ausgelöst wird:

Codebeispiel

Hier ist die JavaScript-Code-Syntax, die verwendet wird, um auf ein Tastenklick-Ereignis zu warten:

switch (event.data.event) {
      
  case 'detailsPageExternalButtonWasClicked':
    if (event.data.data.element_id == 'download-button') {
      handleButtonClick('Download button'); 
    };
    if (event.data.data.element_id == 'location-button') {
      handleButtonClick('Location button');
    };
    break;

}

Beispiel

Hier ist ein Beispiel für ein Datenobjekt für das Ereignis "Schaltfläche angeklickt":

detailsPageExternalButtonWasClicked

Implementierung des Moduls

Im Folgenden wird gezeigt, wie die Funktionen des Seitenfensters mit Hilfe von JavaScript-Modulen implementiert werden. Natürlich können Sie Ihr JavaScript auf die Art und Weise implementieren, die Sie wünschen. Weitere Details zu dieser Modulimplementierung finden Sie im Dokument Implementing OTT Plugin Code Using Modules .

index.js

Hier ist unser Beispielcode:

import { addCustomButtonDetails, addCustomButtonDetailsParams, handleButtonClick } from './button-module.js';

window.addEventListener("message", (event) => {
  const originsAllowed = [
    'your Beacon app URL'
  ];
  if (originsAllowed.includes(event.origin)) {
    switch (event.data.event) {
      
      case 'detailsPageExternalButtonWasClicked':
        if (event.data.data.element_id == 'download-button') {
          handleButtonClick('Download button'); 
        };
        if (event.data.data.element_id == 'location-button') {
          handleButtonClick('Location button');
        };
        break;
        
      case 'onBeaconPageLoad':
        addCustomButtonDetailsParams('Download', 'fa fa-info-circle', 'download-button');
        addCustomButtonDetailsParams('Location', 'fa fa-info-circle', 'location-button');
      break;

    }
  }
},
  false
);

button-module.js

Hier ist unser Beispielcode:

const addCustomButtonDetails = () => {
  
      window.postMessage({
        event: 'detailsPageAddCustomButton',
        data: {
          title: 'Test Button',
          font_awesome_icon: 'fa fa-info-circle',
          element_id: 'TEST_BTN_ID'
        }
      }, window.location.origin);
    
    };
    
const addCustomButtonDetailsParams = (pTitle, pFont, pID) => {
  
  window.postMessage({
    event: 'detailsPageAddCustomButton',
    data: {
      title: pTitle,
      font_awesome_icon: pFont,
      element_id: pID
    }
  }, window.location.origin);

};

const handleButtonClick = (buttonString) => {

  alert('button was clicked ' + buttonString);

};

export { addCustomButtonDetails, addCustomButtonDetailsParams, handleButtonClick };