-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 849a113
Showing
17 changed files
with
294 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 = "🎥"; | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
}] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
} | ||
); | ||
}); |