Home > javascript > Streaming media server

Streaming media server

January 25Hits:0
Advertisement

I'm wondering if anyone would like to give me some solid advice on how to better organize my main.js file. I have a hunch that I should probably break the file into multiple files and decrease the amount of global variables. Maybe my naming is not so great either? I'm using codekit so I can prepend if that won't screw up my scopes.

GitHub

[email protected] "jquery-1.10.2.min.js" [email protected] "jquery.event.special.js" [email protected] "jquery.easing.min.js" [email protected] "lightbox-2.6.min.js" [email protected] "handlebars-v1.1.2.js"   //Globals var duration; var seek_time; var seek_bar_left; var seek_bar_right; var seek_scrub; var seek_bar_width; var xPos; var name; var cam_toggle; var mic_toggle; var rec_toggle; var fav_toggle; var mic_index = 0;//0 default mic var cam_index = 0;//0 default cam var drag = false; var play_toggle = false; var playing = false; var recording = false; var connection_open = false; var current_video; var current_user; var user_avatar; var user_avatar_array = []; var comments_array = []; var user_array = []; var created_array = []; var new_video = false;   //firebase globals var db = new Firebase('https://adamgedney.firebaseio.com/'); var video_obj = db.child('/videos'); var comments_obj = db.child('/comments');  // var globalError = function(message){ //         console.log(message, "error mess"); // } //==========================================callbacks=================================// var connected = function(success, error){          console.log(success, error);         if(success){                 connection_open = true;                  if(recording){                         flash.startRecording(name,cam_index,mic_index);                 }else{                         flash.startPlaying(current_video);                 };         }else{                 connection_open = false;         } };  var getDuration = function(dur){         duration = dur; };  var seekTime = function(time){         seek_time = time;          xPos = (seek_time / duration) * seek_bar_right;          // scrub position update only when not dragging         if(!drag){                 $('#seek_bar_scrub').offset({left: seek_bar_left + xPos});         }  };// seekTime()  //auth callback var auth = new FirebaseSimpleLogin(db, function(error, user){          if(!error){                 if(user.provider == "github"){                         current_user = user.displayName;                         user_avatar = user.avatar_url;                         login();                 }else if(user.provider == "twitter"){                         current_user = user.displayName;                         user_avatar = user.profile_image_url;                         login();                 }         } });  // //end callbacks //  //========================Seek Bar drag/drop functionality=========================//         //mousedown to start drag         $(document).on('mousedown', '#seek_bar_scrub', function(e){                 drag = true;                  //required to prevent text selection on mouseout of seek_bar                 e.preventDefault();                 moving();         });          //mouseup to stop drag         $(document).on('mouseup', function(e){                 drag = false;         });          //drag and setTime         function moving(){                 $(document).on('mousemove', function(e){                         var set_time = ((e.pageX - seek_bar_left) / seek_bar_width) * duration;                          if(drag){                                  $('#seek_bar_scrub').offset({left: e.pageX});                                  //sets scrub time                                 flash.setTime(set_time);                                  //creates a border                                  if(seek_scrub < seek_bar_left){                                         $('#seek_bar_scrub').offset({left: seek_bar_left});                                  }else if(seek_scrub > (seek_bar_right  - $('#seek_bar_scrub').width())){                                         $('#seek_bar_scrub').offset({left: (seek_bar_right - $('#seek_bar_scrub').width())});                                  };                         };                 });         };          //flash ready serves as document ready         var flashReady = function(){                  //sets init volume to 70                 $('#vol_bar').val(100);                  $(document).on('click', '#play_btn', function(e){                          play_video();                 });         };// flashReady()          //set volume init         $(document).on('change', function(e){                  var vol = $('#vol_bar').val() / 100;                         vol = vol.toFixed(1);                          flash.setVolume(vol);         });          function play_video(){                 //handles connect or play/pause toggle                         if(!playing){                                 flash.stopRecording();                                 flash.connect('rtmp://localhost/SMSServer/');                                  playing = true;                                 recording = false;                                 new_video = false;                          }else if(playing && !recording && new_video){                                  flash.stopPlaying();                                 flash.connect('rtmp://localhost/SMSServer/');                                 new_video = false;                          }else if(playing && !new_video){                                  flash.playPause();                          }                          //handles image toggle                         if (!play_toggle){                                  $('#play_btn').attr('src', 'images/pause.png');                                 play_toggle = true;                          }else{                                 $('#play_btn').attr('src', 'images/play.png');                                 play_toggle = false;                         }         };  //---------------------------Templating--------------------------// init();  function init(){          $.get('templates/templates.html', function(htmlArg){                  var source = $(htmlArg).find('#logged_out').html();                 var template = Handlebars.compile(source);                 // var context = {id: posts._id, title:posts.title, created: posts.created, author: posts.author, category: posts.category, text: posts.text}                 // var html = template(context);                  $('#content').append(template);                  //defaults to hide upon program load                 $('.transport_popup').hide();                 $('.rec_select').hide();                 $('.mic_select').hide();                 $('.cam_select').hide();                 $('.login_popup').hide();                 $('.sub_list').hide();          });//get() };//init()  //--------------------On login, $.get logged in state----------------// $(document).on('click', '#login_gh', function(e){          //github authentication         auth.login('github'); });  $(document).on('click', '#login_tw', function(e){          //github authentication         auth.login('twitter'); });          function login(){                 $.get('templates/templates.html', function(htmlArg){                          var source = $(htmlArg).find('#logged_in').html();                         var template = Handlebars.compile(source);                         // var context = {id: posts._id, title:posts.title, created: posts.created, author: posts.author, category: posts.category, text: posts.text}                         // var html = template(context);                          $('#content').empty();                         $('#content').append(template);                          //defaults to hide upon program load                         $('.transport_popup').hide();                         $('.rec_select').hide();                         $('.mic_select').hide();                         $('.cam_select').hide();                         $('.stop_rec_modal').hide();                         $('.login_popup').hide();                         $('.sub_list').hide();                           seek_bar_width = $('#seek_bar_inner').width();                         seek_bar_left = Math.floor($('#seek_bar_inner').offset().left);                         seek_bar_right = seek_bar_left + seek_bar_width;                         seek_scrub = $('#seek_bar_scrub').offset().left;                           swfobject.embedSWF(                     "swf/higley_wigley.swf", "flashContent",                     "100%", "100%",                     swfVersionStr, xiSwfUrlStr,                     flashvars, params, attributes);                         // JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.                         swfobject.createCSS("#flashContent", "display:block;text-align:left;");                          //populates comments & video fields                         get_comments();                         get_videos();                   });//get()         };//login()  //Controls logout $(document).on('click', '#login_state', function(e){          if($('#login_state').html() == "Logout"){                  //logs out facebook or twitter                 auth.logout();                  $.get('templates/templates.html', function(htmlArg){                          var source = $(htmlArg).find('#logged_out').html();                         var template = Handlebars.compile(source);                         // var context = {id: posts._id, title:posts.title, created: posts.created, author: posts.author, category: posts.category, text: posts.text}                         // var html = template(context);                          $('#content').empty();                         $('#content').append(template);                          //defaults to hide upon program load                         $('.transport_popup').hide();                         $('.rec_select').hide();                         $('.mic_select').hide();                         $('.cam_select').hide();                         $('.login_popup').hide();                         $('.sub_list').hide();                  });//get()         };// if });  //-------------Show/hide login dropdown----------------//  var log_toggle = false;  $(document).on('click', '#login_state', function(e){          if(!log_toggle){                 $('.login_popup').fadeIn();                 log_toggle = true;         }else{                 $('.login_popup').fadeOut();                 log_toggle = false;         } });  //====================Show/Hide mic/cam/rec options=====================//  //camera select popup $(document).on('click', '#camera_btn', function(e){          if (!cam_toggle){                 //hides other popups                 $('.mic_select').hide();                 $('.rec_select').hide();                 $('#mic_btn').css('opacity', '1');                 rec_toggle = false;                 mic_toggle = false;                  $('#camera_btn').css('opacity', '.5');                 $('.transport_popup').fadeIn();                 $('.cam_select').fadeIn();                  cam_toggle = true;                  //get and loop through attached cameras                 var cam_list = flash.getCameras();                 $('.cameras').empty();                  for(var i=0; i<cam_list.length; i++){                         var li = '<li><a id="' + i + '" href="#">' +  cam_list[i].substr(0, 18) + '</a></li>';                         $('.cameras').append(li);                 }          }else{                 $('#camera_btn').css('opacity', '1');                 $('.transport_popup').fadeOut();                 $('.cam_select').fadeOut();                  cam_toggle = false;         }  });  //select and store camera choice $(document).on('click', '.cameras a', function(e){         e.preventDefault();         cam_index = $(this).attr("id"); });  //mic select popup $(document).on('click', '#mic_btn', function(e){          if (!mic_toggle){                 //hides other popups                 $('.cam_select').hide();                 $('.rec_select').hide();                 $('#camera_btn').css('opacity', '1');                 cam_toggle = false;                 rec_toggle = false;                  $('#mic_btn').css('opacity', '.5');                 $('.transport_popup').fadeIn();                 $('.mic_select').fadeIn();                  mic_toggle = true;                  //get and loop through attached cameras                 var mic_list = flash.getMicrophones();                 $('.mics').empty();                  for(var j=0; j<mic_list.length; j++){                         var li = '<li><a id="' + j + '" href="#">' +  mic_list[j].substr(0, 20) + '</a></li>';                         $('.mics').append(li);                 }           }else{                 $('#mic_btn').css('opacity', '1');                 $('.transport_popup').fadeOut();                 $('.mic_select').fadeOut();                  mic_toggle = false;         }  });  //select and store microphone choice $(document).on('click', '.mics a', function(e){         e.preventDefault();         mic_index = $(this).attr("id"); });  //record popup $(document).on('click', '#rec_btn', function(e){          if (!rec_toggle){                 //hides other popups                 $('.mic_select').hide();                 $('.cam_select').hide();                 $('#rec_btn').attr('src', 'images/cancel_rec.png');                 $('#rec_btn').attr('title', 'Cancel Recording');                 $('#mic_btn').css('opacity', '1');                 $('#cam_btn').css('opacity', '1');                 cam_toggle = false;                 mic_toggle = false;                  $('.transport_popup').fadeIn();                 $('.rec_select').fadeIn();                  rec_toggle = true;         }else{                 $('#rec_btn').attr('src', 'images/rec.png');                 $('#rec_btn').attr('title', 'Record A Video');                  $('.transport_popup').fadeOut();                 $('.rec_select').fadeOut();                  rec_toggle = false;         }  });  //start recording $(document).on('click', '#start_recording', function(e){         e.preventDefault();          name = $('#name').val();         var cat = $('#category').val();         var desc = $('#file_desc').val();          //opens connection         flash.stopPlaying();         flash.connect('rtmp://localhost/SMSServer/');         recording = true;         playing = false;          // $('.poster').fadeOut();         $('.stop_rec_modal').fadeIn();          //resets the record modal         $('#rec_btn').attr('src', 'images/rec.png');         $('#rec_btn').attr('title', 'Record A Video');         $('.transport_popup').fadeOut();         $('.rec_select').fadeOut();         rec_toggle = false;          //adds video to database         video_obj.push({video: name, category: cat, description: desc, author: current_user, created_date: get_datetime()}); });  //stop recording button $(document).on('click', '#stop_rec', function(e){         flash.stopRecording();         $('.stop_rec_modal').hide();           // $('.poster').fadeIn();  });          //-------------Favorites button------------// $(document).on('click', '#fav_btn', function(e){          if (!fav_toggle){                 $('#fav_btn').attr('src', 'images/star_y.png');                 fav_toggle = true;         }else{                 $('#fav_btn').attr('src', 'images/star.png');                 fav_toggle = false;         }  });  //------------Category Dropdown----------------// var cat_toggle; var v_toggle; var f_toggle;  $(document).on('click', '.drop_down', function(e){         e.preventDefault();           if($(this).html() == 'My Videos'){                  if(!v_toggle){                         $('.vid_cats').fadeOut();                         $('.favorited_vids').fadeOut();                         f_toggle = false;                         cat_toggle = false;                          $('.my_vids').fadeIn();                         v_toggle = true;                 }else{                         $('.my_vids').fadeOut();                         v_toggle = false;                 }          }else if($(this).html() == 'Favorites'){                  if(!f_toggle){                         $('.my_vids').fadeOut();                         $('.vid_cats').fadeOut();                         cat_toggle = false;                         v_toggle = false;                          $('.favorited_vids').fadeIn();                         f_toggle = true;                 }else{                         $('.favorited_vids').fadeOut();                         f_toggle = false;                 }          }else if($(this).html() == 'Categories'){                  if(!cat_toggle){                         $('.favorited_vids').fadeOut();                         $('.my_vids').fadeOut();                         f_toggle = false;                         v_toggle = false;                          $('.vid_cats').fadeIn();                         cat_toggle = true;                 }else{                         $('.vid_cats').fadeOut();                         cat_toggle = false;                 }         }; });  $(document).on('click', '.sub_list a', function(e){         e.preventDefault();          $('.sub_list').fadeOut();         cat_toggle = false;         v_toggle = false;         f_toggle = false; });  //============================Click Handlers==============================//          //set comments         $(document).on('click', '#submit_comment', function(e){                 e.preventDefault();                  set_comment();          });          //select lesson from list & set current video to this value         $(document).on('click', '.lesson', function(e){                  var this_title = $(this).find('h2').html();                 var this_time = $(this).find('h3').html();                 var this_desc = $(this).find('p').html();                  current_video = this_title + ".flv";                 new_video = true;                  // flash.stopPlaying();                 play_video();                 get_comments();                   render_info(this_title, this_time, this_desc);         });  //============================Getters/Setters==============================//         function set_comment(){                 var com = $('#new_comment').val();                 var usr = current_user;                 var d = get_datetime();                 var t = current_video;                   //pushes comment into messages object                 comments_obj.push({user: usr, avatar: user_avatar, comment: com, created: d, title: t});                  //resets comment form                 $('#new_comment').val('');                  //gets comments and appends to comment list                 get_comments();         };          //retrieve comments when there is a new one         //store in the comments_array         function get_comments(){                 $('.comments_wrapper').empty();                  comments_obj.on('child_added', function (snapshot) {                     console.log(snapshot.val().title, "comment in db");                      var comments = snapshot.val().comment;                     var users = snapshot.val().user;                     var created = snapshot.val().created;                     var avatar = snapshot.val().avatar;                      //empties arrays                           comments_array = [];                           user_array = [];                           created_array = [];                           user_avatar_array = [];                      if(snapshot.val().title == current_video){                                    //pushes result strings into arrays                                   comments_array.push(comments);                                   user_array.push(users);                                   created_array.push(created);                                   user_avatar_array.push(avatar);                                     render_comments();                         };                 });         }; //get_comments()          function get_videos(){                  video_obj.on('child_added', function (snapshot) {                             var video_array = [];                     video_array.push(snapshot.val());                            render_videos(video_array);                 });         }; //get_comments()          function get_datetime(){                 // datetime on 12 hr clock                 var d = new Date();                 var        day = d.getDay();                 var month = d.getMonth() + 1;                 var year = d.getFullYear();                 var hour = d.getHours();                 var minutes = d.getMinutes();                 var time;                 if(hour > 12){                         hour = hour - 12;                         time = hour + ":" + minutes;                          time += "pm";                 }                  return month + "/" + day + "/" + year + " " + time;         };   //============================Renderers==============================//         function render_videos(video_array){                    for (var l=0;l<video_array.length;l++){                            var s = '<div class="lesson">';                                 s += '<img src="images/thumb.jpg" alt="video thumbnail"/>';                                 s += '<h2>' + video_array[l].video + '</h2>';                                 s += '<h3>' + video_array[l].created_date + '</h3>';                                 s += '<p>' + video_array[l].description + '</p>';                                 s += '</div><!-- ./lesson-->';                                                    $('.lessons_container').append(s);                 };// for         };          function render_comments(){                    for (var k=0;k<comments_array.length;k++){                            var s = '<div class="comment">';                                   s += '<a href="' + user_avatar_array[k] + '" data-lightbox="avatar id" ><img src="' + user_avatar_array[k] + '" alt="user avatar" /></a>';                                   s += '<h2>' + user_array[k] + '</h2>';                                   s += '<h3>' + created_array[k] + '</h3>';                                   s += '<p>' + comments_array[k] + '</p>';                                 s += '</div><!-- /.comment-->';                                                                    $('.comments_wrapper').append(s);                 };// for         };          function render_info(title, time, desc){                 $('.desc').empty();                  var s = '<div class="title_wrapper">';                         s += '<h1>' + title + '</h1>';                         s += '<p class="time">' + time + '</p>';                         s += '</div><!-- /.title_wrapper-->';                         s += '<p class="desc_copy">' + desc + '</p>';                         s += '<div class="desc_gallery">';                         s += '<a href="images/poster.jpg" data-lightbox="movie screenshots"><img src="images/shot.jpg" alt="movie screenshot 1"/></a>';                         s += '<a href="images/poster.jpg" data-lightbox="movie screenshots"><img src="images/shot.jpg" alt="movie screenshot 2"/></a>';                         s += '</div><!-- /.desc_gallery-->';                  $('.desc').append(s);         }; 

Answers

Two random thoughts:

  1. In the Category Dropdown part the $(this).html() could be extracted out to a named local variable.
  2. The following code is duplicated, it could be extracted out a separate function:
    $('.transport_popup').hide();
    $('.rec_select').hide();
    $('.mic_select').hide();
    $('.cam_select').hide();
    
    

Related Articles

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.584 s.