Skip to content

Commit

Permalink
Otimização e correção.
Browse files Browse the repository at this point in the history 
Aplicado boas práticas e corrigido alguns bugs.
  • Loading branch information
@AndreBezBirolo
AndreBezBirolo authored May 7, 2021
1 parent 6fd5859 commit a855078
Showing 1 changed file with 77 additions and 88 deletions.
165 changes: 77 additions & 88 deletions embed-optimizer.js
View file
Original file line number Diff line number Diff line change
@@ -1,117 +1,108 @@
document.addEventListener("DOMContentLoaded", function () {
async function EmbedOptimizer() {
let alternativeImages = document.querySelectorAll('img.embed-optimize');
for (let element of alternativeImages) {
let type = element.dataset["embedType"],
time = element.dataset["embedTime"] || '2000',
title = element.getAttribute("alt") || 'Iframe',
width = element.getAttribute('width'),
height = element.getAttribute('height'),
src = element.dataset["src"],
youtubeID,
vimeoID,
thumbButtonPlayer = element.dataset["playerButton"] || 'https://addplaybuttontoimage.way4info.net/Images/Icons/20.png',
mapsID = element.dataset["maps"],
mediaURL = element.dataset["media"];


const iframe = document.createElement('iframe');
iframe.setAttribute('class', 'embed-optimize');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('title', title);
if (width) iframe.setAttribute('width', width);
if (height) iframe.setAttribute('height', height);
if (mapsID) iframe.setAttribute('src', "https://www.google.com.br/maps/" + mapsID)
else iframe.setAttribute('src', src)


if (mediaURL) {
const youtube_1 = mediaURL.match(/embed\/([a-z0-9_A-Z=:#*%-]*)/),
youtube_2 = mediaURL.match(/watch\?v=([a-z0-9_A-Z=:#*%-]*)/),
vimeo_1 = mediaURL.match(/video\/([a-z0-9_A-Z=:#*%-]*)/),
vimeo_2 = mediaURL.match(/vimeo\.com\/([a-z0-9_A-Z=:#*%-]*)/);

if (youtube_1) youtubeID = youtube_1[1]
else if (youtube_2) youtubeID = youtube_2[1]
else if (vimeo_1) vimeoID = vimeo_1[1]
else if (vimeo_2) vimeoID = vimeo_2[1]


const playerButton = document.createElement('div');
playerButton.style.content = ''
playerButton.style.display = 'block'
playerButton.style.position = 'absolute'
playerButton.style.width = '100%'
playerButton.style.height = '100%'
playerButton.style.top = '0'
playerButton.style.background = 'url("' + thumbButtonPlayer + '") center center no-repeat'
playerButton.style.backgroundSize = '75px'
function EmbedOptimizer() {

const EMBED_ITEMS = document.querySelectorAll('img.embed-optimize');

for (let IMG of EMBED_ITEMS) {

const TYPE = IMG.dataset['embedType'];
const TIME = IMG.dataset['embedTime'] || '2000';
const BUTTON_PLAYER_URL = IMG.dataset['embedPlayerButton'] || 'https://addplaybuttontoimage.way4info.net/Images/Icons/20.png';
const MAPS_ID = IMG.dataset['embedMaps'];
const VIDEO_URL = IMG.dataset['embedVideo'];
const SRC = IMG.dataset['embedSrc'];
const TITLE = IMG.getAttribute('alt') || 'Iframe';
const WIDTH = IMG.getAttribute('width');
const HEIGHT = IMG.getAttribute('height');
let youtubeID;
let vimeoID;

const IFRAME = document.createElement('iframe');
IFRAME.setAttribute('class', 'embed-optimize');
IFRAME.setAttribute('frameborder', '0');
IFRAME.setAttribute('title', TITLE);
IFRAME.setAttribute('width', WIDTH);
IFRAME.setAttribute('height', HEIGHT);
MAPS_ID ? IFRAME.setAttribute('src', `https://www.google.com.br/maps/${MAPS_ID}`) : IFRAME.setAttribute('src', SRC)


if (VIDEO_URL) {

const YOUTUBE_1 = VIDEO_URL.match(/embed\/([a-z0-9_A-Z=:#*%-]*)/);
const YOUTUBE_2 = VIDEO_URL.match(/watch\?v=([a-z0-9_A-Z=:#*%-]*)/);
const VIMEO_1 = VIDEO_URL.match(/video\/([a-z0-9_A-Z=:#*%-]*)/);
const VIMEO_2 = VIDEO_URL.match(/vimeo\.com\/([a-z0-9_A-Z=:#*%-]*)/);

if (YOUTUBE_1) youtubeID = YOUTUBE_1[1]
else if (YOUTUBE_2) youtubeID = YOUTUBE_2[1]
else if (VIMEO_1) vimeoID = VIMEO_1[1]
else if (VIMEO_2) vimeoID = VIMEO_2[1]

const PLAYER_BUTTON = document.createElement('div');
PLAYER_BUTTON.style.content = '';
PLAYER_BUTTON.style.display = 'block';
PLAYER_BUTTON.style.position = 'absolute';
PLAYER_BUTTON.style.width = '100%';
PLAYER_BUTTON.style.height = '100%';
PLAYER_BUTTON.style.top = '0';
PLAYER_BUTTON.style.background = `url(" ${BUTTON_PLAYER_URL} ") center center no-repeat`;
PLAYER_BUTTON.style.backgroundSize = '75px';

let elementSwitch = document.createElement('div');
elementSwitch.classList.add('embed-optimize-container');

if (width) elementSwitch.style.width = width;
if (height) elementSwitch.style.height = height;
if (WIDTH) elementSwitch.style.width = WIDTH;
if (HEIGHT) elementSwitch.style.height = HEIGHT;
elementSwitch.style.position = 'relative';

if (youtubeID) {

element.setAttribute("src", "https://img.youtube.com/vi/" + youtubeID + "/hqdefault.jpg");
element.style.objectFit = "cover";
iframe.setAttribute("src", "https://www.youtube.com/embed/" + youtubeID + "?autoplay=1&mute=1");

elementSwitch.appendChild(element.cloneNode(true))
element.replaceWith(elementSwitch)
elementSwitch.appendChild(playerButton)
element = elementSwitch

IMG.setAttribute("src", `https://img.youtube.com/vi/${youtubeID}/hqdefault.jpg`);
IMG.style.objectFit = "cover";
IFRAME.setAttribute("src", `https://www.youtube.com/embed/${youtubeID}?autoplay=1&mute=1`);
replaceBlocks(elementSwitch, PLAYER_BUTTON);
} else if (vimeoID) {
await fetch(`https://vimeo.com/api/v2/video/${vimeoID}.json`)
.then(response => {
return response.text();
})
.then(data => {
const {thumbnail_large} = JSON.parse(data)[0];
const large = `${thumbnail_large}`;
element.setAttribute("src", large);
})
.catch(error => {
console.log(error);
});
element.style.objectFit = "cover";
iframe.setAttribute("src", "https://player.vimeo.com/video/" + vimeoID + "?autoplay=1&loop=1&muted=1");
elementSwitch.appendChild(element.cloneNode(true))
element.replaceWith(elementSwitch)
elementSwitch.appendChild(playerButton)
element = elementSwitch

async function fetchVimeo(url) {
const response = await fetch(url).then((response) => response.json());
const {thumbnail_large} = await response[0];
IMG.setAttribute("src", thumbnail_large);
replaceBlocks(elementSwitch, PLAYER_BUTTON)
}
fetchVimeo(`https://vimeo.com/api/v2/video/${vimeoID}.json`);
IMG.style.objectFit = "cover";
IFRAME.setAttribute("src", `https://player.vimeo.com/video/${vimeoID}?autoplay=1&loop=1&muted=1`);
}
}

function generateIframe() {
element.replaceWith(iframe);
function replaceBlocks(elementSwitch, PLAYER_BUTTON) {
elementSwitch.appendChild(IMG.cloneNode(true));
IMG.replaceWith(elementSwitch);
elementSwitch.appendChild(PLAYER_BUTTON);
IMG = elementSwitch;
}

function generateIframe() {
IMG.replaceWith(IFRAME);
}

switch (type) {
switch (TYPE) {
case 'onclick':
element.style.cursor = "pointer";
element.addEventListener('click', generateIframe);
IMG.style.cursor = "pointer";
IMG.addEventListener('click', generateIframe);
break;
case 'onmouseover':
element.addEventListener('mouseover', generateIframe);
IMG.addEventListener('mouseover', generateIframe);
break;
case 'ondelay':
setTimeout(function () {
generateIframe();
}, time);
}, TIME);
break;
default:
case 'onvisible':
const halfWindow = window.innerHeight * 0.8;

function isOnView() {
const elementTop = element.getBoundingClientRect().top;
const elementTop = IMG.getBoundingClientRect().top;
const isSectionVisible = (elementTop - halfWindow) < 0;
if (isSectionVisible) generateIframe();
}
Expand All @@ -120,8 +111,6 @@ document.addEventListener("DOMContentLoaded", function () {
window.addEventListener('scroll', isOnView);
break;
}


}
}

Expand Down

0 comments on commit a855078

Please sign in to comment.