background-script.js

/* *************************************************************** */
/* TODO ********************************************************** */
// See https://github.com/lingua-libre/SignIt/issues

/* Phases ******************************************************** */
// state: up
// listen to event 1
// loading saved params from localstorage
// state: loading
// loading available sign languages
// loading vidéos urls
// create context menu
// state: ready

// change language asked from popup box
// update global var
// state: loading
// loading vidéos urls
// set local storage
// state: ready

/* *************************************************************** */
/* Sparql endpoints *********************************************** */
const sparqlEndpoints = {
  lingualibre: {
    url: "https://lingualibre.org/bigdata/namespace/wdq/sparql",
    verb: "POST",
  },
  wikidata: { url: "https://query.wikidata.org/sparql", verb: "GET" },
  commons: { url: "https://commons-query.wikimedia.org/sparql", verb: "GET" },
  dictionaireFrancophone: {
    url: "https://www.dictionnairedesfrancophones.org/sparql",
    verb: "",
  },
};
/* *************************************************************** */
/* Sparql ******************************************************** */
// Lingualibre: All languages (P4) for which media type (P24) is video (Q88890)
// TODO: NEEDS QUERY HITING ON LLQS+WDQS, FETCHING NATIVE NAME (P1705)
const sparqlSignLanguagesQuery =
  'SELECT ?id ?idLabel WHERE { ?id prop:P2 entity:Q4 . ?id prop:P24 entity:Q88890 . SERVICE wikibase:label { bd:serviceParam wikibase:language "fr,en". } }';
// Lingualibre: Given a language (P4) with media video, fetch the list of writen word (P7), url (P3) speakers (P5)
const sparqlSignVideosQuery =
  'SELECT ?word ?filename ?speaker WHERE { ?record prop:P2 entity:Q2 . ?record prop:P4 entity:$(lang) . ?record prop:P7 ?word . ?record prop:P3 ?filename . ?record prop:P5 ?speakerItem . ?speakerItem rdfs:label ?speaker filter ( lang( ?speaker ) = "en" ) . }';
// Wikidata: All Sign languages who have a Commons lingualibre category
const sparqlFilesInCategoryQuery = `SELECT ?file ?url ?title
WHERE {
  SERVICE wikibase:mwapi {
    bd:serviceParam wikibase:api "Generator" ;
                    wikibase:endpoint "commons.wikimedia.org" ;
                    mwapi:gcmtitle "Category:Videos Langue des signes française" ;
                    mwapi:generator "categorymembers" ;
                    mwapi:gcmtype "file" ;
                    mwapi:gcmlimit "max" .
    ?title wikibase:apiOutput mwapi:title .
    ?pageid wikibase:apiOutput "@pageid" .
  }
  BIND (URI(CONCAT('https://commons.wikimedia.org/entity/M', ?pageid)) AS ?file)
  BIND (URI(CONCAT('https://commons.wikimedia.org/wiki/', ?title)) AS ?url)
}`;

/* *************************************************************** */
/* Initial state if no localStorage ********************************* */
var state = "up", // up, loading, ready, error
  records = {},
  signLanguages = [],
  uiLanguages = [],
  // Default values, will be stored in localStorage as well for persistency.
  params = {
    signLanguage: "Q99628", // for videos : French Sign language
    uiLanguage: "Q150", // for interface : French
    historylimit: 6,
    history: ["lapin", "crabe", "fraise", "canard"], // Some fun
    wpintegration: true,
    twospeed: true,
    hinticon: true,
    coloredwords: true,
    choosepanels: "both", // issues/36
  };

