Александр

У тебя видео скачивается полностью. Если хочешь по частям, то надо сделать подобие потока. Blob для этого не подходит, то что в ссылке написано blob: не значит что URL.createObjectURL() принимает только Blob, там еще есть MediaSource.

Потоковые медиа в браузерах работают через Media Source API. Видео для него должно соответствовать определенным требованиям, например фрагментированный mp4. Видео по твоей ссылке таким не является. Можно проверить здесь mp4info.

Если для транспорта используется fetch или XMLHttpRequest, то есть парочка относительно простых способов это реализовать:

1. Через тип ответа ArrayBuffer и заголовок запроса Range. В fetch поддерживается через response.arrayBuffer(), в XMLHttpRequest через responseType='arraybuffer'.
Например.

2. Через тип ответа ReadableStream (Streams API). В fetch поддерживается через response.body, в axios и других xmlhttprequest-основанных библиотеках не поддерживается. Также для Streams API требуется протокол HTTP/2+.
Например 1, 2, 3, 4.

Краткие примеры:

const rangeVideo = async (player, mimeCodec, resource) => {
    const mediaSource = new MediaSource;
    player.src = URL.createObjectURL(mediaSource);
    await new Promise(resolve => mediaSource.onsourceopen = resolve);
    URL.revokeObjectURL(player.src);
    const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);

    const response = await fetch(resource, { method: 'HEAD' });
    const contentLength = response.headers.get('Content-Length');
    const segmentLength = 1 * 1024 * 1024;
    let fetchedLength = -1;

    while (true) {
        if (fetchedLength >= contentLength) break;
        const response = await fetch(resource, {
          headers:{'Range':`bytes=${fetchedLength+1}-${fetchedLength+=segmentLength}`}
        });
        const value = await response.arrayBuffer();
        sourceBuffer.appendBuffer(value);
        await new Promise(resolve => sourceBuffer.onupdateend = resolve);
        //console.count();
        //await delay(2000);
    }
};

const streamVideo = async (player, mimeCodec, resource) => {
    const mediaSource = new MediaSource;
    player.src = URL.createObjectURL(mediaSource);
    await new Promise(resolve => mediaSource.onsourceopen = resolve);
    URL.revokeObjectURL(player.src);
    const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);

    const response = await fetch(resource);
    const readableStream = response.body;
    const reader = readableStream.getReader();

    while (true) {
        const { value, done } = await reader.read();
        if (done) break;
        sourceBuffer.appendBuffer(value);
        await new Promise(resolve => sourceBuffer.onupdateend = resolve);
        //console.count();
    }
};

//const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

const data = [
    document.querySelector('video'),
    'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
    'https://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4',
];

//rangeVideo(...data);
//streamVideo(...data);

Сортировать по indexOf( ID ) в массиве, задающем порядок сортировки:

var data = [
  {ID: 1, country: 'England'},
  {ID: 4, country: 'USA'},
  {ID: 9, country: 'Russia'},
  {ID: 5, country: 'Germany'},
  {ID: 6, country: 'France'},
];

const order = [5,1,9,6,4];

data.sort((a,b) => order.indexOf(a.ID) - order.indexOf(b.ID));

/* [
  {"ID":5,"country":"Germany"},
  {"ID":1,"country":"England"},
  {"ID":9,"country":"Russia"},
  {"ID":6,"country":"France"},
  {"ID":4,"country":"USA"}]
*/

На больших массивах для ускорения:

1. добавить в исходный массив новое поле с порядковым номером, который каждый элемент должен занять после сортировки;
   
2. отсортировать по этому полю.
   

Так будет быстрее, чем на каждой операции сравнения двух элементов искать их индексы во втором массиве.

data = data.map( e => {e.sortBy = order.indexOf(e.ID); return e;} );
data.sort( (a,b) => a.sortBy - b.sortBy);

окей яндекс: custom resizable element
https://habr.com/ru/articles/321612/

Когда вы сравниваете число с массивом, какой вы ожидаете результат?

