wiki:ReDesign/VideoUploader

Video uploader

Do uživatelského rozhraní byl implementován HTML5 uploader, který vychází z komponenty Pure HTML5 file upload (https://www.script-tutorials.com/pure-html5-file-upload/).

JS uploaderu byl přepracová tak, aby byl přizpůsoben pro upload videosouboru. Z JS byl odstraněn prvek, který prováděl načítání vybraného souboru do paměti prohlížeče a generoval náhled souboru prouživatele. V případě videa by byl takový postup nepřijatelný, jelikožvelikost odesílaného videa může být až 2GB.

Při výběru souboru je typ souboru omezen pouze na video soubory,které jsou podporovány serverovou částí video archivu. Po provedení uploadu systém video dále zpravovává. Je provedeno generování náhledových obrázků a převod videa pro přehrávání v prohlížeči. Následující část JS provádí kontrolu povolených typů souborů.Po kontrole následuje test na velikost zvoleného souboru. V případě,že nastane chyba, je uživateli zobrazeno chybové hlášení.

1. Chybové hláškypro uživatele

Chybové hlášky jsou generovány do stylu MUNI frameworku. Ve výchozím stavu jsou skryté. JS při chybě zobrazí konkrétní hlášku. Příklad pro chybu odeslání videa:

<div id="error">
  <div class="message message--common message--common-error">
    <span class="message__icon icon icon-exclamation-triangle"></span>
    <h2 class="message__title">
      <f:message key="admin.message.error" />
    </h2>
    <p class="message__desc">
      <f:message key="video.upload.error" />
    </p>
  </div> 
</div>

2. Omezení typu souboru pro výběr

Typ souboru kteý je umožněn vybrat je omezen na úrovni HTML5 file inputu a na úrovni JS, který validuje soubor.

Při výběru souboru se zavolá JS metoda pro zpracování souboru.

<s:file name="SolmetraUploader" accept="video/avi,video/x-msvideo,video/mpeg,video/mp4,video/m4v,video/x-matroska,video/mkv" id="videoFile" onchange="fileSelected();"/>

Validace typu souboru na úrovni JS:

var rFilter = /^(video\/(avi|x-msvideo|mpeg|mp4|m4v|x-matroska|mkv))$/i;
if (! rFilter.test(files[0].type)) {
  document.getElementById('error').style.display = 'block';
  spinner.classList.add('no-display');
  return;
}

3. Omezení na velikost souboru
Velikost souboru může být až 2GB

 // little test for filesize
 if (oFile.size > iMaxFilesize) {
  document.getElementById('warnsize').style.display = 'block';
  spinner.classList.add('no-display');
  return;
}

4. Drag&drop

Do uploaderu byla implementována možnost přetažení souboru přímo do webového prohlížeče – drag&drop. Následující funkce zajišťuje předání zvoleného souboru do formuláře.

//when file is draged to drop zone
function fileDraged(event) {
  //add spinner 
  var spinner = document.getElementById('file_upload_spinner');
  spinner.classList.remove('no-display');
    
  // get dragged files
  event.preventDefault();
  files = event.dataTransfer.files;
    
  //error only 1 selected file
  if (files.length > 1) {
    document.getElementById('error1').style.display = 'block';
    spinner.classList.add('no-display');
    return;
  }
    
  //add file to form input and run file selected
  document.getElementById('videoFile').files = files;
  fileSelected();
}

5. File selected

Zobrazení informací o vybraném videu, zobrazení tlačítka pro zahájení odesílání.

//show information about file in browser and show button for start uploading
sResultFileSize = bytesToSize(oFile.size);
document.getElementById('fileinfo').style.display = 'block';
document.getElementById('filename').innerHTML = oFile.name;
document.getElementById('filesize').innerHTML = sResultFileSize;
document.getElementById('filetype').innerHTML = oFile.type;
spinner.classList.add('no-display');
document.getElementById('uploadFile').classList.remove('no-display');

6. Odesílání a progress bar

Příprava souboru pro odeslání, vytvoření Ajaxového požadavku, aktualizace progress baru.

//prepare data for the send 
 var vFD = new FormData();
 vFD.append('cupload', document.getElementsByName("cupload").valueOf()[0].value);
 vFD.append('video.id', document.getElementsByName("video.id").valueOf()[0].value);
 vFD.append('param1', document.getElementsByName("param1").valueOf()[0].value);
 vFD.append('__fp', document.getElementsByName("__fp").valueOf()[0].value);
 vFD.append('_sourcePage', document.getElementsByName("_sourcePage").valueOf()[0].value);
 vFD.append('SolmetraUploader', document.getElementById('videoFile').files[0]);
    
 // create XMLHttpRequest object, adding few event listeners, and POSTing our data
 var oXHR = new XMLHttpRequest();        
 oXHR.upload.addEventListener('progress', uploadProgress, false);
 oXHR.addEventListener('load', uploadFinish, false);
 oXHR.addEventListener('error', uploadError, false);
 oXHR.addEventListener('abort', uploadAbort, false);
 oXHR.open('POST', '/WMA/video');
 oXHR.send(vFD);

 // set inner timer
 oTimer = setInterval(doInnerUpdates, 300);
Last modified 19 months ago Last modified on 04/14/19 21:28:39