/* *************************************************************** */
/* i18n context ************************************************** */
// List of UI languages with translations on github via translatewiki
var supportedUiLanguages = [
  {
    i18nCode: "anp",
    labelEN: "Angika",
    labelNative: "अंगिका",
    wdQid: "Q28378",
    wiki: "anp",
  },
  {
    i18nCode: "ar",
    labelEN: "Arabic",
    labelNative: "اللُّغَة العَرَبِيّة",
    wdQid: "Q13955",
    wiki: "ar",
  },
  {
    i18nCode: "bn",
    labelEN: "Bengali",
    labelNative: "বাংলা",
    wdQid: "Q9610",
    wiki: "bn",
  },
  {
    i18nCode: "blk",
    labelEN: "Pa'O",
    labelNative: "ပအိုဝ်ႏဘာႏသာႏ",
    wdQid: "",
    wiki: "Q7121294",
  },
  {
    i18nCode: "br",
    labelEN: "Breton",
    labelNative: "Brezhoneg",
    wdQid: "Q12107",
    wiki: "br",
  },
  {
    i18nCode: "ce",
    labelEN: "Chechen",
    labelNative: "Нохчийн мотт",
    wdQid: "Q33350",
    wiki: "ce",
  },
  {
    i18nCode: "de",
    labelEN: "German",
    labelNative: "Deutsch",
    wdQid: "Q188",
    wiki: "de",
  },
  {
    i18nCode: "en",
    labelEN: "English",
    labelNative: "English",
    wdQid: "Q1860",
    wiki: "en",
  },
  {
    i18nCode: "es",
    labelEN: "Spanish",
    labelNative: "Español",
    wdQid: "Q1321",
    wiki: "es",
  },
  {
    i18nCode: "fa",
    labelEN: "Persian",
    labelNative: "فارسی",
    wdQid: "Q9168",
    wiki: "fa",
  },
  {
    i18nCode: "fi",
    labelEN: "Finnish",
    labelNative: "Suomi",
    wdQid: "Q1412",
    wiki: "fi",
  },
  {
    i18nCode: "fr",
    labelEN: "French",
    labelNative: "Français",
    wdQid: "Q150",
    wiki: "fr",
  },
  {
    i18nCode: "gl",
    labelEN: "Galician",
    labelNative: "Galego",
    wdQid: "Q9307",
    wiki: "gl",
  },
  {
    i18nCode: "he",
    labelEN: "Hebrew",
    labelNative: "עברית",
    wdQid: "Q9288",
    wiki: "he",
  },
  {
    i18nCode: "hi",
    labelEN: "Hindi",
    labelNative: "हिन्दी",
    wdQid: "Q1568",
    wiki: "hi",
  },
  {
    i18nCode: "hu",
    labelEN: "Hungarian",
    labelNative: "Magyar",
    wdQid: "Q9067",
    wiki: "hu",
  },
  {
    i18nCode: "ia",
    labelEN: "Interlingua",
    labelNative: "Interlingua",
    wdQid: "Q35934",
    wiki: "ia",
  },
  {
    i18nCode: "id",
    labelEN: "Indonesian",
    labelNative: "Bahasa Indonesia",
    wdQid: "Q9240",
    wiki: "id",
  },
  {
    i18nCode: "it",
    labelEN: "Italian",
    labelNative: "Italiano",
    wdQid: "Q652",
    wiki: "it",
  },
  {
    i18nCode: "ja",
    labelEN: "Japanese",
    labelNative: "日本語",
    wdQid: "Q5287",
    wiki: "ja",
  },
  {
    i18nCode: "kk-cyrl",
    labelEN: "Kazakh",
    labelNative: "Казақша",
    wdQid: "Q9252",
    wiki: "kk",
  },
  {
    i18nCode: "ko",
    labelEN: "Korean",
    labelNative: "한국어",
    wdQid: "Q9176",
    wiki: "ko",
  },
  {
    i18nCode: "krc",
    labelEN: "Karachay-Balkar",
    labelNative: "Qaraçay-malqar",
    wdQid: "Q33714",
    wiki: "krc",
  },
  {
    i18nCode: "lmo",
    labelEN: "Lombard",
    labelNative: "Lengua lombarda",
    wdQid: "Q33754",
    wiki: "lmo",
  },
  {
    i18nCode: "mk",
    labelEN: "Macedonian",
    labelNative: "Македонски",
    wdQid: "Q9296",
    wiki: "mk",
  },
  {
    i18nCode: "mnw",
    labelEN: "Mon",
    labelNative: "ဘာသာမန်",
    wdQid: "Q13349",
    wiki: "mnw",
  },
  {
    i18nCode: "ms",
    labelEN: "Malay",
    labelNative: "Bahasa Melayu",
    wdQid: "Q9237",
    wiki: "ms",
  },
  {
    i18nCode: "nb",
    labelEN: "Bokmål",
    labelNative: "Bokmål",
    wdQid: "Q25167",
    wiki: "nb",
  },
  { i18nCode: "urdu", labelEN: "Urdu", labelNative: "اردو", wdQid: "Q1389492" },
  {
    i18nCode: "pt",
    labelEN: "Portuguese",
    labelNative: "Português (pt)",
    wdQid: "Q5146",
    wiki: "pt",
  },
  {
    i18nCode: "pt-br",
    labelEN: "Portuguese",
    labelNative: "Português (br)",
    wdQid: "Q5146",
    wiki: "pt",
  },
  {
    i18nCode: "ru",
    labelEN: "Russian",
    labelNative: "Русский язык",
    wdQid: "Q7737",
    wiki: "ru",
  },
  {
    i18nCode: "scn",
    labelEN: "Sicilian",
    labelNative: "Sicilianu",
    wdQid: "Q33973",
    wiki: "scn",
  },
  {
    i18nCode: "sl",
    labelEN: "Slovene",
    labelNative: "Slovenski jezik",
    wdQid: "Q9063",
    wiki: "sl",
  },
  {
    i18nCode: "sv",
    labelEN: "Swedish",
    labelNative: "Svenska",
    wdQid: "Q9027",
    wiki: "sv",
  },
  {
    i18nCode: "sw",
    labelEN: "Swahili",
    labelNative: "Kiswahili",
    wdQid: "Q7838",
    wiki: "sw",
  },
  {
    i18nCode: "tl",
    labelEN: "Tagalog",
    labelNative: "Wikang Tagalog",
    wdQid: "Q34057",
    wiki: "tl",
  },
  {
    i18nCode: "tr",
    labelEN: "Turkish",
    labelNative: "Türkçe",
    wdQid: "Q256",
    wiki: "tr",
  },
  {
    i18nCode: "uk",
    labelEN: "Ukrainian",
    labelNative: "Українська мова",
    wdQid: "Q8798",
    wiki: "uk",
  },
  // {i18nCode:"zh",labelEN: "Chinese",labelNative: "汉语",wdQid: "Q7850",wiki: "zh"}
  {
    i18nCode: "zh-hant",
    labelEN: "Traditional Chinese",
    labelNative: "中文 (繁體)",
    wdQid: "Q18130932",
    wiki: "zh",
  },
  {
    i18nCode: "zh-hans",
    labelEN: "Modern Chinese",
    labelNative: "中文 (简体)",
    wdQid: "Q13414913",
    wiki: "zh",
  },
];

