initial commit

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Paul Cortes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,30 @@
+<p align="center">
+<img src="./images//icon128.png" alt="Logo Platzi Modo Cine"/>
+</p>
+<h1 align="center"> Hack4U Modo Cine</h1>
+
+## Agrega un botón al menu superior para cambiar entre el modo normal y el modo cine.
+
+## Ejemplo:
+
+![](./img-examples/example.gif)
+
+## Características
+
+- Se mantiene la opción de modo cine incluso en el cambio de videos o recarga de la web
+- Se guarda el estado de modo Cine en el `localStorage`
+
+
+## Instalación
+
+Cuando este disponible en la Chrome Store dejaré el enlace por aquí.
+
+Al instalarla solo tienes que refrescar la página, el boton para intercambiar entre el modo cine y el modo normal aparecerá en la parte superior de la siguiente forma:
+
+- 🎥 : para habilitar el modo cine
+- ❌ : para deshabilitar el modo cine
+
+dentro del popup de la extension hay un selector para intercambiar entre modos, por ahora hay 2 modos:
+
+![](./img-examples/menu.png)
+

hack4uModoCine.js

@@ -0,0 +1,137 @@
+// configurando variables de inicialización
+
+const CONSTANTS = {
+  menuSelector:
+    ".masterstudy-course-player-header.masterstudy-course-player-header_dark-mode",
+  videoContainerSelector: ".masterstudy-course-player-lesson",
+  optionClass: "masterstudy-course-player-header__dark-mode",
+  optionStyle: "display: flex; align-items: center;justify-content: center;",
+  btnModoCineId: "btnModoCine",
+  elementorContainerSelector:
+    ".elementor-container.elementor-column-gap-default",
+  keyModoCineActivado: "modoCineActivado",
+  keySizeModoCine: "sizeModoCine",
+};
+
+CONSTANTS.btnModoCineSelector = `#${CONSTANTS.btnModoCineId}`;
+
+let sizeModoCine = localStorage.getItem(CONSTANTS.keySizeModoCine);
+let modoCineActivado = JSON.parse(
+  localStorage.getItem(CONSTANTS.keyModoCineActivado)
+);
+window.modoCineActivado = Boolean(modoCineActivado);
+
+if (sizeModoCine && window.modoCineActivado) {
+  changeSizeModoCine(sizeModoCine);
+}
+
+function changeSizeModoCine(size) {
+  window.sizeModoCine = size;
+  localStorage.setItem(CONSTANTS.keySizeModoCine, window.sizeModoCine);
+}
+
+function changeModoCineActivado(estado) {
+  window.modoCineActivado = estado;
+  localStorage.setItem(
+    CONSTANTS.keyModoCineActivado,
+    JSON.stringify(window.modoCineActivado)
+  );
+}
+
+window.addEventListener("load", function (event) {
+  this.setTimeout(() => {
+    let menu = document.querySelector(CONSTANTS.menuSelector);
+
+    let spanIcon = document.createElement("span");
+    spanIcon.setAttribute("id", CONSTANTS.btnModoCineId);
+    spanIcon.innerHTML = window.modoCineActivado ? "❌" : "🎥";
+
+    let option = document.createElement("div");
+    option.classList.add(CONSTANTS.optionClass);
+    option.setAttribute("style", CONSTANTS.optionStyle);
+    option.appendChild(spanIcon);
+
+    menu.insertBefore(option, menu.children[4]);
+    loadCurrentSize();
+    option.addEventListener("click", () => {
+      modoCine();
+    });
+  }, 1000);
+});
+
+chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
+  const handleSetSize = ({ size }) => {
+    changeSizeModoCine(size);
+    changeModoCineActivado(size != "");
+    console.log("%csize = " + size, "color:green;font-size:20px;");
+    loadCurrentSize();
+    sendResponse({ status: "ok" });
+  };
+
+  const handleGetCurrentStatus = () => {
+    sendResponse({
+      sizeModoCine: window.modoCineActivado ? window.sizeModoCine : "",
+    });
+  };
+
+  const options = {
+    setSize: () => handleSetSize(request),
+    getCurrentStatus: handleGetCurrentStatus,
+  };
+  options[request.type]();
+});
+
+function loadCurrentSize() {
+  console.log(
+    "%cloadCurrentSize: window.sizeModoCine = " + window.sizeModoCine,
+    "color:green;font-size:20px;"
+  );
+  setAttributeElementsToUpdateSize();
+  let spanIcon = document.querySelector(CONSTANTS.btnModoCineSelector);
+  spanIcon.innerHTML = window.modoCineActivado ? "❌" : "🎥";
+}
+
+function modoCine() {
+  const enableDisableModoCine = {
+    [true]: disableModoCine,
+    [false]: enableModoCine,
+  };
+  enableDisableModoCine[window.modoCineActivado]();
+  changeModoCineActivado(!window.modoCineActivado);
+}
+
+function enableModoCine() {
+  if (!window.sizeModoCine || window.sizeModoCine == "") {
+    changeSizeModoCine("2200px");
+  }
+
+  setAttributeElementsToUpdateSize();
+
+  let spanIcon = document.querySelector(CONSTANTS.btnModoCineSelector);
+  spanIcon.innerHTML = "❌";
+}
+
+function setAttributeElementsToUpdateSize() {
+  let elementsToUpdateSize = [
+    CONSTANTS.videoContainerSelector,
+    CONSTANTS.elementorContainerSelector,
+  ];
+  elementsToUpdateSize.forEach((selector) => {
+    let container = document.querySelector(selector);
+    container.setAttribute("style", `max-width: ${window.sizeModoCine}`);
+  });
+}
+
+function disableModoCine() {
+  let elementsToUpdateSize = [
+    CONSTANTS.videoContainerSelector,
+    CONSTANTS.elementorContainerSelector,
+  ];
+  elementsToUpdateSize.forEach((selector) => {
+    let container = document.querySelector(selector);
+    container.removeAttribute("style");
+  });
+
+  let spanIcon = document.querySelector(CONSTANTS.btnModoCineSelector);
+  spanIcon.innerHTML = "🎥";
+}

