decidim-core 0.28.4 → 0.29.0.rc1

data/app/packs/src/decidim/datepicker/generate_timepicker.js

@@ -0,0 +1,298 @@
+/* eslint-disable require-jsdoc */
+import icon from "src/decidim/icon"
+import { changeHourDisplay, changeMinuteDisplay, formatDate, hourDisplay, minuteDisplay, formatTime, setHour, setMinute, updateTimeValue, updateInputValue } from "src/decidim/datepicker/datepicker_functions"
+import { timeKeyDownListener, timeBeforeInputListener } from "src/decidim/datepicker/datepicker_listeners";
+import { getDictionary } from "src/decidim/i18n";
+
+export default function generateTimePicker(input, row, formats) {
+  const i18n = getDictionary("time.buttons");
+
+  const timeColumn = document.createElement("div");
+  timeColumn.setAttribute("class", "datepicker__time-column");
+
+  const time = document.createElement("input");
+  time.setAttribute("id", `${input.id}_time`);
+  time.setAttribute("type", "text");
+
+  const clock = document.createElement("button");
+  clock.innerHTML = icon("time-line")
+  clock.setAttribute("class", "datepicker__clock-button");
+  clock.setAttribute("type", "button");
+
+  timeColumn.appendChild(time);
+  timeColumn.appendChild(clock);
+
+  row.append(timeColumn);
+
+  const hourColumn = document.createElement("div");
+  hourColumn.setAttribute("class", "datepicker__hour-column");
+
+  const hours = document.createElement("input");
+  hours.setAttribute("class", "datepicker__hour-picker");
+  hours.setAttribute("readonly", "true");
+  hours.setAttribute("disabled", "true");
+
+  const hourUp = document.createElement("button");
+  hourUp.setAttribute("class", "datepicker__hour-up");
+  hourUp.innerHTML = icon("arrow-drop-up-line", {class: "w-10 h-6 pr-1"});
+  hourUp.setAttribute("type", "button");
+
+  const hourDown = document.createElement("button");
+  hourDown.setAttribute("class", "datepicker__hour-down");
+  hourDown.innerHTML = icon("arrow-drop-down-line", {class: "w-10 h-6 pr-1"});
+  hourDown.setAttribute("type", "button");
+
+  hourColumn.appendChild(hours);
+  hourColumn.appendChild(hourUp);
+  hourColumn.appendChild(hourDown);
+
+  const minuteColumn = document.createElement("div");
+  minuteColumn.setAttribute("class", "datepicker__minute-column");
+
+  const minutes = document.createElement("input");
+  minutes.setAttribute("class", "datepicker__minute-picker");
+  minutes.setAttribute("readonly", "true");
+  minutes.setAttribute("disabled", "true");
+
+  const minuteUp = document.createElement("button");
+  minuteUp.setAttribute("class", "datepicker__minute-up");
+  minuteUp.innerHTML = icon("arrow-drop-up-line", {class: "w-10 h-6 pr-1"});
+  minuteUp.setAttribute("type", "button");
+
+  const minuteDown = document.createElement("button");
+  minuteDown.setAttribute("class", "datepicker__minute-down");
+  minuteDown.innerHTML = icon("arrow-drop-down-line", {class: "w-10 h-6 pr-1"});
+  minuteDown.setAttribute("type", "button");
+
+  minuteColumn.appendChild(minutes);
+  minuteColumn.appendChild(minuteUp);
+  minuteColumn.appendChild(minuteDown);
+
+  const timeRow = document.createElement("div");
+  timeRow.setAttribute("class", "datepicker__time-row");
+
+  timeRow.appendChild(hourColumn);
+  timeRow.appendChild(minuteColumn);
+
+
+  // US FORMAT
+
+  if (formats.time === 12) {
+    const periodColumn = document.createElement("div");
+    periodColumn.setAttribute("class", "datepicker__period-column");
+
+    const periodAm = document.createElement("input");
+    periodAm.setAttribute("type", "radio");
+    periodAm.setAttribute("name", `period_${input.id}`);
+    periodAm.setAttribute("id", `period_am_${input.id}`);
+    periodAm.setAttribute("class", "datepicker__period-am");
+    const periodAmLabel = document.createElement("span");
+    periodAmLabel.innerText = "AM"
+
+    const periodPm = document.createElement("input");
+    periodPm.setAttribute("type", "radio");
+    periodPm.setAttribute("name", `period_${input.id}`);
+    periodPm.setAttribute("id", `period_pm_${input.id}`);
+    periodPm.setAttribute("class", "datepicker__period-pm");
+    const periodPmLabel = document.createElement("span");
+    periodPmLabel.innerText = "PM"
+
+    periodColumn.appendChild(periodAm);
+    periodColumn.appendChild(periodAmLabel);
+    periodColumn.appendChild(periodPm);
+    periodColumn.appendChild(periodPmLabel);
+    timeColumn.appendChild(periodColumn);
+
+    periodAm.addEventListener("click", () => {
+      input.value = `${formatDate(document.querySelector(`#${input.id}_date`).value, formats)}T${formatTime(time.value, formats.time, input.id)}`;
+    });
+
+    periodPm.addEventListener("click", () => {
+      input.value = `${formatDate(document.querySelector(`#${input.id}_date`).value, formats)}T${formatTime(time.value, formats.time, input.id)}`;
+    });
+  };
+
+  const hourLabel = document.createElement("span");
+  hourLabel.innerText = "Hour";
+
+  const hourLabelContainer = document.createElement("div");
+  hourLabelContainer.setAttribute("class", "datepicker__hour-label-container");
+
+  hourLabelContainer.appendChild(hourLabel);
+
+  const minuteLabel = document.createElement("span");
+  minuteLabel.innerText = "Minute";
+
+  const minuteLabelContainer = document.createElement("div");
+  minuteLabelContainer.setAttribute("class", "datepicker__minute-label-container");
+
+  minuteLabelContainer.appendChild(minuteLabel);
+
+  const labels = document.createElement("div");
+  labels.setAttribute("class", "datepicker__label-row");
+
+  labels.appendChild(hourLabelContainer);
+  labels.appendChild(minuteLabelContainer);
+
+  const timePicker = document.createElement("div");
+  timePicker.setAttribute("id", `${time.id}_timepicker`);
+  timePicker.setAttribute("class", "datepicker__time-frame");
+  timePicker.style.display = "none";
+
+  timePicker.appendChild(timeRow);
+  timePicker.appendChild(labels);
+
+  const closeClock = document.createElement("button");
+  closeClock.innerText = i18n.close;
+  closeClock.setAttribute("class", "datepicker__close-clock button button__transparent-secondary button__xs");
+  closeClock.setAttribute("type", "button");
+
+  const resetClock = document.createElement("button");
+  resetClock.innerText = i18n.reset;
+  resetClock.setAttribute("class", "datepicker__reset-clock button button__xs button__text-secondary");
+  resetClock.setAttribute("type", "button");
+
+  const selectClock = document.createElement("button");
+  selectClock.innerText = i18n.select;
+  selectClock.setAttribute("class", "datepicker__select-clock button button__secondary button__xs");
+  selectClock.setAttribute("type", "button");
+
+  timePicker.appendChild(resetClock);
+  timePicker.appendChild(selectClock);
+  timePicker.appendChild(closeClock);
+
+  clock.after(timePicker);
+
+  const timePickerDisplay = (event) => {
+    if (!timeColumn.contains(event.target)) {
+      timePicker.style.display = "none";
+      document.removeEventListener("click", timePickerDisplay)
+    }
+  };
+
+  let hour = 0;
+
+  if (formats.time === 12) {
+    hour = 1;
+  };
+
+  let minute = 0;
+
+  if (input.value !== "") {
+    hour = setHour(input.value.split("T")[1], formats.time);
+    minute = setMinute(input.value.split("T")[1]);
+  };
+
+  time.addEventListener("focus", () => {
+    timePicker.style.display = "none";
+  })
+
+  time.addEventListener("paste", (event) => {
+    event.preventDefault();
+    const value = event.clipboardData.getData("text/plain");
+
+    let formatGuard = (/^([0-9]|0[0-9]|1[0-9]|2[0-3])(.|:)[0-5][0-9]/).test(value);
+
+    if (formats.time === 12) {
+      formatGuard = (/^([0-9]|0[0-9]|1[0-2])(.|:)[0-5][0-9]/).test(value);
+    };
+
+    if (formatGuard) {
+      if ((/(^[0-9])(.|:)[0-5][0-9]/).test(value)) {
+        hour = Number(value[0]);
+        minute = Number(`${value[2]}${value[3]}`);
+      } else if ((/(^0[0-9])(.|:)[0-5][0-9]/).test(value)) {
+        hour = Number(value[1]);
+        minute = Number(`${value[3]}${value[4]}`);
+      } else {
+        hour = Number(`${value[0]}${value[1]}`);
+        minute = Number(`${value[3]}${value[4]}`);
+      }
+      hours.value = hourDisplay(hour);
+      minutes.value = minuteDisplay(minute);
+      time.value = `${hourDisplay(hour)}:${minuteDisplay(minute)}`;
+      input.value = `${formatDate(document.querySelector(`#${input.id}_date`).value, formats)}T${formatTime(time.value, formats.time, input.id)}`;
+    }
+  });
+
+  timeKeyDownListener(time);
+  timeBeforeInputListener(time);
+
+  time.addEventListener("keyup", () => {
+    if (time.value.length === 5) {
+      const inputHour = time.value.split(":")[0];
+      const inputMinute = time.value.split(":")[1];
+
+      if (formats.time === 12 && Number(inputHour) <= 12 && Number(inputMinute) <= 59 ||
+          formats.time === 24 && Number(inputHour) <= 23 && Number(inputMinute) <= 59) {
+        hour = Number(inputHour);
+        minute = Number(inputMinute);
+
+        hours.value = hourDisplay(hour);
+        minutes.value = minuteDisplay(minute);
+        input.value = `${formatDate(document.querySelector(`#${input.id}_date`).value, formats)}T${formatTime(time.value, formats.time, input.id)}`;
+      };
+    } else if (time.value.length === 0) {
+      hours.value = "";
+      minutes.value = "";
+    };
+  });
+
+  resetClock.addEventListener("click", (event) => {
+    event.preventDefault();
+    if (formats.time === 24) {
+      hour = 0;
+    } else {
+      hour = 1;
+    }
+    minute = 0;
+
+    hours.value = hourDisplay(hour);
+    minutes.value = minuteDisplay(minute);
+    time.value = "";
+  });
+
+  closeClock.addEventListener("click", (event) => {
+    event.preventDefault();
+    timePicker.style.display = "none";
+  });
+
+  selectClock.addEventListener("click", (event) => {
+    event.preventDefault();
+    updateTimeValue(time, hour, minute);
+    updateInputValue(input, formats, time);
+    timePicker.style.display = "none";
+  });
+
+  clock.addEventListener("click", (event) => {
+    event.preventDefault();
+    timePicker.style.display = "block";
+    document.addEventListener("click", timePickerDisplay);
+    hours.value = hourDisplay(hour);
+    minutes.value = minuteDisplay(minute);
+  });
+
+  hourUp.addEventListener("click", (event) => {
+    event.preventDefault();
+    hour = changeHourDisplay("increase", hour, formats.time);
+    hours.value = hourDisplay(hour);
+  });
+
+  hourDown.addEventListener("click", (event) => {
+    event.preventDefault();
+    hour = changeHourDisplay("decrease", hour, formats.time);
+    hours.value = hourDisplay(hour);
+  });
+
+  minuteUp.addEventListener("click", (event) => {
+    event.preventDefault();
+    minute = changeMinuteDisplay("increase", minute);
+    minutes.value = minuteDisplay(minute);
+  });
+
+  minuteDown.addEventListener("click", (event) => {
+    event.preventDefault();
+    minute = changeMinuteDisplay("decrease", minute);
+    minutes.value = minuteDisplay(minute);
+  });
+};

