rusrich

Мой опыт:
Изучал JS по урокам и официальной документации.
1. Прекрасно знал, что такое переменная, массивы, функции, циклы и пр. Как это применять в практике - ни понятно.
2. Прочитал книгу O'relly для начинающих JS - еще больше стал понимать про переменные, циклы, массивы и пр. - Как это применять на практике - не понятно
3. Записался на продвинутый JS, NodeJS, React - изучил ES6, выучил классы, понял принципы работы React - как это применить на практике - не понятно.
4. Купил несколько англоязычных курсов на udemy (русские в топку), где создаются нормальные реальные проекты, не "туду листы" и повторял все за автором. Первый курс прошел и повторял все один в один, благодаря чему понял взаимодействие React с Нодой, как писать API, как деплоить и все дела. Второй курс уже сразу адаптировал под свои нужды. В итоге сделал свой проект и от проекта в курсе осталась только авторизация и базовые методы создания и чтения. Процентов 70 своего кода.

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

Сделал так.
В итоге все работает как надо, но не могу отрендерить, как буд-то функция showMoviesOfCollections(data.movies) ничего не возвращает.
В консоли данные корректные.

Как можно исправить ситуацию?

import React, { useEffect, useState } from 'react';
import Cardstyle from "../../components/movie/cardstyle";
import { getCategories, getCollections, singleCategory } from "../../actions/category";
import Link from "next/link";

const Collect = ({ router }) => {
  const [ categories, setCategories ] = useState([])
  const [ values, setValues ] = useState({
    error: '',
    success: '',
    loaded: false
  })

  useEffect(() => {
    initCategories()
  }, [])

  const initCategories = () => {
    return getCategories().then(data => {
      if (data.error) {
        setValues({ ...values, error: data.error })
      } else {
        setCategories(data)
      }
    })
  }

  const getCollect = (slug, limit) => {
    getCollections(slug, limit).then(data => {
      if (data.error) {
        console.log(data.error)
      } else {
        console.log(data.movies)
        return showMoviesOfCollections(data.movies)
      }
    })
  }

  const showMoviesOfCollections = (movies) => {
    return movies.map((movie, i) => {
      return (
        <div key={ i } className="col-6 col-sm-6 col-md-4 col-xl-2 mt-5 mb-5 mb-xl-0">
          <Cardstyle movie={ movie }/>
        </div>
      )
    })
  }

  const viewCollection = () => {
    return categories.map((cat, i) => {
      return (
        <div key={ i } className="bg-gray-1100 dark">
          { getCollect(cat.slug, 6) }
        </div>
      )
    })
  }

  return (
    <>
      { viewCollection() }
    </>
  );
}


export default Collect;

В общем выбрал направление, но прошу подсказать, поскольку в JS не силен.

<div id="playera"></div>
<div id="player">
    <%= javascript_tag do %>
    // Объявляю переменную, которая принимает содержимое ДИВа, куда я генерирую ссылку на видео
     var content=document.getElementById("linkurl").innerHTML
        new Playerjs({
        "id":"playera",
        // Теперь как мне вывести значение переменной CONTENT? Если пишу CONTENT, то в HTML и отображается content, а мне нужно именно значение, которое присвоил.
        "file": "content"
        });
    <% end %>
</div>

Установил gem https://rubygems.org/gems/ffmpeg
Исправил строчку на system("ffmpeg -i #{@file.path} -s 640x360 encode.mp4")
и заработало. Правда в корень файл кладет.

Пока ничего не получается. Ниже информация как я понял.

Значит в конфиг nginx дописываю это (источник)

location /mp4 {
    hls;
    hls_fragment            5s;
    hls_buffers             10 10m;
    hls_mp4_buffer_size     1m;
    hls_mp4_max_buffer_size 5m;
    root /var/video/;
}

Видео лежит в папке site.ru/mp4/test.mp4
По инструкции из источника при включенном HLS плейлист m3u8 формируется там же по ссылке site.ru/mp4/test.mp4.m3u8.

В директории m3u8 не появляется. Плеер такую ссылку тоже не видит.

Для FlowPlayer источник указывается так:

clip: {
    sources: [
		{ type: "application/x-mpegurl", src: "http://site.ru/mp4/test.mp4.m3u8" },
		{ type: "video/mp4",             src: "http://site.ru/mp4/test.mp4"  }
    ]
  }

Что делаю не так, подскажите плиз.