Skip to content

Commit

Permalink
update: scripts and styles in files
Browse files Browse the repository at this point in the history
  • Loading branch information
@sergiomarquezdev
sergiomarquezdev committed Apr 9, 2024
1 parent 29b1490 commit d2fea6a
Show file tree
Hide file tree
Showing 4 changed files with 309 additions and 319 deletions.
2 changes: 2 additions & 0 deletions Dockerfile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ RUN mkdir -p /opt/acestream && \
# Acceso en 'http://${INTERNAL_IP}:6878/webui/player/<ID de Acestream>'.
# Se obtiene del enlace 'acestream://xxxxxxxxxx', donde <ID de Acestream> sería 'xxxxxxxxxx'.
COPY web/player.html /opt/acestream/data/webui/html/player.html
COPY web/styles/styles.css /opt/acestream/data/webui/html/styles.css
COPY web/scripts/scripts.js /opt/acestream/data/webui/html/scripts.js

# Preparar directorio
RUN mkdir /acelink
Expand Down
321 changes: 2 additions & 319 deletions web/player.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,155 +10,7 @@
<script src="https://cdn.jsdelivr.net/npm/showdown@1.9.1/dist/showdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify@2.3.0/dist/purify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet"/>
<style>
body, html, video, .video-js {
margin: 0;
padding: 0;
width: 100vw;
min-height: 40vw;
}

.video-js .vjs-big-play-button {
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}

#acestream-link {
display: flex;
align-items: center;
gap: 1px;
position: absolute;
top: 5px;
left: 33px;
z-index: 100;
background: rgba(255, 255, 255, 0.7);
padding: 2px;
border-radius: 5px;
}

#acestream-link-input {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px 10px;
width: 300px;
margin-left: 5px;
}

#acestream-link button {
border: none;
cursor: pointer;
}

#load-button {
background-color: #007bff;
color: white;
border: none;
padding: 5px 10px;
margin-left: 5px;
border-radius: 3px;
}

#load-button:hover {
background-color: #0056b3;
}

.lang-button {
background-color: transparent;
}

.lang-button:hover {
transform: scale(1.1);
transition-duration: 1ms;
}

#toggle-view {
position: absolute;
top: 5px;
left: 1px;
z-index: 101;
cursor: pointer;
background: rgba(255, 255, 255, 0.7);
padding: 5px;
border-radius: 50%;
}

#links-list {
padding: 10px;
}

.link-item {
cursor: pointer;
margin: 5px 0;
}

#links-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 0 auto;
padding: 20px;
}

#links-list .title {
background-color: #007BFF;
color: white;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
min-height: 50px;
display: flex;
align-items: center;
justify-content: center;
}

#links-list .column {
display: flex;
flex-direction: column;
flex-basis: calc(45%);
background-color: #f8f9fa;
border-radius: 5px;
overflow: hidden;
}

#links-list .name-with-links {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
padding-left: 5px;
}

#links-list .name h3 {
margin: 0;
padding-left: 5px;
}

#links-list .links {
display: flex;
gap: 5px;
}

#links-list .link-button {
border: 1px solid #28a745;
border-radius: 5px;
background-color: white;
color: #28a745;
padding: 5px 10px;
text-align: center;
display: inline-block;
transition: background-color 0.3s, color 0.3s;
text-decoration: none;
font-size: 1em;
}

#links-list .link-button:hover {
background-color: #218838;
color: white;
}


</style>
<link rel="stylesheet" type="text/css" href="./styles.css" as="style">
</head>
<body>
<div id="toggle-view">
Expand All @@ -183,175 +35,6 @@
<button id="load-button" onclick="loadAceStream()">Load</button>
</div>
<div id="links-list"></div>
<script>
// On initial load, load from the link if the parameter is provided
// Obtain the playerId from an external variable
let playerId = "{player_id}";
document.title = `${document.title} [${playerId.substr(0, 7)}]`;
let player = videojs("video");
player.src({
src: `http://127.0.0.1:6878/ace/manifest.m3u8?id=${playerId}`,
type: "application/x-mpegURL", // Adjustment for the correct MIME type for HLS streams.
});
player.play();

function loadAceStream() {
let acestreamLink = document.getElementById("acestream-link-input").value;
// Remove the 'acestream://' prefix if present
acestreamLink = acestreamLink.replace("acestream://", "");
// Check if the ID has more than 1 character
if (acestreamLink.length > 1) {
const playerId = acestreamLink;
document.title = `Ace Link [${playerId.substr(0, 7)}]`;
player.src({
src: `http://127.0.0.1:6878/ace/manifest.m3u8?id=${playerId}`,
type: "application/x-mpegURL",
});
player.play();
} else {
alert("Please insert a valid Acestream link.");
}
}

function loadAcestreamUrl(link) {
document.getElementById('acestream-link-input').value = link;
loadAceStream();
}