data/app/packs/src/decidim/datepicker/test/date.test.js

@@ -0,0 +1,118 @@
+/* global jest */
+
+import {
+  dateToPicker,
+  displayDate,
+  formatDate,
+  formatInputDate,
+  calculateDatepickerPos
+} from "src/decidim/datepicker/datepicker_functions"
+
+describe("dateToPicker", () => {
+  it('should format date from "d-m-y" to "m-d-y" -format for datepicker', () => {
+    const inputDate = "01/02/2023";
+    const formats = { separator: "/", order: "d-m-y" };
+
+    const result = dateToPicker(inputDate, formats);
+
+    expect(result).toEqual("02/01/2023");
+  });
+
+  it('should format date from "y-m-d" to "m-d-y" -format for datepicker', () => {
+    const inputDate = "2023.02.01";
+    const formats = { separator: ".", order: "y-m-d" };
+
+    const result = dateToPicker(inputDate, formats);
+
+    expect(result).toEqual("02/01/2023");
+  });
+});
+
+describe("displayDate", () => {
+  it('should format date in "d-m-y" order correctly', () => {
+    const inputDate = new Date("2023-02-01");
+    const formats = { separator: "/", order: "d-m-y" };
+
+    const result = displayDate(inputDate, formats);
+
+    expect(result).toEqual("01/02/2023");
+  });
+
+  it('should format date in "y-m-d" order correctly', () => {
+    const inputDate = new Date("2023-02-01");
+    const formats = { separator: ".", order: "y-m-d" };
+
+    const result = displayDate(inputDate, formats);
+
+    expect(result).toEqual("2023.02.01");
+  });
+});
+
+describe("formatDate", () => {
+  it('should format date in "d-m-y" -format correctly to "datetime-local" or "date" formfield', () => {
+    const inputDate = "01/02/2023";
+    const formats = { separator: "/", order: "d-m-y" };
+
+    const result = formatDate(inputDate, formats);
+
+    expect(result).toEqual("2023-02-01");
+  });
+
+  it('should format date in "y-m-d" -format correctly to "datetime-local" or "date" formfield', () => {
+    const inputDate = "2023.02.01";
+    const formats = { separator: ".", order: "y-m-d" };
+
+    const result = formatDate(inputDate, formats);
+
+    expect(result).toEqual("2023-02-01");
+  });
+});
+
+describe("formatInputDate", () => {
+  it('should format date in "d-m-y" order correctly', () => {
+    const inputDate = "2023-02-01";
+    const formats = { separator: "/", order: "d-m-y" };
+
+    const result = formatInputDate(inputDate, formats);
+
+    expect(result).toEqual("01/02/2023");
+  });
+
+  it('should format date in "y-m-d" order correctly', () => {
+    const inputDate = "2023-02-01";
+    const formats = { separator: ".", order: "y-m-d" };
+
+    const result = formatInputDate(inputDate, formats);
+
+    expect(result).toEqual("2023.02.01");
+  });
+});
+
+describe("calculateDatepickerPos", () => {
+  it("should calculate datepicker position correctly in Admin panel", () => {
+    Reflect.defineProperty(document.body, "clientHeight", {
+      value: 800,
+      writable: true
+    });
+
+    Reflect.defineProperty(window, "scrollY", {
+      value: 200,
+      writable: true
+    });
+
+    const datePicker = {
+      getBoundingClientRect: jest.fn(() => ({
+        top: 300
+      })),
+      clientHeight: 100
+    };
+
+    jest.spyOn(document, "querySelector").mockReturnValue({
+      clientHeight: 50
+    });
+
+    const result = calculateDatepickerPos(datePicker);
+
+    expect(result).toEqual(150);
+  });
+});

