Made context menu DRY with streamItem, playlistItem, and searchResult…

…Item
MeoMix · May 12, 2015 · cc6e69f · cc6e69f
1 parent efb0d42
commit cc6e69f
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 91 deletions.
diff --git a/Streamus Chrome Extension.csproj b/Streamus Chrome Extension.csproj
@@ -77,6 +77,7 @@
     <Content Include="src\js\common\enum\desktopNotificationDuration.js" />
     <Content Include="src\js\common\lodashMixin.js" />
     <Content Include="src\js\contentScript\interceptor.js" />
+    <Content Include="src\js\foreground\model\contextMenuAction.js" />
     <Content Include="src\js\foreground\model\mediaSourceWrapper.js" />
     <Content Include="src\js\foreground\model\sourceBufferWrapper.js" />
     <Content Include="src\js\foreground\enum\keyboardKey.js" />

diff --git a/src/js/foreground/model/contextMenuAction.js b/src/js/foreground/model/contextMenuAction.js
@@ -0,0 +1,37 @@
+define(function (require) {
+    'use strict';
+
+    var ContextMenuAction = Backbone.Model.extend({
+        defaults: {
+            song: null,
+            player: null
+        },
+
+        showContextMenu: function() {
+            Streamus.channels.contextMenu.commands.trigger('reset:items', [{
+                text: chrome.i18n.getMessage('copyUrl'),
+                onClick: this._copyUrl.bind(this)
+            }, {
+                text: chrome.i18n.getMessage('copyTitleAndUrl'),
+                onClick: this._copyTitleAndUrl.bind(this)
+            }, {
+                text: chrome.i18n.getMessage('watchOnYouTube'),
+                onClick: this._watchOnYouTube.bind(this)
+            }]);
+        },
+
+        _copyUrl: function () {
+            this.get('song').copyUrl();
+        },
+
+        _copyTitleAndUrl: function () {
+            this.get('song').copyTitleAndUrl();
+        },
+
+        _watchOnYouTube: function () {
+            this.get('player').watchInTab(this.get('song'));
+        }
+    });
+
+    return ContextMenuAction;
+});
diff --git a/src/js/foreground/view/leftPane/playlistItemView.js b/src/js/foreground/view/leftPane/playlistItemView.js
@@ -9,6 +9,7 @@
     var PlayPauseSongButtonView = require('foreground/view/listItemButton/playPauseSongButtonView');
     var PlaylistItemTemplate = require('text!template/leftPane/playlistItem.html');
     var Tooltip = require('foreground/view/behavior/tooltip');
+    var ContextMenuAction = require('foreground/model/contextMenuAction');
 
     var PlaylistItemView = ListItemView.extend({
         className: ListItemView.prototype.className + ' playlist-item listItem--medium listItem--hasButtons listItem--selectable',
@@ -50,16 +51,12 @@
         },
 
         showContextMenu: function() {
-            Streamus.channels.contextMenu.commands.trigger('reset:items', [{
-                text: chrome.i18n.getMessage('copyUrl'),
-                onClick: this._copyUrl.bind(this)
-            }, {
-                text: chrome.i18n.getMessage('copyTitleAndUrl'),
-                onClick: this._copyTitleAndUrl.bind(this)
-            }, {
-                text: chrome.i18n.getMessage('watchOnYouTube'),
-                onClick: this._watchOnYouTube.bind(this)
-            }]);
+            var contextMenuAction = new ContextMenuAction({
+                song: this.model.get('song'),
+                player: this.player
+            });
+
+            contextMenuAction.showContextMenu();
         },
 
         _onDblClick: function() {
@@ -81,22 +78,10 @@
             this.$el.data('id', id).attr('id', id);
         },
 
-        _copyUrl: function() {
-            this.model.get('song').copyUrl();
-        },
-
-        _copyTitleAndUrl: function() {
-            this.model.get('song').copyTitleAndUrl();
-        },
-
         _playInStream: function() {
             this.streamItems.addSongs(this.model.get('song'), {
                 playOnAdd: true
             });
-        },
-
-        _watchOnYouTube: function() {
-            this.player.watchInTab(this.model.get('song'));
         }
     });
 

diff --git a/src/js/foreground/view/search/searchResultView.js b/src/js/foreground/view/search/searchResultView.js
@@ -7,6 +7,7 @@
     var PlayPauseSongButtonView = require('foreground/view/listItemButton/playPauseSongButtonView');
     var SaveSongButtonView = require('foreground/view/listItemButton/saveSongButtonView');
     var SearchResultTemplate = require('text!template/search/searchResult.html');
