fix hover, limit 20, better keyword search, and video tutorial link

db/up/find_sessions_2020.sql

@@ -5,3 +5,10 @@ ALTER TABLE rsvp_requests ADD COLUMN chosen boolean DEFAULT FALSE NOT NULL;
 
 ALTER TABLE music_sessions ADD COLUMN friends_can_join boolean DEFAULT FALSE NOT NULL;
 CREATE INDEX rsvp_request_music_session_id ON rsvp_requests USING btree (music_session_id);
+
+DROP TRIGGER tsvectorupdate on music_sessions;
+CREATE TRIGGER tsvectorupdate BEFORE INSERT OR UPDATE
+ON music_sessions FOR EACH ROW EXECUTE PROCEDURE
+tsvector_update_trigger(description_tsv, 'public.jamenglish', description, name, genre_id);
+
+UPDATE music_sessions set description = description where id in (select music_sessions.id from music_sessions inner join active_music_sessions on active_music_sessions.id = music_sessions.id);

web/app/assets/javascripts/react-components/HoverUser.js.jsx.coffee

@@ -20,12 +20,12 @@ MAX_MINUTES_SHOW_START = 15
 
     `<tr key={userId} >
         <td width="24">
-            <a user-id={userId} data-hoveraction="musician" href={profile_url} className="avatar-tiny">
+            <a data-user-id={userId} data-hoveraction="musician" href={profile_url} className="avatar-tiny">
                 <img src={avatar_url} />
             </a>
         </td>
         <td>
-            <a user-id={userId} data-hoveraction="musician" href={profile_url}>{musician_name}</a>
+            <a data-user-id={userId} data-hoveraction="musician" href={profile_url}>{musician_name}</a>
         </td>
         <td>
             <div className="instruments nowrap">{this.props.instruments}</div>
@@ -35,5 +35,5 @@ MAX_MINUTES_SHOW_START = 15
 
   componentDidMount: () ->
     $root = $(this.getDOMNode())
-    context.JK.bindHoverEvents($root, "data-hoveraction")
+    context.JK.bindHoverEvents($root, true)
 })

web/app/assets/javascripts/react-components/SessionMyTracks.js.jsx.coffee

@@ -14,10 +14,13 @@ SessionActions = context.SessionActions
   render: () ->
 
     content = null
+    videoTutorialLink = null
     tracks = []
 
     if @state.session?.preppingVstEnable
       delayVstEnable = `<div className="enable-vst-incoming">Enabling VSTs ... <div className="spinner-small"></div></div>`
+    else
+      videoTutorialLink = `<SessionVideoTutorialLink />`
 
     if @state.tracks.length > 0
       for track in @state.tracks
@@ -39,7 +42,10 @@ SessionActions = context.SessionActions
 
     `<div className="session-my-tracks">
       <h2>my live tracks</h2>
-      <SessionTrackSettingsBtn />
+      <div className="my-tracks-header">
+          <SessionTrackSettingsBtn />
+          {videoTutorialLink}
+      </div>
       {delayVstEnable}
       <div className="session-tracks-scroller">
         {content}

web/app/assets/javascripts/react-components/SessionVideoTutorialLink.js.jsx.coffee

@@ -0,0 +1,13 @@
+context = window
+
+logger = context.JK.logger
+
+@SessionVideoTutorialLink = React.createClass({
+
+  click:() ->
+    context.JK.popExternalLink("https://youtu.be/z_XZ5xoHdCw")
+    return false
+
+  render: () ->
+    `<a className="video-tutorial" rel="external" href="https://youtu.be/z_XZ5xoHdCw" onClick={this.click}>Video Tutorial</a>`
+})

web/app/assets/javascripts/react-components/stores/SessionsStore.js.coffee

@@ -14,7 +14,7 @@ SessionActions = @SessionActions
 
     highlight: null
 
-    LIMITS: {my: 50, open: 50, upcoming: 20}
+    LIMITS: {my: 20, open: 20, upcoming: 20}
 
     TYPE_MY: 'my'
     TYPE_OPEN: 'open'

