Br0k3n C1rcu1t

Когда ты ловишь "play" событие от сокета, ты вызываешь метод play() на своем плеере. Это побуждает плеер кинуть событие "play", которое ты тоже ловишь и отправляешь обратно на сервер. В итоге это зацикливается и бесконечно продолжается.

Но это можно пофиксить. Введи какой-нибудь флаг, который будет показывать, вызван ли метод play() (или другие) твоим кодом или же пользователем. Потом этот флаг ты будешь проверять перед тем, как отправить событие на сервер.

$(document).ready(function() {
    var socketio = io();

    let player = new Playerjs({
        id: "player",
        file: JSON.parse($("#player").attr("data-links"))
    });

    const playerFrame = $("#player"),
          messagesBox = $(".chat-box .messages"),
          messagesScroll = $(".chat-box"),
          chatInputs = $(".chat-inputs");

    let isApiCall = false; // флаг для отслеживания источника вызова

    socketio.on("play", (data) => {
        if (!player.api("playing")) {
            isApiCall = true; // устанавливаем флаг, что это вызов через API
            player.api("play");
            isApiCall = false; // сбрасываем флаг
        }
        player.api("seek", data.time);
    });

    socketio.on("pause", (data) => {
        if (player.api("playing")) {
            isApiCall = true; // устанавливаем флаг, что это вызов через API
            player.api("pause");
            isApiCall = false; // сбрасываем флаг
        }
    });

    socketio.on("seek", (data) => {
        isApiCall = true; // устанавливаем флаг, что это вызов через API
        player.api("seek", data.time);
        isApiCall = false; // сбрасываем флаг
    });

    playerFrame.on("play", (event) => {
        console.log(event.type)
        if(!isApiCall){ // отправляем событие только если это не вызов через API
            socketio.emit("play", { time: player.api("time") });
        }
    });

    playerFrame.on("pause", (event) => {
        console.log(event.type)
        if(!isApiCall){ // отправляем событие только если это не вызов через API
            socketio.emit("pause", {});
        }
    });

    playerFrame.on("seek", (event) => {
        console.log(event.type)
        if(!isApiCall){ // отправляем событие только если это не вызов через API
            socketio.emit("seek", { time: player.api("time") });
        }
    });
});

Чтобы решить эту задачу, вы можете использовать следующий подход:

Создайте функцию, которая будет принимать строку и возвращать часть строки до символа ":".
Пройдитесь по всем элементам с классом "result_text_item" и сравните начало textContent текущего элемента с началом textContent всех предыдущих элементов, используя созданную функцию.
Если найдено совпадение, удалите текущий элемент.
Вот пример кода на JavaScript, который можно использовать для решения этой задачи:

// Функция для получения начала строки до символа ":"
function getStartOfText(text) {
  return text.split(":")[0];
}

// Получаем все элементы с классом "result_text_item"
let items = Array.from(document.getElementsByClassName("result_text_item"));

// Проходимся по всем элементам с конца (так как нам нужно удалять последний созданный элемент)
for (let i = items.length - 1; i >= 0; i--) {
  // Получаем начало textContent текущего элемента
  let currentItemStart = getStartOfText(items[i].textContent);
  
  // Проверяем, есть ли совпадения с началом textContent других элементов
  for (let j = 0; j < i; j++) {
    if (getStartOfText(items[j].textContent) === currentItemStart) {
      // Если найдено совпадение, удаляем текущий элемент и прерываем цикл
      items[i].remove();
      break;
    }
  }
}

Обратите внимание, что этот код удаляет все последующие элементы, которые начинаются так же, как и любой предыдущий элемент. Если вам нужно проверять только совпадения с предыдущим элементом, вы можете слегка изменить этот код.

Проблема, по-видимому, связана с опечаткой в коде. В строке Vue.config.procutionTip = false; слово "procutionTip" скорее всего должно быть "productionTip".

Vue.js использует свойство productionTip для вывода предупреждений о разработке в консоли при запуске приложения. Если вы установите его в false, то эти предупреждения будут отключены.

Попробуйте исправить эту опечатку и снова запустите свой код. Ваш исправленный код должен выглядеть так:

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({ render: (h) => h(App) }).$mount("#app");

Если вы все еще столкнётесь с ошибками после исправления этой опечатки, это может быть связано с конфигурацией TypeScript в вашем проекте, и вам, возможно, придется проверить файл tsconfig.json. Но исправление опечатки должно помочь устранить описанную вами проблему

В Storybook декораторы - это способ обеспечения произвольных компонентов-оберток для историй. Они могут быть использованы для обертывания историй в "декораторы" (то есть контекст компонента), предоставления данных и создания или изменения поведения каким-то образом.

Из предоставленного файла preview.ts видно, что были попытки использовать декоратор (styleDecorator). Однако использование, похоже, неверное.

Вот исправленный способ использования декоратора:

import type { Preview } from '@storybook/react';
import { styleDecorator } from '../../src/shared/config/storybook/styleDecorator/styleDecorator';

const preview: Preview = {
    parameters: {
        actions: { argTypesRegex: '^on[A-Z].*' },
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/,
            },
        },
    },

    decorators: [(Story) => (
        <styleDecorator>
            <Story />
        </styleDecorator>
    )],
}
export default preview;

В этой исправленной версии Story отображается как дочерний элемент styleDecorator, предполагая, что styleDecorator - это компонент React, который применяет желаемые стили.

Если styleDecorator - это функция, которая возвращает компонент React, код будет выглядеть так:

decorators: [(Story) => {
    const DecoratorComponent = styleDecorator();
    return <DecoratorComponent><Story /></DecoratorComponent>
}],

Убедись, что styleDecorator правильно определён и экспортирован из указанного пути файла.

Помните, что декоратор, определенный в preview.ts, будет применен ко всем историям в вашем Storybook. Если вы хотите применить декоратор к определенным историям, вы должны определить его в конкретном файле истории.

Не забудь заменить styleDecorator на реальную реализацию вашего декоратора. styleDecorator должен предоставлять глобальные стили, которые хочешь применить

Читайте лучше Д. Кнута, лучше в старом издании, правда про черно-красные деревья там их нет, но это можете погуглить. А потом у же переходить к js

В объект можно засунуть массив и про нему пробегаться а в массив еще можно объектов накидать. Можно задать как свойство и к нему обращаться.. Слишком расплывчата задача

Прочтика это друг по CSS модули во вью

https://vue-loader.vuejs.org/ru/guide/css-modules....

Предлагаю прогулятся до MDN

Метод concat() возвращает новый массив, состоящий из массива, на котором он был вызван, соединённого с другими массивами и/или значениями, переданными в качестве аргументов.

Соединение двух массивов
Следующий код соединяет два массива:

var alpha = ['a', 'b', 'c'],
    numeric = [1, 2, 3];

var alphaNumeric = alpha.concat(numeric);

console.log(alphaNumeric); // Результат: ['a', 'b', 'c', 1, 2, 3]

1) Возьми экстешн для хрома jqueryinject и поработать с ней.
2) request асинхронная функция должна быть и результат ждать await конечно как ты получишь если у тебя функция срабатывает, раньше, чем получает ответ
3) А что ты хочешь вернуть в этом реквесте наверное контент юзай там еще цикл

на udemy есть курс по геймдеву на js рекомендую потратить месяца 2-3 на изучение работы с контекстами канвасов

Есть реакт - это фронтээнд сервер и есть к примеру JSON- server или сервер с БД. т.е два сервера

Можно SPA на Vue сделать или React || Angular

попробуй и запусти из-под live server