manifest.json

@@ -0,0 +1,24 @@
+{
+    "manifest_version": 3,
+    "name": "Hack4u Modo Cine",
+    "description": "Agrega un modo cine al reproductor de Hack4u",
+    "version": "2.0",
+    "icons": {
+        "16": "./images/icon16.png",
+        "48": "./images/icon48.png",
+        "128": "./images/icon128.png"
+    },
+    "action": {
+        "default_icon": {
+            "16": "./images/icon16.png",
+            "48": "./images/icon48.png",
+            "128": "./images/icon128.png"
+        },
+        "default_popup": "./popup.html"
+    },
+    "content_scripts": [{
+        "matches": ["https://hack4u.io/*"],
+        "js": ["./hack4uModoCine.js"],
+        "run_at": "document_idle"
+    }]    
+}

popup.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
+      crossorigin="anonymous"
+    />
+    <title>Hack4u Modo Cine</title>
+    <style>
+      body {
+        width: 200px;
+        padding: 10px;
+        background-color: #000000;
+        color: white;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Hack4u Modo Cine</h1>
+    <h3>By Kerkox (Paul Cortes)</h3>
+    <select class="form-select" id="size-mode" value="0">
+      <option value="0">Normal</option>
+      <option value="1">Modo 1</option>
+      <option value="2">Modo 2</option>
+    </select>
+    <script src="popup.js"></script>
+  </body>
+</html>

popup.js

@@ -0,0 +1,50 @@
+
+let sizeModoCine = localStorage.getItem("sizeModoCine");
+
+ window.sizeModoCine = sizeModoCine;
+
+function changeSizeModoCine(size) {
+  window.sizeModoCine = size;
+  localStorage.setItem("sizeModoCine", window.sizeModoCine);
+}
+
+if (sizeModoCine) {
+  loadModoCine(sizeModoCine);  
+}
+
+function loadModoCine(sizeModoCine) {
+  let size = sizeModoCine == "1550px" ? 1 : sizeModoCine == "2200px" ? 2 : 0;
+  let option = document.querySelector("#size-mode option[value='" + size + "']");
+  option.setAttribute("selected", "selected");
+}
+
+let sizeMode = document.querySelector("#size-mode");
+sizeMode.addEventListener("change", function (event) {
+  console.log("evenbt",{event});
+  console.log("sizeMode",{sizeMode});
+  let sizes = {
+    0: "",
+    1: "1550px",
+    2: "2200px",
+  }
+  let size = sizes[sizeMode.value];
+  console.log("Size: ", size);
+  changeSizeModoCine(size);
+  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+    chrome.tabs.sendMessage(
+      tabs[0].id,
+      { type: "setSize", size: size },
+      function (_) {}
+    );
+  });
+});
+
+chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+  chrome.tabs.sendMessage(
+    tabs[0].id,
+    { type: "getCurrentStatus" },
+    function (response) {
+      loadModoCine(response.sizeModoCine);
+    }
+  );
+});