web/app/assets/javascripts/utils.js

@@ -466,14 +466,31 @@
     return css;
   }
 
-  context.JK.bindHoverEvents = function ($parent, hoveractionAttr) {
+  context.JK.bindHoverEvents = function ($parent, prefixData) {
     var timeout = 300;
     var fadeoutValue = 100;
     var sensitivity = 3;
     var interval = 500;
 
-    if(!hoveractionAttr) {
+    var hoveractionAttr;
+    var userIdAttr;
+    var bandIdAttr;
+    var recordingIdAttr;
+    var sessionIdAttr;
+
+    if(prefixData) {
+      hoveractionAttr = 'data-hoveraction'
+      userIdAttr = 'data-user-id'
+      bandIdAttr = 'data-band-id'
+      recordingIdAttr = 'data-recording-id'
+      sessionIdAttr = 'data-session-id'
+    }
+    else {
       hoveractionAttr = 'hoveraction'
+      userIdAttr = 'user-id'
+      bandIdAttr = 'band-id'
+      recordingIdAttr = 'recording-id'
+      sessionIdAttr = 'session-id'
     }
 
     if (!$parent) {
@@ -511,7 +528,7 @@
     // MUSICIAN
     $("[" + hoveractionAttr + "='musician']", $parent).hoverIntent({
       over: function(e) {
-        var bubble = new JK.MusicianHoverBubble($(this).attr('user-id'), e.pageX, e.pageY);
+        var bubble = new JK.MusicianHoverBubble($(this).attr(userIdAttr), e.pageX, e.pageY);
 
         showBubble(bubble, $(this));
 
@@ -528,7 +545,7 @@
     // FAN
     $("[" + hoveractionAttr + "='fan']", $parent).hoverIntent({
       over: function(e) {
-        var bubble = new JK.FanHoverBubble($(this).attr('user-id'), e.pageX, e.pageY);
+        var bubble = new JK.FanHoverBubble($(this).attr(userIdAttr), e.pageX, e.pageY);
         showBubble(bubble, $(this));
       },
       out: function () { // this registers for leaving the hoverable element
@@ -542,7 +559,7 @@
     // BAND
     $("[" + hoveractionAttr +"='band']", $parent).hoverIntent({
       over: function(e) {
-        var bubble = new JK.BandHoverBubble($(this).attr('band-id'), e.pageX, e.pageY);
+        var bubble = new JK.BandHoverBubble($(this).attr(bandIdAttr), e.pageX, e.pageY);
         showBubble(bubble, $(this));
       },
       out: function () { // this registers for leaving the hoverable element
@@ -556,7 +573,7 @@
     // SESSION
     $("[" + hoveractionAttr + "='session']", $parent).hoverIntent({
       over: function(e) {
-        var bubble = new JK.SessionHoverBubble($(this).attr('session-id'), e.pageX, e.pageY);
+        var bubble = new JK.SessionHoverBubble($(this).attr(sessionIdAttr), e.pageX, e.pageY);
         showBubble(bubble, $(this));
       },
       out: function () { // this registers for leaving the hoverable element
@@ -570,7 +587,7 @@
     // RECORDING
     $("[" + hoveractionAttr + "='recording']", $parent).hoverIntent({
       over: function(e) {
-        var bubble = new JK.RecordingHoverBubble($(this).attr('recording-id'), e.pageX, e.pageY);
+        var bubble = new JK.RecordingHoverBubble($(this).attr(recordIdAttr), e.pageX, e.pageY);
         showBubble(bubble, $(this));
       },
       out: function () { // this registers for leaving the hoverable element

web/app/assets/stylesheets/client/react-components/SessionScreen.scss

@@ -212,6 +212,15 @@ $session-screen-divider: 1190px;
     position: relative;
   }
 
+  .my-tracks-header {
+    position:relative;
+    width:235px;
+  }
+  a.video-tutorial {
+    position:absolute;
+    right:0;
+    top:0;
+  }
   .session-media-tracks {
     width: 34%;
   }