Como adaptei o player da DIO para estudar com a tela dividida

Do que você é capaz e ainda não sabe?

Olá, comunidade! Tudo bem?

Estou começando minha jornada no desenvolvimento de software e uma das coisas que mais me motiva é perceber que já consigo melhorar ferramentas que uso no dia a dia. Essa foi uma dessas ocasiões

Se você, assim como eu, nem sempre tem dois monitores disponíveis para estudar e gosta de fazer anotações no Obsidian ou no Notion enquanto assiste às aulas, provavelmente já enfrentou um problema parecido.

Ao dividir a tela entre a plataforma da DIO e o aplicativo de anotações, o menu lateral das aulas ocupa uma parte considerável do espaço. Como consequência, o vídeo fica menor do que eu gostaria.

Imagem do problema:

Foi pensando nisso que criei uma pequena adaptação para transformar o layout da página em uma única coluna.

O problema

Em determinadas larguras de tela, principalmente ao usar dois aplicativos lado a lado, a página mantém um layout dividido em colunas.

Esse comportamento funciona bem quando a plataforma ocupa toda a tela, mas pode reduzir bastante o espaço disponível para o vídeo quando usamos uma janela menor ou dividimos o monitor com outro aplicativo.

Meu objetivo era conseguir:

aumentar o espaço destinado ao vídeo;
continuar acessando o sumário das aulas;
usar a DIO ao lado do Obsidian ou do Notion;
realizar a adaptação sem modificar permanentemente a plataforma.

A solução

Criei um pequeno script em JavaScript para ser executado no console do navegador.

Ele adiciona uma regra CSS à página, transforma o layout em uma única coluna e habilita a rolagem do conteúdo.

(() => {
let style = document.getElementById('override-grid');

if (!style) {
  style = document.createElement('style');
  style.id = 'override-grid';
  document.head.appendChild(style);
}

style.textContent = `
  .iDHUNI {
    grid-template-columns: 1fr !important;
    grid-template-rows: 4rem 3rem 65vw auto !important;
  }

  .bBIjVk {
    overflow-y: auto !important;
  }
`;
})();

Imagem da solução:

Como utilizar

Abra a página da aula ou formação na plataforma DIO.
Abra as ferramentas de desenvolvimento do navegador pressionando F12.
Acesse a aba Console.
Cole o script.
Pressione Enter.

A alteração será aplicada imediatamente.

Ela é temporária: ao atualizar ou fechar a página, o layout original será restaurado.

Por segurança, nunca execute códigos desconhecidos no console do navegador. Leia e procure entender o que o script faz antes de utilizá-lo.

Vantagens

A adaptação oferece algumas melhorias para quem utiliza a tela dividida:

maior espaço para visualizar o vídeo;
melhor uso em notebooks e monitores menores;
mais facilidade para estudar enquanto utiliza outro aplicativo;
adaptação do conteúdo para proporções diferentes de tela.

Limitações

O sumário das aulas deixa de ficar permanentemente visível ao lado do vídeo. No novo layout, ele passa a fazer parte da única coluna e pode ser acessado por meio da rolagem.

Além disso, as classes .iDHUNI e .bBIjVk podem ser geradas automaticamente pela aplicação. Caso a plataforma seja atualizada e esses nomes sejam alterados, o script também precisará ser atualizado.

Como o script funciona

Função de execução imediata

(() => {
// código
})();

Essa estrutura é chamada de Immediately Invoked Function Expression, ou IIFE.

Ela cria uma função anônima e a executa imediatamente. Uma de suas vantagens é manter as variáveis utilizadas pelo script isoladas, reduzindo o risco de conflito com variáveis da própria página.

Procurando uma regra existente

let style = document.getElementById('override-grid');

Essa linha procura na página um elemento com o identificador override-grid.

Caso o script já tenha sido executado anteriormente, ele reutiliza esse elemento em vez de criar várias tags <style> iguais.

Criando a tag de estilo

if (!style) {
style = document.createElement('style');
style.id = 'override-grid';
document.head.appendChild(style);
}

Se o elemento ainda não existir, o script:

cria uma tag <style>;
atribui a ela o identificador override-grid;
adiciona a nova tag ao <head> da página.

Adicionando o CSS

style.textContent = `
/* regras CSS */
`;

A propriedade textContent adiciona as regras CSS dentro da tag <style> criada anteriormente.

Transformando o layout em uma coluna

.iDHUNI {
grid-template-columns: 1fr !important;
grid-template-rows: 4rem 3rem 65vw auto !important;
}

A propriedade grid-template-columns: 1fr determina que o grid tenha apenas uma coluna.

Na propriedade grid-template-rows, o terceiro valor controla o tamanho da área destinada ao vídeo, você alterar aqui se não gostou do tamanho do vídeo:

65vw

A unidade vw representa uma porcentagem da largura visível da janela. Por isso, esse valor pode ser ajustado de acordo com o tamanho da tela.

Habilitando a rolagem

.bBIjVk {
overflow-y: auto !important;
}

Essa regra permite a rolagem vertical quando o conteúdo ultrapassa o espaço disponível no novo layout.

Plus

poderia sim transformar em extensão, um meio termo útil que encontrei foi o Greasemonkey, como utilizo o zen browser, que é basicamente uma modificação do Firefox, foi o mais indicado.

Para automatizar você pode procurar por Userscripts compatíveis com o seu browser. Tampermonkey é o mais popular, é só basicamente adicionar o navegador, salvar o script na extensão e tá pronto, sem precisar abrir mais console.

O código múda pouco, ele fica assim:

// ==UserScript==
// @name         DIO Layout Fix
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Melhora visualização DIO em telas pequenas
// @author       Seu Nome
// @match        *://*.dio.me/*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';
  // >>> SEU CÓDIGO AQUI (exatamente como você criou) <<<
  let style = document.getElementById('override-grid');
  if (!style) {
      style = document.createElement('style');
      style.id = 'override-grid';
      document.head.appendChild(style);
  }
  style.textContent = `
      .iDHUNI {
          grid-template-columns: 1fr !important;
          grid-template-rows: 4rem 3rem 45vw auto !important;
      }
      .bBIjVk {
          overflow-y: inherit !important;
      }
  `;
})();

Por que decidi compartilhar?

É uma alteração simples, mas fiquei muito feliz ao perceber que consegui resolver um problema que me incomodava desde que comecei a utilizar a plataforma.

A ideia surgiu enquanto eu assistia a uma aula de UI/UX Design. Comecei a observar o layout, pensar em como ele poderia se adaptar melhor ao meu contexto e me perguntei:

Como alguém de fora da equipe de desenvolvimento poderia personalizar essa experiência usando apenas as ferramentas disponíveis no navegador?

Lembrei de outras situações em que precisei executar scripts no console para automatizar tarefas repetitivas e decidi experimentar.

Não foi necessário criar uma solução complexa. Bastou entender o problema, inspecionar a estrutura da página e utilizar JavaScript e CSS para adaptar o layout.

Para quem está começando na área, esse tipo de experiência mostra que aprender desenvolvimento não se resume a concluir cursos ou obter certificados. Também significa observar problemas, formular perguntas, testar possibilidades e utilizar o conhecimento para modificar, ainda que de forma pequena, o mundo ao nosso redor.

Em uma área com tantas ferramentas, tendências, gurus e respostas prontas, às vezes procuramos desesperadamente pela tecnologia certa ou pelo caminho perfeito.

Talvez a pergunta mais importante não seja apenas:

“Em qual habilidade devo investir todo o meu tempo?”

Talvez também seja:

“O que consigo construir com o conhecimento e os recursos que tenho agora?”

E isso é algo que ouvi muito aqui, obrigado Felipão da DIO!

Esta é minha primeira contribuição desse tipo, então sugestões e melhorias são muito bem-vindas.

Uma pequena contribuição, feita com muito carinho.

Observação: esta solução não modifica permanentemente o produto. Ela apenas altera temporariamente a apresentação da página no navegador do usuário. Caso esse tipo de conteúdo contrarie alguma política da comunidade, peço desculpas e fico à disposição para realizar os ajustes necessários.