calzoneman / sync

Node.JS Server and JavaScript/HTML Client for synchronizing online media
Other
1.46k stars 235 forks source link

Feature: Optional Video Status Chat Notifications #865

Closed dyeo closed 4 years ago

dyeo commented 4 years ago

It would be useful for users if in the chat window there was an option to send a server message to the chat window whenever a video is skipped or a new video is played after one has finished, ideally with a unique appearance to distinguish it from other messages. That way, when the conversation surrounds a particular video, people will know who is talking about what more clearly. Notifications for pause and resume would also be useful, optionally with the user who did it.

calzoneman commented 4 years ago

You could probably add this pretty easily as a Channel JS script without needing to modify core.

Xaekai commented 4 years ago

Imminently doable via socket listeners. Basic structure for those is just:

socket.on('frameType', (frameData)=>{
// code
})

You can see frames the server sends the client and how they are handled inside callbacks.js

calzoneman commented 4 years ago

Something like this should get you started

(function() {
  function onChangeMedia(media) {
    let tmp = document.createElement('span');
    tmp.textContent = media.title;
    addChatMessage({
      username: '[playlist]',
      msg: `Now playing: ${tmp.innerHTML}`,
      meta: {
        addClass: 'server-whisper',
        addClassToNameAndTimestamp: true
      },
      time: Date.now()
    });
  }

  let pauseState = false;
  function onMediaUpdate(update) {
    if (pauseState !== update.paused) {
      let message;
      if (update.paused) {
        message = 'Video paused';
      } else {
        message = 'Video resumed';
      }

      addChatMessage({
        username: '[playlist]',
        msg: message,
        meta: {
          addClass: 'server-whisper',
          addClassToNameAndTimestamp: true
        },
        time: Date.now()
      });
      pauseState = update.paused;
    }
  }

  socket.on('changeMedia', onChangeMedia);
  socket.on('mediaUpdate', onMediaUpdate);
})();