// Init internationalisation support with Banana-i18n.js
banana = new Banana("fr"); // use document browser language
loadI18nLocalization(params.uiLanguage);
// Add url support
banana.registerParserPlugin("link", (nodes) => {
  return '<a href="' + nodes[0] + '">' + nodes[1] + "</a>";
});

/* ************************************************ 
async function fetchJS(filepath) {
	try {
		const response = await fetch(`${filepath}`, {
			method: 'GET',
			credentials: 'same-origin'
		});
		const content = await response.json();
		return content;
	} catch (error) { console.error(error); }
}
messages = await fetchJS(`i18n/${locale}.json`); */

// Loading all UI translations
async function loadI18nLocalization(uiLanguageQid) {
  var localizedPhrases = {};

  console.log("uiLanguageQid)", uiLanguageQid);
  console.log("supportedUiLanguages", supportedUiLanguages);

  state = "loading";

  // Get locale code and corresponding wiktionary
  var lang = supportedUiLanguages.filter((item) => item.wdQid == uiLanguageQid);
  locale = lang[0].i18nCode;
  console.log("locale", locale);

  // Load i18n messages
  const res = await fetch(`i18n/${locale}.json`);
  localizedPhrases = await res.json();
  console.log("messages", localizedPhrases["si-popup-settings-title"]);
  // Load messages into localisation
  banana.load(localizedPhrases, locale); // Load localized messages (chould be conditional to empty)

  // Declare localisation
  banana.setLocale(locale); // Change to new locale

  state = "ready";

  console.log(Object.keys(localizedPhrases).length + " i18n messages loaded");
}

/* *************************************************************** */
/* Settings management : memory, updates ************************* */
// Save parameter and value in localStorage
async function storeParam(name, value) {
  // If value of type array, we make a copy of it to avoid dead references issues
  if (Array.isArray(value)) {
    value = Array.from(value); // copy
  }
  // else, create object { name: value }
  console.log("HERE ! Selected option: { ", name + ": " + value + " }");
  var tmp = {};
  tmp[name] = value;
  // reset params
  params[name] = value;
  return await browser.storage.local.set(tmp);
}
// Get stored values from init hard coded `params` or from prefered local storage
// Also synchronize both.
async function getStoredParam(name) {
  var tmp = await browser.storage.local.get(name);
  params[name] = tmp[name] || params[name] || null;
  // If missing from local storage, then save init values in local storage
  if (tmp.length == undefined) {
    await storeParam(name, params[name]);
  }
  return params[name];
}

