How it works

gistfile1.md

Вот кусок кода плеера:

`

`

В $('#playerProgress').data('current-position') пишется текущее положение прогресс-бара при просмотре фильма в процентах. В $('#playerProgress').data('current-timeframe') пишется положение прогресс-бара в секундах с начала фильма. В $('#playerProgress').data('current-timeframe') пишется имя текущего пользователя, если отсутсвует - то считаем что пользователь не залогинен и не показываем форму отправки комментов

При клике на ссылку Конкретно, у нас скрываются общие комменты и показывается таймлайн. Начальное положение и уже загруженные комментарии берутся с movie.json

в котором:

sendPath - путь куда будут POST запросом отправляться комментарии. points - точки на таймлайне.

у каждой точки три свойства: position - положение на таймлайне в % timeframe - положение на таймлайне в минутах:секундах (для вывода в списке) comments - массив с комментариями

каждый коммент состоит из: name - имя комментатора level - отступ message - сам комментарий

При первоначальной загрузке movie.json создаются метки над таймлайном, в которых есть комменты и положение таймлайна ставится на положение указанное в $('#playerProgress').data('current-position')

Чтобы все было синхронизировано с плеером, нужно дергать js функцию, доступную глобально: `moveSlider(x,y), где x - положение в процентах, y - положение в секундах для показа в списке

Частота ее дергания наверное должна быть не менее одного раза в секунду, чтобы было плавное движение по таймлайну

movie.json

{
  "sendPath" : "/send.json",
  "points" : [
    {
      "position" : 12,
      "timeframe" : "00:05",
      "comments" : [
        {
          "id" : 2,
          "name" : "Капитан О",
          "level" : 1,
          "message" : "Надо бы такое же приложение добыть"
        },
        {
          "id" : 3,
          "name" : "Капитан В",
          "level" : 2,
          "message" : "Надо бы такое же приложение добыть"
        },
        {
          "id" : 4,
          "name" : "Капитан 2",
          "level" : 1,
          "message" : "Надо бы такое же приложение добыть"
        },
        {
          "id" : 5,
          "name" : "Капитан Оа",
          "level" : 1,
          "message" : "Надо бы такое"
        }
      ]
    },
    {
      "position" : 34,
      "timeframe" : "00:23",
      "comments" : [
        {
          "id" : 2,
          "name" : "Капитан О",
          "level" : 1,
          "message" : "Надо бы такое же приложение добыть"
        },
        {
          "id" : 3,
          "name" : "Капитан В",
          "level" : 1,
          "message" : "Надо бы такое же приложение добыть"
        },
        {
          "id" : 4,
          "name" : "Капитан 2",
          "level" : 2,
          "message" : "Надо бы такое же приложение добыть"
        },
        {
          "id" : 5,
          "name" : "Капитан Оа",
          "level" : 3,
          "message" : "Надо бы такое"
        }
      ]
    },
    {
      "position" : 38,
      "timeframe" : "12:05",
      "comments" : [
        {
          "id" : 2,
          "name" : "Капитан О",
          "level" : 1,
          "message" : "Надо бы такое же приложение добыть"
        },
        {
          "id" : 3,
          "name" : "Капитан В",
          "level" : 1,
          "message" : "Надо бы такое же приложение добыть"
        },
        {
          "id" : 4,
          "name" : "Капитан 2",
          "level" : 1,
          "message" : "Надо бы такое же приложение добыть"
        },
        {
          "id" : 5,
          "name" : "Капитан Оа",
          "level" : 1,
          "message" : "Надо бы такое"
        }
      ]
    },
    {
      "position" : 45,
      "timeframe" : "16:05",
      "comments" : [
        {
          "id" : 2,
          "name" : "Капитан О",
          "level" : 1,
          "message" : "Надо бы такое же приложение добыть"
        },
        {
          "id" : 3,
          "name" : "Капитан В",
          "level" : 2,
          "message" : "Надо бы такое же приложение добыть"
        },
        {
          "id" : 4,
          "name" : "Капитан 2",
          "level" : 1,
          "message" : "Надо бы такое же приложение добыть"
        },
        {
          "id" : 5,
          "name" : "Капитан Оа",
          "level" : 1,
          "message" : "Надо бы такое"
        }
      ]
    },
    {
      "position" : 55,
      "timeframe" : "23:05",
      "comments" : [
        {
          "id" : 2,
          "name" : "Капитан О",
          "level" : 1,
          "message" : "Надо бы такое же приложение добыть"
        },
        {
          "id" : 3,
          "name" : "Капитан В",
          "level" : 2,
          "message" : "Надо бы такое же приложение добыть"
        },
        {
          "id" : 4,
          "name" : "Капитан 2",
          "level" : 3,
          "message" : "Надо бы такое же приложение добыть"
        },
        {
          "id" : 5,
          "name" : "Капитан Оа",
          "level" : 2,
          "message" : "Надо бы такое"
        }
      ]
    },
    {
      "position" : 67,
      "timeframe" : "33:05",
      "comments" : [
        {
          "id" : 2,
          "name" : "Капитан О",
          "level" : 1,
          "message" : "Надо бы такое же приложение добыть"
        },
        {
          "id" : 3,
          "name" : "Капитан В",
          "level" : 1,
          "message" : "Надо бы такое же приложение добыть"
        },
        {
          "id" : 4,
          "name" : "Капитан 2",
          "level" : 1,
          "message" : "Надо бы такое же приложение добыть"
        },
        {
          "id" : 5,
          "name" : "Капитан Оа",
          "level" : 1,
          "message" : "Надо бы такое"
        },
        {
          "id" : 5,
          "name" : "Капитан Оа",
          "level" : 1,
          "message" : "Надо бы такое"
        }
      ]
    }
  ]
}