convert remaining hooks (playback-events/popout-style) to plugins, closes #26

Author: goto-bus-stop

src/ExtPlug.js

@@ -20,12 +20,12 @@ import TooltipsPlugin from './plugins/TooltipsPlugin';
 import GuestPlugin from './plugins/GuestPlugin';
 import SocketEventsPlugin from './plugins/SocketEventsPlugin';
 import WaitlistEventsPlugin from './plugins/WaitlistEventsPlugin';
+import PlaybackEventsPlugin from './plugins/PlaybackEventsPlugin';
 import PlugSettingsPlugin from './plugins/PlugSettingsPlugin';
+import PopoutStylePlugin from './plugins/PopoutStylePlugin';
 
 import * as packageMeta from '../package.json';
 
-import hooks from './hooks/index';
-
 import badgeStyles from './styles/badge';
 import inlineChatStyles from './styles/inline-chat';
 import settingsPaneStyles from './styles/settings-pane';
@@ -98,7 +98,9 @@ const ExtPlug = Plugin.extend({
       new TooltipsPlugin('extplug:tooltips', this),
       new SocketEventsPlugin('extplug:socket-events', this),
       new WaitlistEventsPlugin('extplug:waitlist-events', this),
+      new PlaybackEventsPlugin('extplug:playback-events', this),
       new PlugSettingsPlugin('extplug:plug-settings', this),
+      new PopoutStylePlugin('extplug:popout-style', this),
     ];
 
     this.guestPlugin = new GuestPlugin('extplug:guest', this);
@@ -273,11 +275,6 @@ const ExtPlug = Plugin.extend({
 
     this.appView = getApplicationView();
 
-    // install extra events
-    hooks.forEach(hook => {
-      hook.install();
-    });
-
     this.corePlugins.forEach(plugin => {
       plugin.enable();
     });
@@ -317,9 +314,6 @@ const ExtPlug = Plugin.extend({
     this.corePlugins.forEach(plugin => {
       plugin.disable();
     });
-    hooks.forEach(hook => {
-      hook.uninstall();
-    });
 
     this.guestPlugin.disable();
 

src/hooks/index.js

@@ -0,0 +1,42 @@
+import $ from 'jquery';
+import Events from 'plug/core/Events';
+import Plugin from '../Plugin';
+
+const PlaybackEventsPlugin = Plugin.extend({
+  name: 'Playback Events',
+  description: 'Add internal events for some playback-related actions: refresh, snooze, toggling HD video.',
+
+  init(id, ext) {
+    this._super(id, ext);
+
+    this.onRefresh = this.onRefresh.bind(this);
+    this.onHd = this.onHd.bind(this);
+    this.onSnooze = this.onSnooze.bind(this);
+  },
+
+  enable() {
+    $('#playback .refresh.button').on('click', this.onRefresh);
+    $('#playback .hd.button').on('click', this.onHd);
+    $('#playback .snooze.button').on('click', this.onSnooze);
+  },
+
+  disable() {
+    $('#playback .refresh.button').off('click', this.onRefresh);
+    $('#playback .hd.button').off('click', this.onHd);
+    $('#playback .snooze.button').off('click', this.onSnooze);
+  },
+
+  onRefresh() {
+    Events.trigger('playback:refresh');
+  },
+
+  onHd() {
+    Events.trigger('playback:hdVideo');
+  },
+
+  onSnooze() {
+    Events.trigger('playback:snooze');
+  },
+});
+
+export default PlaybackEventsPlugin;

src/hooks/playback.js

@@ -0,0 +1,27 @@
+import $ from 'jquery';
+import { defer } from 'underscore';
+import Events from 'plug/core/Events';
+import popoutView from 'plug/views/rooms/popout/PopoutView';
+import Plugin from '../Plugin';
+
+const PopoutStylePlugin = Plugin.extend({
+  name: 'Popout Style',
+  description: 'Synchronises custom stylesheets between popout chat and the main window.',
+
+  enable() {
+    Events.on('popout:show', this.sync, this);
+  },
+
+  disable() {
+    Events.off('popout:show', this.sync);
+  },
+
+  sync() {
+    defer(() => {
+      const stylesheets = $('.extplug-style').clone();
+      popoutView.$document.find('head').append(stylesheets);
+    });
+  },
+});
+
+export default PopoutStylePlugin;

src/hooks/popout-style.js

@@ -22,9 +22,6 @@ deobfuscate plug.dj's internal module names.
 All of that is then executed by [loader.js](./loader.js.template) when plug.dj
 is ready.
 
-Files in the [hooks/](./hooks/) directory add new event types to the plug.dj API
-or synchronise data between ExtPlug and plug.dj.
-
 The [plugins/](./plugins/) directory contains core plugins that add more
-advanced default functionality, such as the core ExtPlug chat commands or the
-plugin management views.
+functionality to plug.dj, such as event types, the core ExtPlug chat commands,
+and the plugin management views.