// Get sign languages covered by Lingualibre
// returns: [{ wdQid: "Q99628", labelNative: "langue des signes française"},{},...]
async function getSignLanguagesWithVideos() {
  var i,
    signLanguage,
    signLanguages = [], // ?? already define in global scopte
    response = await $.post(sparqlEndpoints.lingualibre.url, {
      format: "json",
      query: sparqlSignLanguagesQuery,
    });
  // create signLanguages objects
  for (i = 0; i < response.results.bindings.length; i++) {
    var signLanguageRaw = response.results.bindings[i];
    console.log("#149", signLanguageRaw);
    signLanguage = {
      wdQid: signLanguageRaw.id.value.split("/").pop(),
      labelNative: signLanguageRaw.idLabel.value,
    };
    signLanguages[i] = signLanguage;
  }
  // TEMPORARY, WHEN ONLY LSF HAS VIDEOS
  signLanguages = filterArrayBy(signLanguages, "wdQid", "Q99628");
  console.log(signLanguages);

  return signLanguages;
}

// Loading all vidéos of a given sign language. Format:
// returns format: { word: { filename: url, speaker: name }, ... };
async function getAllRecords(signLanguage) {
  var i,
    record,
    word,
    response,
    records = {};

  state = "loading";

  response = await $.post(sparqlEndpoints.lingualibre.url, {
    format: "json",
    query: sparqlSignVideosQuery.replace("$(lang)", signLanguage),
  });

  for (i = 0; i < response.results.bindings.length; i++) {
    record = response.results.bindings[i];
    word = record.word.value.toLowerCase();
    if (records.hasOwnProperty(word) === false) {
      records[word] = [];
    }
    records[word].push({
      filename: record.filename.value.replace("http://", "https://"),
      speaker: record.speaker.value,
    });
  }

  state = "ready";

  console.log(Object.keys(records).length + " records loaded");
  return records;
}

// Given language's Qid, reload list of available videos and records/words data
async function changeLanguage(newLang) {
  records = await getAllRecords(newLang);
  await storeParam("signLanguage", newLang); // localStorage save
}

// Given language's Qid, reload available translations
async function changeUiLanguage(newLang) {
  console.log("changeUiLanguage newLang", newLang); // => 'Q150' for french
  await loadI18nLocalization(newLang);
  await storeParam("uiLanguage", newLang); // localStorage save
}

/* *************************************************************** */
/* Toolbox functions ********************************************* */
var filterArrayBy = function (arr, key, value) {
  return arr.filter((item) => item[key] == value);
};
function normalize(selection) {
  // this could do more
  return selection.trim();
}