// Functionality to show/hide input and adjust toggle icon
document.getElementById("toggle-view").addEventListener("click", function () {
let inputDiv = document.getElementById("acestream-link");
let icon = document.getElementById("toggle-icon");
if (inputDiv.style.display === "none") {
inputDiv.style.display = "flex";
icon.className = "fas fa-eye-slash"; // Change to closed eye icon
} else {
inputDiv.style.display = "none";
icon.className = "fas fa-eye"; // Change to open eye icon
}
});

// Function to change the page language
function changeLanguage(lang) {
// Update the input placeholder
const acestreamLinkInput = document.getElementById("acestream-link-input");
acestreamLinkInput.placeholder = lang === "es" ? "Insertar aquí el enlace Acestream" : "Insert Acestream link here";
// Update the button text
const loadButton = document.getElementById("load-button");
loadButton.innerText = lang === "es" ? "Cargar" : "Load";
}

fetch('https://corsproxy.io/?https://hackmd.io/@67QuUe0VRy-nPCNoJwtsgQ/plan-d')
.then(response => response.text())
.then(html => {
// Use DOMParser to parse the HTML string
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');

// Extract the 'doc' div from the parsed HTML
const docDiv = doc.querySelector('#doc'); // Use .querySelector if .getElementById does not work

// Ensure docDiv is not null and has content
if (docDiv) {
const docHtml = docDiv.innerHTML; // Get the innerHTML of the doc div

// Regex to match the content between the patterns
const contentRegex = /---\s*##([\s\S]*?)&lt;style&gt;/;
const match = docHtml.match(contentRegex);

if (match && match[1]) {
// The desired content is in the first capturing group
const desiredContent = match[1].trim();

console.log(desiredContent);

// Ejecutar la función con el contenido deseado
processAndDisplayContent(desiredContent);

} else {
console.error('The pattern was not found in the HTML content');
}
} else {
console.error('docDiv is null or does not contain any content');
}
})
.catch(error => {
console.error('Error fetching the Markdown content:', error);
});

// Función para procesar el contenido
function processAndDisplayContent(content) {
// Regex actualizado
const titleRegex = /==\*\*(.*?)\*\*==\s*([\s\S]*?)(?=(==\*\*|$))/g;

let match;
let htmlContent = '';

while ((match = titleRegex.exec(content)) !== null) {
const title = match[1];
const body = match[2];

let columnContent = `<div class="title"><h2>${title}</h2></div>`;

const nameAndLinkRegex = /\*\*(.*?)\*\*\s*(?:\[:arrow_forward:\]\((acestream:\/\/.*?)\))+/g;
let nameMatch;
while ((nameMatch = nameAndLinkRegex.exec(body)) !== null) {
const name = nameMatch[1];
const links = nameMatch[0];

columnContent += `<div class="name-with-links">`;
columnContent += `<div class="name"><h3>${name}</h3></div>`;
columnContent += `<div class="links">`;

const linkRegex = /\[:arrow_forward:\]\((acestream:\/\/.*?)\)/g;
let linkMatch;
while ((linkMatch = linkRegex.exec(links)) !== null) {
const link = linkMatch[1];
columnContent += `<a href="${link}" class="link-button"><i class="fa-solid fa-play"></i></a>`;
}

columnContent += `</div>`; // Cierra el div de los enlaces
columnContent += `</div>`; // Cierra el div de name-with-links
}

htmlContent += `<div class="column">${columnContent}</div>`;
}

let finalHtmlContent = postProcessContent(htmlContent);
document.getElementById('links-list').innerHTML = finalHtmlContent;


const linksList = document.getElementById('links-list');
const links = linksList.querySelectorAll('a');
links.forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault(); // Previene la navegación
const acestreamLink = link.getAttribute('href'); // Obtiene el href del enlace
loadAcestreamUrl(acestreamLink); // Llama a tu función con el enlace
});
});
}

function postProcessContent(htmlContent) {
const parser = new DOMParser();
const doc = parser.parseFromString(htmlContent, 'text/html');
const allNameWithLinks = doc.querySelectorAll('.name-with-links');

allNameWithLinks.forEach((div, index) => {
// Si encontramos un '720p', movemos este div al div anterior (el de '1080p').
if (div.querySelector('.name h3').textContent.trim() === '720p' && index > 0) {
const previousDiv = allNameWithLinks[index - 1];
const nameDiv = div.querySelector('.name');
previousDiv.appendChild(nameDiv); // Añade los enlaces de '720p' al 'div' anterior.
const linksDiv = div.querySelector('.links');
previousDiv.appendChild(linksDiv); // Añade los enlaces de '720p' al 'div' anterior.
div.remove(); // Elimina el 'div' de '720p' actual, ya que ahora está vacío.
}
});

return doc.body.innerHTML; // Devuelve el nuevo HTML procesado.
}

</script>
<script src="./scripts.js"></script>
</body>
</html>
Loading

0 comments on commit d2fea6a

Please sign in to comment.