data/app/packs/src/decidim/datepicker/test/time.test.js

@@ -0,0 +1,227 @@
+import {
+  setHour,
+  setMinute,
+  formatInputTime,
+  changeHourDisplay,
+  changeMinuteDisplay,
+  hourDisplay,
+  minuteDisplay,
+  formatTime
+} from "src/decidim/datepicker/datepicker_functions"
+
+describe("setHour", () => {
+  it("returns the hour in correct 24-hour format", () => {
+    const result = setHour("15:30", 24);
+    expect(result).toBe(15);
+  });
+
+  it("returns the hour in correct 12-hour format when hour is more than 12", () => {
+    const result = setHour("18:45", 12);
+    expect(result).toBe(6);
+  });
+
+  it("returns 12 for 12-hour format when hour is 0", () => {
+    const result = setHour("00:30", 12);
+    expect(result).toBe(12);
+  });
+
+  it("returns the hour in correct 12-hour format when hour is less than or equal to 12", () => {
+    const result = setHour("09:15", 12);
+    expect(result).toBe(9);
+  });
+});
+
+describe("setMinute", () => {
+  it("returns the correct value", () => {
+    const result = setMinute("12:45");
+    expect(result).toBe(45);
+  });
+
+  it("returns the correct minute value when 0", () => {
+    const result = setMinute("08:00");
+    expect(result).toBe(0);
+  });
+
+  it("returns the correct single-digit value", () => {
+    const result = setMinute("09:05");
+    expect(result).toBe(5);
+  });
+});
+
+describe("formatInputTime", () => {
+  const setupDOM = () => {
+    document.body.innerHTML = `
+      <input type="radio" id="period_am_exampleInput" name="period">
+      <input type="radio" id="period_pm_exampleInput" name="period">
+    `;
+  };
+
+  describe("24-hour format", () => {
+    it("returns the value in correct format", () => {
+      setupDOM();
+      const time = "15:30";
+      const format = 24;
+      const input = { id: "exampleInput" };
+
+      const result = formatInputTime(time, format, input);
+
+      expect(result).toBe("15:30");
+    });
+  })
+
+  describe("12-hour format", () => {
+    it("returns the value in correct format and checks the PM radio-button", () => {
+      setupDOM();
+      const time = "12:45";
+      const format = 12;
+      const input = { id: "exampleInput" };
+
+      const result = formatInputTime(time, format, input);
+
+      expect(result).toBe("12:45");
+      expect(document.getElementById("period_pm_exampleInput").checked).toBeTruthy();
+      expect(document.getElementById("period_am_exampleInput").checked).toBeFalsy();
+    });
+
+    it("returns the value in correct format", () => {
+      setupDOM();
+      const time = "00:25";
+      const format = 12;
+      const input = { id: "exampleInput" };
+
+      const result = formatInputTime(time, format, input);
+
+      expect(result).toBe("12:25");
+      // We are not expecting a radio button to be selected here since in a real environment the selected button is not
+      // handled by this method for values < 12
+    });
+  })
+});
+
+
+describe("changeHourDisplay", () => {
+  describe("24-hour format", () => {
+    it("should increase the hour", () => {
+      expect(changeHourDisplay("increase", 10, 24)).toEqual(11);
+    });
+
+    it("should change hour from 23 -> 0", () => {
+      expect(changeHourDisplay("increase", 23, 24)).toEqual(0);
+    });
+
+    it("should decrease the hour", () => {
+      expect(changeHourDisplay("decrease", 10, 24)).toEqual(9);
+    });
+
+    it("should change the hour from 0 -> 23", () => {
+      expect(changeHourDisplay("decrease", 0, 24)).toEqual(23);
+    });
+  });
+
+  describe("12-hour format", () => {
+    it("should increase the hour", () => {
+      expect(changeHourDisplay("increase", 10, 12)).toEqual(11);
+    });
+
+    it("should change hour from 12 -> 1", () => {
+      expect(changeHourDisplay("increase", 12, 12)).toEqual(1);
+    });
+
+    it("should decrease the hour", () => {
+      expect(changeHourDisplay("decrease", 10, 12)).toEqual(9);
+    });
+
+    it("should change the hour from 1 -> 12", () => {
+      expect(changeHourDisplay("decrease", 1, 12)).toEqual(12);
+    });
+  });
+
+  it("should return null when invalid parameter", () => {
+    expect(changeHourDisplay("invalid", 10, 12)).toBeNull();
+  });
+});
+
+describe("changeMinuteDisplay", () => {
+  describe("increase", () => {
+    it("should increase the minute", () => {
+      expect(changeMinuteDisplay("increase", 10)).toEqual(11);
+    });
+
+    it("should change the minute from 59 -> 0", () => {
+      expect(changeMinuteDisplay("increase", 59)).toEqual(0);
+    });
+  });
+
+  describe("decrease", () => {
+    it("should decrease the minute", () => {
+      expect(changeMinuteDisplay("decrease", 10)).toEqual(9);
+    });
+
+    it("should change the minute from 0 -> 59", () => {
+      expect(changeMinuteDisplay("decrease", 0)).toEqual(59);
+    });
+  });
+
+  it("should handle invalid input by returning null", () => {
+    expect(changeMinuteDisplay("invalid", 10)).toBeNull();
+  });
+});
+
+describe("hourDisplay", () => {
+  it("should add a prefix zero for single-digit hours", () => {
+    expect(hourDisplay(5)).toEqual("05");
+    expect(hourDisplay(9)).toEqual("09");
+  });
+
+  it("should not add a prefix zero for double-digit hours", () => {
+    expect(hourDisplay(10)).toEqual(10);
+    expect(hourDisplay(15)).toEqual(15);
+  });
+});
+
+describe("minuteDisplay", () => {
+  it("should add a prefix zero for single-digit minutes", () => {
+    expect(minuteDisplay(5)).toEqual("05");
+    expect(minuteDisplay(9)).toEqual("09");
+  });
+
+  it("should not add a prefix zero for double-digit minutes", () => {
+    expect(minuteDisplay(10)).toEqual(10);
+    expect(minuteDisplay(15)).toEqual(15);
+  });
+});
+
+
+describe("formatTime", () => {
+  const id = "exampleInput";
+
+  it("should convert 12-hour time to 24-hour time for AM", () => {
+    document.body.innerHTML = `
+      <input type="radio" id="period_am_exampleInput" checked> AM
+      <input type="radio" id="period_pm_exampleInput"> PM
+    `;
+
+    expect(formatTime("09:30", 12, id)).toEqual("09:30");
+    expect(formatTime("12:45", 12, id)).toEqual("00:45");
+  });
+
+  it("should convert 12-hour time to 24-hour time for PM", () => {
+    document.body.innerHTML = `
+      <input type="radio" id="period_am_exampleInput"> AM
+      <input type="radio" id="period_pm_exampleInput" checked> PM
+    `;
+
+    expect(formatTime("03:15", 12, id)).toEqual("15:15");
+    expect(formatTime("11:30", 12, id)).toEqual("23:30");
+  });
+
+  it("should return the original time for 24-hour format", () => {
+    document.body.innerHTML = `
+      <input type="radio" id="period_am_exampleInput"> AM
+      <input type="radio" id="period_pm_exampleInput"> PM
+    `;
+
+    expect(formatTime("15:45", 24, id)).toEqual("15:45");
+    expect(formatTime("08:20", 24, id)).toEqual("08:20");
+  });
+});