// Check a string with multiple words and return the word whose record is available
function getAvailableWord(word) {
  // while this makes for an ungly regex , I couldn't think of anything else.
  // Using metacharcters like /W or /w meant removing accented letters as well, which would have broken
  // many french words . . .so I retorted to this;

  const regex = /[!"#$%&()*+,-./:;<=>?@[\\\]^_{|}~]/;
  const stringWithoutSpecialChars = word.replace(regex, "");
  const wordArray = stringWithoutSpecialChars.split(" ");
  console.log(wordArray);
  for (let newWord of wordArray) {
    if (records.hasOwnProperty(newWord.toLowerCase())) {
      return newWord;
    }
  }
}

// Given a word string, check if exist in available records data, if so return data on that word
// returns format: { filename: url, speaker: name }
function wordToFiles(word) {
  var fileData = records.hasOwnProperty(word)
    ? records[word]
    : records.hasOwnProperty(word.toLowerCase())
    ? records[word.toLowerCase()]
    : null;
  return fileData;
}

var normalizeMessage = function (msg) {
  var text = msg.selectionText || msg.iconText || msg.wpTitle;
  delete msg.selectionText; // when from background-script.js via right-click menu
  delete msg.iconText; // when from signit.js icon click
  delete msg.wpTitle; // when from wpintegration.js auto-injection
  msg.text = text.trim();
  // msg.list = getAllRecords() <--------- how to do
  return msg;
};

/* *************************************************************** */
/* Dependencies, CSP ********************************************* */
async function getActiveTabId() {
  await browser.tabs.query({ active: true, currentWindow: true });
  return tabs[0].id;
}
// Ping tab, if fails, then CSS, JS dependencies loaded and executed
async function checkActiveTabInjections(tab) {
  try {
    await browser.tabs.sendMessage(tab, { command: "ping" });
  } catch (error) {
    var i,
      dependencies = browser.runtime.getManifest().content_scripts[0];
    (scripts = dependencies.js), (stylesheets = dependencies.css);

    for (i = 0; i < scripts.length; i++) {
      await browser.tabs.executeScript(tab, { file: scripts[i] });
    }
    for (i = 0; i < stylesheets.length; i++) {
      await browser.tabs.insertCSS(tab, { file: stylesheets[i] });
    }
  }
}

/* *************************************************************** */
/* Browser interactions ****************************************** */
var callModal = async function (msg) {
  // Tab
  console.log("Call modal > msg", { msg });
  var tabs = await browser.tabs.query({ active: true, currentWindow: true });
  await checkActiveTabInjections(tabs[0].id);
  console.log("Call modal > #282 > tab id", tabs[0].id);
  // Data
  var word = msg.text;
  if (word.split(" ").length > 1) {
    word = getAvailableWord(word);
  }
  var videosFiles = msg.files || wordToFiles(word) || [];
  // Send message which opens the modal
  browser.tabs.sendMessage(tabs[0].id, {
    command: "signit.sign",
    text: word,
    files: videosFiles,
    supportedWords: Object.keys(records), // <------ array for coloredwords feature
    banana: banana,
  });
  storeParam("history", [word, ...params.history]);
};

// Create a context menu item (right-click on text to see)
browser.contextMenus.create(
  {
    id: "signit",
    title: "Lingua Libre SignIt",
    contexts: ["selection"],
  },
  function () {
    return;
  }
);

// Listen for right-click menu's signals
browser.contextMenus.onClicked.addListener(async function (menuMessage, __tab) {
  // var tab not used ? Can remove ?
  message = normalizeMessage(menuMessage);
  callModal(message);
});

// Listen for other signals
browser.runtime.onMessage.addListener(async function (message) {
  console.log(
    "Message heard in background-script.js: ",
    message,
    "---------------------"
  );

  // Passing messages instead of browser type checking since its not scalable
  // inside both chrome and firefox

  if (message.command === "checkActiveTabInjections") {
    await checkActiveTabInjections(message.argument);
    return;
  } else if (message.command === "normalizeWordAndReturnFiles") {
    const word = normalize(message.argument);
    const files = wordToFiles(word);
    return [word, files];
  } else if (message.command === "changeUiLanguage") {
    await changeUiLanguage(message.argument);
    return;
  } else if (message.command === "storeParam") {
    const [name, value] = message.argument;
    storeParam(name, value);
    return;
  } else if (message.command === "bananai18n") {
    let [msg, placeholderValue] = message.arg;
    const i18nMessage = banana.i18n(msg, ...placeholderValue);
    return i18nMessage;
  }
  message = normalizeMessage(message);

  // When message 'signit.getfiles' is heard, returns relevant extract of records[]
  if (message.command === "signit.getfiles") {
    console.log("bg>signit.getfiles");
    return records[message.text] || records[message.text.toLowerCase()] || [];
  }
  // Start modal
  // When right click's menu "Lingua Libre SignIt" clicked, send message 'signit.sign' to the content script => opens Signit modal
  else if (message.command === "signit.hinticon") {
    callModal(message);
  }
});

/* *************************************************************** */
/* Main ********************************************************** */
async function main() {
  state = "loading";

  // Get local storage value if exist, else get default values
  // promise.all
  await getStoredParam("history");
  await getStoredParam("historylimit");
  await getStoredParam("wpintegration");
  await getStoredParam("twospeed");
  // storeParam( 'twospeed', params.twospeed ); //
  await getStoredParam("hinticon");
  await getStoredParam("coloredwords");
  await getStoredParam("choosepanels");

  signLanguage = await getStoredParam("signLanguage");
  // signLanguages = await getSignLanguagesWithVideos();
  signLanguages = [
    {
      wdQid: "Q99628",
      wikidata: "Q33302",
      labelNative: "langue des signes française",
    },
    {
      wdQid: "Q1379196",
      wikidata: "Q3446604",
      labelNative: "Armenian Sign Language",
    },
    {
      wdQid: "Q806575",
      wikidata: "Q14759",
      labelNative: "American Sign Language",
    },
  ];
  uiLanguage = await getStoredParam("uiLanguage");
  console.log("supportedUiLanguages", supportedUiLanguages);
  uiLanguages = supportedUiLanguages;
  records = await getAllRecords(signLanguage);

  state = "ready";
}
// Run it
main();