+    var ContextMenuAction = require('foreground/model/contextMenuAction');
 
     var SearchResultView = ListItemView.extend({
         className: ListItemView.prototype.className + ' search-result listItem--medium listItem--hasButtons listItem--selectable',
@@ -33,16 +34,12 @@
         },
 
         showContextMenu: function() {
-            Streamus.channels.contextMenu.commands.trigger('reset:items', [{
-                text: chrome.i18n.getMessage('copyUrl'),
-                onClick: this._copyUrl.bind(this)
-            }, {
-                text: chrome.i18n.getMessage('copyTitleAndUrl'),
-                onClick: this._copyTitleAndUrl.bind(this)
-            }, {
-                text: chrome.i18n.getMessage('watchOnYouTube'),
-                onClick: this._watchOnYouTube.bind(this)
-            }]);
+            var contextMenuAction = new ContextMenuAction({
+                song: this.model.get('song'),
+                player: this.player
+            });
+
+            contextMenuAction.showContextMenu();
         },
 
         _onDblClick: function() {
@@ -53,18 +50,6 @@
             this.streamItems.addSongs(this.model.get('song'), {
                 playOnAdd: true
             });
-        },
-
-        _copyUrl: function() {
-            this.model.get('song').copyUrl();
-        },
-
-        _copyTitleAndUrl: function() {
-            this.model.get('song').copyTitleAndUrl();
-        },
-
-        _watchOnYouTube: function() {
-            this.player.watchInTab(this.model.get('song'));
         }
     });
 

diff --git a/src/js/foreground/view/stream/activeStreamItemView.js b/src/js/foreground/view/stream/activeStreamItemView.js
@@ -5,6 +5,7 @@
     var Tooltip = require('foreground/view/behavior/tooltip');
     var TimeAreaView = require('foreground/view/stream/timeAreaView');
     var ActiveStreamItemTemplate = require('text!template/stream/activeStreamItem.html');
+    var ContextMenuAction = require('foreground/model/contextMenuAction');
 
     var ActiveStreamItemView = Marionette.LayoutView.extend({
         id: 'activeStreamItem',
@@ -68,6 +69,15 @@
             this.$el.removeClass('is-instant is-visible');
         },
 
+        showContextMenu: function () {
+            var contextMenuAction = new ContextMenuAction({
+                song: this.model.get('song'),
+                player: this.player
+            });
+
+            contextMenuAction.showContextMenu();
+        },
+
         _onTransitionInComplete: function(event) {
             if (event.target === event.currentTarget) {
                 this.$el.off('webkitTransitionEnd');
@@ -85,28 +95,7 @@
 
         _onContextMenu: function () {
             event.preventDefault();
-
-            Streamus.channels.contextMenu.commands.trigger('reset:items', [{
-                text: chrome.i18n.getMessage('copyUrl'),
-                onClick: this._copyUrl.bind(this)
-            }, {
-                text: chrome.i18n.getMessage('copyTitleAndUrl'),
-                onClick: this._copyTitleAndUrl.bind(this)
-            }, {
-                text: chrome.i18n.getMessage('watchOnYouTube'),
-                onClick: this._watchOnYouTube.bind(this)
-            }]);
-        },
-
-        _copyUrl: function () {
-            this.model.get('song').copyUrl();
-        },
-
-        _copyTitleAndUrl: function () {
-            this.model.get('song').copyTitleAndUrl();
-        },
-        _watchOnYouTube: function () {
-            this.player.watchInTab(this.model.get('song'));
+            this.showContextMenu();
         }
     });
 

diff --git a/src/js/foreground/view/stream/streamItemView.js b/src/js/foreground/view/stream/streamItemView.js
@@ -8,6 +8,7 @@
     var SaveSongButtonView = require('foreground/view/listItemButton/saveSongButtonView');
     var ExtraActionsButtonView = require('foreground/view/listItemButton/extraActionsButtonView');
     var StreamItemTemplate = require('text!template/stream/streamItem.html');
+    var ContextMenuAction = require('foreground/model/contextMenuAction');
 
     var StreamItemView = ListItemView.extend({
         className: ListItemView.prototype.className + ' stream-item listItem--medium listItem--hasButtons listItem--selectable',
@@ -49,19 +50,12 @@
         },
 
         showContextMenu: function() {
-            Streamus.channels.contextMenu.commands.trigger('reset:items', [{
-                text: chrome.i18n.getMessage('copyUrl'),
-                onClick: this._copyUrl.bind(this)
-            }, {
-                text: chrome.i18n.getMessage('copyTitleAndUrl'),
-                onClick: this._copyTitleAndUrl.bind(this)
-            }, {
-                text: chrome.i18n.getMessage('watchOnYouTube'),
-                onClick: this._watchOnYouTube.bind(this)
-            //}, {
-            //    text: 'Show video',
-            //    onClick: this._showVideo.bind(this)
-            }]);
+            var contextMenuAction = new ContextMenuAction({
+                song: this.model.get('song'),
+                player: this.player
+            });
+
+            contextMenuAction.showContextMenu();
         },
 
         _onDblClick: function() {
@@ -88,18 +82,6 @@
             this.$el.toggleClass('is-active', active);
         },
 
-        _copyUrl: function() {
-            this.model.get('song').copyUrl();
-        },
-
-        _copyTitleAndUrl: function() {
-            this.model.get('song').copyTitleAndUrl();
-        },
-
-        _watchOnYouTube: function() {
-            this.player.watchInTab(this.model.get('song'));
-        },
-
         _showVideo: function() {
             Streamus.channels.video.commands.trigger('show:video');
         }