- i while(<= arr){
+ i while(<= arr.length){

Более того, цикл у вас бесконечный, потому что i в нём не изменяется, так что это даже и хорошо, что он не запускается.

Я так понимаю, вот она, причина, подъехала с версией 18.0.0:

Consistent useEffect timing: React now always synchronously flushes effect functions if the update was triggered during a discrete user input event such as a click or a keydown event.

Т.е., жмёте на кнопку, открывается окно, запускается эффект, устанавливается обработчик клика на document, дальше событие клика по кнопке продолжило всплывать и попало в только что установленный обработчик.

При добавлении задержки, данная проблема уходит

Можете ещё попробовать ловить событие в фазе погружения:

document.addEventListener('click', handleOutsideClick, true);
return () => document.removeEventListener('click', handleOutsideClick, true);

вместо "Happy New Year!", я вижу это: "[object Object]appy New Year!"

Здесь надо разобраться со следующими моментами:

• Что делает метод reduce. Особое внимание следует обратить на то, какие параметры он принимает, и что происходит, если указать не все.
  
• Как работает оператор +. Что бывает, если складываемые значения имеют различные типы.
  
• Как значения одних типов преобразуются в значения других типов. Например, объект в строку.
  

Сортировку применять не обязательно:

const str = strArr.reduce((acc, n) => (acc[n.index] = n.char, acc), []).join('');

Как-то так https://codepen.io/AnnaSummer/pen/wvEJbbq

допустим User это функция-конструктор, или класс.

user = new User()

будет создан объект, у которого есть свойство __proto__ в котором лежит объект, состоящий из одного свойства constructor, которая и есть ваша функция User. (Ну типа такой { constuctor: User }. Если писать через class то мы конструктор явно прям зададим. )
Этот же объект лежит по адресу User.prototype, т.е.
user.__proto__ === User.prototype
Этот объект создается для любой объявленной функции (вообще не обязан, но в V8 вроде так), и например User.prototype.constructor === User

Что такое метод класса, это функция по адресу User.prototype.sayHi (оно же лежит в user.__proto__.sayHi)
Потом, когда мы пишем user.sayHi js проходит по цепочке из свойств __proto__ и ищет там эту функцию, вызывает ее и передает в качестве контекста (this) наш объект user.

А теперь посмотрим разницу с вашим

function User(x,y){
let name = x;
let age = y;

return {
name : name,
age : age,
sayHi: function(){
console.log("My name is " + this.name);
}
}
}

тут все поля и функции лежат в одном объекте, который имеет только дефолтный __proto__ Object.prototype, автоматически присваиваемый при создании объекта через объектный литерал.
При вызове функции несколько раз будут созданы несколько никак не связанных объекта. Прототип у них Object, это единственное что их роднит. Функции будут созданы каждый раз заново.
user1.sayHi !== user2.sayHi
Оператор instanceof не найдет у них общего предка User.

Вот в этом и разница. Можно ли так писать? Можно, только зачем?
Как назвать? Ну допустим функция-фабрика объектов. (не путатьс классом-фабрикой и со статическим фабричным методом, там создаются инстансы классов).

Найдёте теперь сами разницу в ваших примерах 1 и 2?
А так же почему в примере 1 new User() и просто User() дадут совершенно разный результат? И как сделать чтоб было одинаково?

Ошибка в том что columnHeight нужно обновлять по тому же индексу, что и columns.
Ну еще есть проблемы с тем, что исходные данные не упорядочены, а значит массивы будут заполняться не равномерно. Притом сортировать лучше по убыванию.
Так же, если нужен оригинальный порядок, то его нужно сохранить, а потом так же восстанавливать сортировкой.

// Сохраняем исходные индексы и сортируем по высоте по убыванию
const preparedData = data
    .map((e, i) => ({i, e}))
    .sort((a, b) => b.e.height - a.e.height);

for (const el of preparedData) {
    const { height } = el.e;
    // тут никогда не вернет -1, так как мы ищем элемент который точно есть в массиве - минимальный
    const index = columnHeight.indexOf(Math.min(...columnHeight));
    // обновляем данные массивов по выбранному индексу
    columnHeight[index] += height;
    columns[index].push(el);
}

// нормализуем columns
for (let i = 0; i < columns.length; ++i) {
    // восстановим исходный порядок, отсортировав по сохраненному индексу по возрастанию
    columns[i].sort((a, b) => a.i - b.i);
    // избавимся от сохраненных индексов, оставив только исходные объекты
    columns[i] = columns[i].map(({ e }) => e);
}

- if (duplicates.length = 0) {
+ if (duplicates.length === 0) {

Надо явно создать union:

type ITableColumn<
  DataInterface extends object, 
  Keys extends keyof DataInterface = keyof DataInterface
> = {
  [K in Keys]: {
    key: K;
    title: React.ReactNode;
    hasSort?: boolean;
    render?: (item: DataInterface[K]) => React.ReactNode;
  }
}[Keys];

Если в новом объекте должны быть все указанные свойства, вне зависимости от их наличия в исходном объекте:

// имена свойств можно передавать в виде массива
const pick = (obj, keys) => Object.fromEntries(keys.map(n => [ n, obj[n] ]));
const newObj = pick(obj, [ 'b', 'c' ]);

// или как отдельные значения
const pick = (obj, ...keys) => keys.reduce((acc, n) => (acc[n] = obj[n], acc), {});
const newObj = pick(obj, 'b', 'c');

Если отсутствующие свойства не нужны:

const pickExisting = (obj, keys) =>
  Object.fromEntries(keys.filter(n => n in obj).map(n => [ n, obj[n] ]));

Если нужны только собственные свойства:

const pickOwn = (obj, keys) =>
  keys.reduce((acc, n) => (Object.hasOwn(obj, n) && (acc[n] = obj[n]), acc), {});

Если хотим выбирать свойства не только по именам, но и по значениям:

const pick = (obj, filterFn) => Object.fromEntries(Object.entries(obj).filter(filterFn));

const obj1 = pick(obj, ([ key, val ]) => 'abc'.includes(key) && val % 2); // {a: 1, c: 3}
const obj2 = pick(obj, n => n[1] > 2); // {c: 3, d: 5}

.block {
  &__element-2 {}
  &__element-1 {}
  &__element-1:hover &__element-2 {}
}

.block {
  $this: &;
  &__element-2 {}
  &__element-1 {
    &:hover #{$this}__element-2 {}
  }
}

и при повышении вложенности ситуация усугубляется

Не нужно увеличивать вложенность. Это противоречит идеологии БЭМ.