data/app/packs/src/decidim/direct_uploads/upload_modal.js

@@ -77,9 +77,6 @@ export default class UploadModal {
       uploader.upload.create((error, blob) => {
         if (error) {
           uploader.errors = [error]
-          this.uploadItems.replaceChild(this.createUploadItem(file, [error], { value: 100 }), item);
-          this.updateDropZone();
-
         } else {
           // attach the file hash to submit the form, when the file has been uploaded
           file.hiddenField = blob.signed_id

data/app/packs/src/decidim/editor/extensions/indent/index.js

@@ -13,7 +13,7 @@ const allowedNodeTypes = ["heading", "paragraph"];
 const allowedNodeActive = (editor) => allowedNodeTypes.some((type) => editor.isActive(type));
 
 /**
- * Finds the closest allowed type node from the given position. Traversese the
+ * Finds the closest allowed type node from the given position. Traverses the
  * document depth upwards to search through all the node parents.
  *
  * @param {Object} position The position where to look for

data/app/packs/src/decidim/editor/extensions/video_embed/index.js

@@ -9,7 +9,7 @@ const YOUTUBE_REGEX_GLOBAL = /^(https?:\/\/)?(www\.|music\.)?(youtube\.com|youtu
 const VIMEO_REGEX = /^(https?:\/\/)?(www\.|player\.)?(vimeo\.com)(.+)?$/;
 const VIMEO_REGEX_GLOBAL = /^(https?:\/\/)?(www\.|player\.)?(vimeo\.com)(.+)?$/g;
 
-const isValidYoutubeUrl = (url) => {
+const isValidYouTubeUrl = (url) => {
   return url.match(YOUTUBE_REGEX);
 }
 
@@ -17,7 +17,7 @@ const isValidVimeoUrl = (url) => {
   return url.match(VIMEO_REGEX);
 };
 
-const getEmbedUrlFromYoutubeUrl = (options) => {
+const getEmbedUrlFromYouTubeUrl = (options) => {
   const embedUrl = "https://www.youtube-nocookie.com/embed/";
 
   const { url } = options;
@@ -74,8 +74,8 @@ const getEmbedUrlFromVimeoUrl = (options) => {
 const getEmbedUrlFromVideoUrl = (options) => {
   const { url } = options;
 
-  if (isValidYoutubeUrl(url)) {
-    return getEmbedUrlFromYoutubeUrl(options);
+  if (isValidYouTubeUrl(url)) {
+    return getEmbedUrlFromYouTubeUrl(options);
   } else if (isValidVimeoUrl(url)) {
     return getEmbedUrlFromVimeoUrl(options);
   }