Skip to content
Browse files

Merge pull request #116 from mozilla/dev

Merging up the new webRTC page from dev
  • Loading branch information...
2 parents 5018ced + 8d741c5 commit 712e558fece0da6c901bb72bd103873051d311eb @rossbruniges rossbruniges committed Nov 19, 2012
View
9 apps/ignite_resources/views.py
@@ -9,15 +9,22 @@
def object_list(request, template='ignite_resources/object_list.html'):
"""Lists the current resources"""
+ sticky = Resource.objects.filter(
+ status=Resource.PUBLISHED,
+ resource_type=2,
+ is_featured=True
+ ).order_by('title')
labs = Resource.objects.filter(
status=Resource.PUBLISHED,
- resource_type=2
+ resource_type=2,
+ is_featured=False
).order_by('-created')
links = Resource.objects.filter(
status=Resource.PUBLISHED,
resource_type=1
).order_by('title')
context = {
+ 'sticky': sticky,
'labs': labs,
'links': links
}
View
22 media/ignite/resources/css/ignite_ll.css
@@ -4,11 +4,11 @@
}
@font-face{
font-family: league_gothic_ie;
- src: url(../fonts/league_gothic.eot);
+ src: url(../fonts/league_gothic.eot);
}
body{
background: #2e3132;
- font-family: "League Gothic", league_gothic, league_gothic_ie, sans-serif;
+ font-family: "League Gothic", league_gothic, monospace, league_gothic_ie, sans-serif;
}
#support_message, #support_none, #support_limited{
display: none;
@@ -41,7 +41,7 @@ body{
color: black;
text-decoration: none;
}
-#webgl_lab{
+#lab_video, #webgl_lab{
position:absolute;
width:100%;
height:100%;
@@ -67,14 +67,12 @@ body{
background: rgb( 255, 255, 255);
background: rgba( 232, 242, 248, 1);
}
-#credits_link{
+#credits_link, #demo_link{
display: none;
background: rgb( 232, 242, 248);
background: rgba( 232, 242, 248, 0.5);
border-radius: 2% 2% 2% 2% / 12% 12% 12% 12%;
position: absolute;
- left: 35%;
- top: 75%;
width: 30%;
height: 9%;
opacity: 0;
@@ -84,10 +82,18 @@ body{
-o-transition: opacity 1s;
text-align: center;
}
-#credits_link:hover{
+#credits_link:hover, #demo_link:hover{
background: rgb( 255, 255, 255);
background: rgba( 232, 242, 248, 1);
}
+#credits_link{
+ left: 35%;
+ top: 75%;
+}
+#demo_link{
+ left: 35%;
+ top: 65%;
+}
#logo1{
/* Native size: 209 x 91 */
display: none;
@@ -234,7 +240,7 @@ div.icon img{
#resources ul{
list-style-type: none;
}
-.logo_background{
+.logo_background, #logo_background{
position: absolute;
top: 30%;
left: 25%;
View
261 media/ignite/resources/js/global_popcorn_events_webrtc.js
@@ -0,0 +1,261 @@
+ignite.link_node_manager.content[0] = {
+ notes: "This is the global group of non-link_node objects.",
+ content: [
+ {notes: "The Ignite logo", time_in: 1, time_out: 3,
+ start: function (){
+ var logo1 = document.getElementById("logo1");
+ logo1.className = "centered_logo";
+ logo1.style.display = "block";
+ logo1.style.opacity = "0"
+ logo1.transition = "left 2s, top 1s, opacity 1s, height 1s, width 1s";
+ logo1.MozTransition = "left 2s, top 1s, opacity 1s, height 1s, width 1s";
+ logo1.WebkitTransition = "left 2s, top 1s, opacity 1s, height 1s, width 1s";
+ logo1.OTransition = "left 2s, top 1s, opacity 1s, height 1s, width 1s";
+ setTimeout(function (){
+ logo1.style.opacity = "1";
+ }, 100);
+ if(!this.setup){
+ this.setup = true;
+ ignite.popcorn.cue(this.time_in+1, function (){
+ logo1.className = "positioned_logo";
+ })
+ }
+ },
+ end: function (){
+ var logo1 = document.getElementById("logo1");
+ logo1.transition = " ";
+ logo1.MozTransition = " ";
+ logo1.WebkitTransition = " ";
+ logo1.OTransition = " ";
+ logo1.style.display = "block";
+ logo1.style.opacity = "1";
+ logo1.className = "positioned_logo";
+ },
+ check: function (time_code){
+ var logo1 = document.getElementById("logo1");
+ if(time_code < this.time_in){
+ logo1.className = "centered_logo";
+ logo1.style.display = "none";
+ logo1.style.opacity = "0";
+ } else if(time_code > this.time_out){
+ this.end();
+ }
+ }
+ },
+ {notes: "The WebGL logo", time_in: 3, time_out: 4,
+ start: function (){
+ var logo2 = document.getElementById("logo2");
+ logo2.className = "centered_logo";
+ logo2.style.display = "block";
+ logo2.transition = "right 2s, top 1s, opacity 1s, height 1s, width 1s";
+ logo2.MozTransition = "right 2s, top 1s, opacity 1s, height 1s, width 1s";
+ logo2.WebkitTransition = "right 2s, top 1s, opacity 1s, height 1s, width 1s";
+ logo2.OTransition = "right 2s, top 1s, opacity 1s, height 1s, width 1s";
+ setTimeout(function (){
+ logo2.style.opacity = "1";
+ }, 100);
+ if(!this.setup){
+ this.setup = true;
+ ignite.popcorn.cue(this.time_in+1, function (){
+ logo2.className = "positioned_logo";
+ })
+ }
+ },
+ end: function (){
+ var logo2 = document.getElementById("logo2");
+ logo2.transition = " ";
+ logo2.MozTransition = " ";
+ logo2.WebkitTransition = " ";
+ logo2.OTransition = " ";
+ logo2.style.display = "block";
+ logo2.style.opacity = "1";
+ logo2.className = "positioned_logo";
+ },
+ check: function (time_code){
+ var logo2 = document.getElementById("logo2");
+ if(time_code < this.time_in){
+ logo2.className = "centered_logo";
+ logo2.style.display = "none";
+ logo2.style.opacity = "0";
+ } else if(time_code > this.time_out){
+ this.end();
+ }
+ }
+ },
+ {notes: "Walkthrough", time_in: 5, time_out: 10,
+ displayed: undefined, // Needed for unexpected behavior in Chrome.
+ start: function (){
+ if(this.displayed){ return;}
+ this.displayed = true;
+ var walkthrough_button = document.getElementById("walkthrough_link");
+ walkthrough_button.style.display = "block";
+ if(!this.setup){
+ this.setup = true;
+ var passed_event = this;
+ walkthrough_button.addEventListener("click", function (){
+ ignite.start_walkthrough();
+ passed_event.end();
+ });
+ }
+ /* The following setTimeout call is necessary to prevent
+ * block and opacity from being set simultaneously, which would
+ * result in a spontaneous appearance instead of a fade-in.
+ */
+ if(this.timeout_id){
+ clearTimeout(this.timeout_id);
+ }
+ this.timeout_id = setTimeout((function (passed_button){
+ return function (){
+ passed_button.style.opacity = "1";
+ }
+ })(walkthrough_button), 1000);
+ },
+ end: function (){
+ if(!this.displayed){ return;}
+ this.displayed = false;
+ var walkthrough_button = document.getElementById("walkthrough_link");
+ walkthrough_button.style.opacity = "0";
+ if(this.timeout_id){
+ clearTimeout(this.timeout_id);
+ }
+ this.timeout_id = setTimeout((function (passed_button){
+ return function (){
+ passed_button.style.display = "none";
+ }
+ })(walkthrough_button), 1000);
+ },
+ check: function (time_code){
+ if(time_code > this.time_in && time_code < this.time_out){
+ this.start();
+ } else{
+ this.end();
+ }
+ }
+ },
+ {notes: "Add Arrows", time_in: 10, time_out: 11,
+ started: undefined, // Needed for unexpected behavior in Chrome.
+ start: function (){
+ if(this.started){ return;}
+ this.started = true;
+ setTimeout(function (){
+ ignite.arrow_left.style.opacity = "1";
+ ignite.arrow_right.style.opacity = "0";
+ }, 100);
+ },
+ end: function (){},
+ check: function (time_code){
+ if(time_code >= this.time_in){
+ this.start();
+ }
+ }
+ },
+ {notes: "Excercise", time_in: 543, time_out: 600,
+ displayed: undefined, // Needed for unexpected behavior in Chrome.
+ start: function (){
+ if(this.displayed){ return;}
+ this.displayed = true;
+ var demo_button = document.getElementById("demo_link");
+ demo_button.style.display = "block";
+ if(!this.setup){
+ this.setup = true;
+ }
+ /* The following setTimeout call is necessary to prevent
+ * block and opacity from being set simultaneously, which would
+ * result in a spontaneous appearance instead of a fade-in.
+ */
+ if(this.timeout_id){
+ clearTimeout(this.timeout_id);
+ }
+ this.timeout_id = setTimeout((function (passed_button){
+ return function (){
+ passed_button.style.opacity = "1";
+ }
+ })(demo_button), 1000);
+ },
+ end: function (){
+ if(!this.displayed){ return;}
+ this.displayed = false;
+ var credits_button = document.getElementById("credits_link");
+ credits_button.style.opacity = "0";
+ if(this.timeout_id){
+ clearTimeout(this.timeout_id);
+ }
+ this.timeout_id = setTimeout((function (passed_button){
+ return function (){
+ passed_button.style.display = "none";
+ }
+ })(credits_button), 1000);
+ },
+ check: function (time_code){
+ if(time_code > this.time_in && time_code < this.time_out){
+ this.start();
+ } else{
+ this.end();
+ }
+ }
+ },
+ {notes: "Credits", time_in: 549, time_out: 600,
+ displayed: undefined, // Needed for unexpected behavior in Chrome.
+ start: function (){
+ if(this.displayed){ return;}
+ this.displayed = true;
+ var credits_button = document.getElementById("credits_link");
+ credits_button.style.display = "block";
+ if(!this.setup){
+ this.setup = true;
+ var passed_event = this;
+ credits_button.addEventListener("click", function (){
+ ignite.transition("right", true);
+ passed_event.end();
+ });
+ }
+ /* The following setTimeout call is necessary to prevent
+ * block and opacity from being set simultaneously, which would
+ * result in a spontaneous appearance instead of a fade-in.
+ */
+ if(this.timeout_id){
+ clearTimeout(this.timeout_id);
+ }
+ this.timeout_id = setTimeout((function (passed_button){
+ return function (){
+ passed_button.style.opacity = "1";
+ }
+ })(credits_button), 1000);
+ },
+ end: function (){
+ if(!this.displayed){ return;}
+ this.displayed = false;
+ var credits_button = document.getElementById("credits_link");
+ credits_button.style.opacity = "0";
+ if(this.timeout_id){
+ clearTimeout(this.timeout_id);
+ }
+ this.timeout_id = setTimeout((function (passed_button){
+ return function (){
+ passed_button.style.display = "none";
+ }
+ })(credits_button), 1000);
+ },
+ check: function (time_code){
+ if(time_code > this.time_in && time_code < this.time_out){
+ this.start();
+ } else{
+ this.end();
+ }
+ }
+ }
+ ]
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
View
12 media/ignite/resources/js/ignite_ll_webgl_resources.js
@@ -130,9 +130,9 @@ ignite.resources.content = [
{id: "3dfx_ad", title: "3DFX Ad", content: "http://www.youtube.com/watch?v=ooLO2xeyJZA"}
]},
{title: 'Video Features 1', content: [
- {title: 'One Millionth Tower', content: 'http://highrise.nfb.ca/onemillionthtower/'},
- {title: 'Turbulent Point Cloud', content: 'http://www.ro.me/tech/turbulent-point-cloud'},
- {title: 'Hatching Glow Shader', content: 'http://www.ro.me/tech/hatching-glow-shader'},
+ {title: 'One Millionth T.', content: 'http://highrise.nfb.ca/onemillionthtower/'},
+ {title: 'Turbulent Point C.', content: 'http://www.ro.me/tech/turbulent-point-cloud'},
+ {title: 'Hatching Glow S.', content: 'http://www.ro.me/tech/hatching-glow-shader'},
{title: 'Kai &apos;Opua', content: 'http://www.webgl.com/2012/05/webgl-game-kai-opua/'},
{title: 'ro.me', content: 'http://www.ro.me/'},
{title: 'Shiny Knot', content: 'http://www.chromeexperiments.com/detail/floating-shiny-knot/'},
@@ -157,12 +157,12 @@ ignite.resources.content = [
{title: 'Codecademy', content: 'http://www.codecademy.com/#!/exercises/0'},
{title: 'Khan Academy', content: 'http://www.khanacademy.org/'},
{title: 'Radiohead Video', content: 'http://www.youtube.com/watch?v=oLrsguw1Zac'}
- ]} // TODO: Remember to ask Mike about "grey link" attributions.
+ ]}
]},
{id: "assorted", display: "none", content: [
{id: "java_&_opengl", title: "Java & OpenGL", content: "http://www.opengl.org/resources/bindings/"},
{id: "dependencies", title: "Dependencies", content: "http://en.wikipedia.org/wiki/Dependency_hell"},
- {id: "coupling", title: "Coupling", content: "TODO"},
+ {id: "coupling", title: "Coupling", content: "http://en.wikipedia.org/wiki/Coupling_%28computer_programming%29"},
{id: "teamup", title: "TeamUp", content: "http://www.getteamup.com"},
{id: "boot_to_gecko", title: "Boot to Gecko", content: "http://www.mozilla.org/en-US/b2g/"},
{id: "firefox_os", title: "Firefox OS", content: "http://www.digitaltrends.com/mobile/firefox-os-can-mozilla-move-to-mobile-phones/For"},
@@ -179,7 +179,7 @@ ignite.resources.content = [
{id: "p2pu", title: "Peer 2 Peer U", content: "https://p2pu.org/en/"},
{id: "khan_academy", title: "Khan Academy", content: "http://www.khanacademy.org/"},
{id: "the_gig", title: "&quot;The Gig&quot;", content: "http://chattanoogagig.com/"},
- {id: "webgl_exercise", title: "WebGL Exercise", content: "TODO"},
+ {id: "webgl_exercise", title: "WebGL Exercise", content: "https://github.com/mozilla/mozilla-ignite-learning-lab-demos/tree/master/lab-1-webgl"},
{id: "andors_submission", title: "Andor's Entry", content: "https://mozillaignite.org/ideas/323/"}
]}
];
View
142 media/ignite/resources/js/ignite_ll_webrtc_resources.js
@@ -0,0 +1,142 @@
+// This is the list of "link nodes" appearing in the video.
+ignite.link_node_manager.content = [
+ null, // First element is empty. This will be filled in by another file.
+ /* Content is arranged in groups. Each group has a begin and end time.
+ * Within each group, each node has a begin time.
+ * Nodes with a set position will appear outside the node list.
+ */
+ {time_in: 12, time_out: 32, content: [
+ {resource_id: "about_webrtc", time_in: 13},
+ {resource_id: "about_webrtc.webrtc_org", time_in: 15},
+ {resource_id: "assorted.codec_wars", time_in: 25},
+ ]},
+ {time_in: 33, time_out: 55, content: [
+ {resource_id: "demos.sample_app", time_in: 34},
+ {resource_id: "about_webrtc.learn_webrtc.quickstart", time_in: 39},
+ {resource_id: "about_webrtc.learn_webrtc.getusermedia", time_in: 44},
+ {resource_id: "about_webrtc.learn_webrtc.peer_connection_api", time_in: 47},
+ ]},
+ {time_in: 65, time_out: 104, content: [
+ {resource_id: "contributors.anants_blog", time_in: 66},
+ {resource_id: "assorted.ietf", time_in: 69},
+ {resource_id: "about_webrtc.w3c_specs", time_in: 73},
+ {resource_id: "demos.data_channel_test", time_in: 96}
+ ]},
+ {time_in: 113, time_out: 154, content: [
+ {resource_id: "contributors.tokbox.website", time_in: 114},
+ {resource_id: "contributors.tokbox.opentok_library", time_in: 119},
+ {resource_id: "contributors.ian_on_webrtc", time_in: 133},
+ {resource_id: "articles.techcrunch", time_in: 146}
+ ]},
+ {time_in: 195, time_out: 222, content: [
+ {resource_id: "demos.head_tracking", time_in: 196},
+ {resource_id: "assorted.web_access", time_in: 200},
+ {resource_id: "assorted.cebp", time_in: 215}
+ ]},
+ {time_in: 246, time_out: 287, content: [
+ {resource_id: "contributors.big_blue_button", time_in: 247},
+ {resource_id: "contributors.big_blue_button.submission", time_in: 270},
+ {resource_id: "articles.ericson", time_in: 278},
+ {resource_id: "articles.gov_adopt", time_in: 280}
+ ]},
+ {time_in: 341, time_out: 391, content: [
+ {resource_id: "assorted.sdn", time_in: 342},
+ {resource_id: "articles.openflow", time_in: 346},
+ {resource_id: "assorted.voip", time_in: 349},
+ {resource_id: "assorted.telemedicine", time_in: 379},
+ {}
+ ]},
+ {time_in: 400, time_out: 419, content: [
+ {resource_id: "contributors.justin.google", time_in: 401},
+ {resource_id: "contributors.justin.wayback", time_in: 408},
+ {resource_id: "assorted.google_video_chat", time_in: 410},
+ {resource_id: "assorted.google_hangouts", time_in: 412}
+ ]},
+ {time_in: 423, time_out: 455, content: [
+ {resource_id: "assorted.bit_rates", time_in: 424},
+ {resource_id: "assorted.compression", time_in: 427},
+ {resource_id: "assorted.data_rate_units", time_in: 448}
+ ]},
+ {time_in: 529, time_out: 541, content:[
+ {resource_id: "assorted.chrome_canary", time_in: 530},
+ {resource_id: "assorted.firefox_nightly", time_in: 532}
+ ]}
+];
+// This is the expandable list in the resource section.
+ignite.resources.content = [
+ {id: "mozilla_ignite", title: 'Mozilla Ignite', content: [
+ {id: "official", title: 'Official', content: [
+ {id: "official_site", title: 'Official Site', content: 'http://www.mozillaignite.org'},
+ {id: "twitter", title: 'Twitter', content: 'http://twitter.com/MozillaIgnite'},
+ {id: "us_ignite", title: 'US Ignite', content: 'http://us-ignite.org/'},
+ {id: "nsf_gov", title: 'NSF.gov', content: 'http://www.nsf.gov/'}
+ ]},
+ {id: "press", title: 'Press', content: [
+ {id: "white_house", title: 'White House', content: 'http://www.whitehouse.gov/the-press-office/2012/06/13/we-can-t-wait-president-obama-signs-executive-order-make-broadband-const'},
+ {id: "launch_day_video", title: 'Launch Day Video', content: 'http://www.youtube.com/watch?v=H-t26owiZUQ'},
+ {id: "mark_surman", title: 'Mark Surman', content: 'http://www.nsf.gov/news/news_videos.jsp?cntn_id=124472&media_id=72664&org=NSF'}
+ ]},
+ {id: "geni", title: 'GENI', content: [
+ {id: "geni_site", title: 'Official Site', content: 'http://www.geni.net/'},
+ {id: "geni_wikipedia", title: 'Wikipedia', content: 'http://en.wikipedia.org/wiki/Global_Environment_for_Network_Innovations'},
+ {id: "kenny_1", title: 'Kenny on GENI, 1', content: 'http://www.screenr.com/2KL8'},
+ {id: "kenny_2", title: 'Kenny on GENI, 2', content: 'http://www.screenr.com/FIz8'}
+ ]}
+ ]},
+ {id: "about_webrtc", title: 'WebRTC', content: [
+ {id: "learn_webrtc", title: 'Learn WebRTC', content: [
+ {id: "quickstart", title: "Quickstart", content: "http://www.html5rocks.com/en/tutorials/webrtc/basics/"},
+ {id: "getusermedia", title: "getUserMedia()", content: "http://www.html5rocks.com/en/tutorials/getusermedia/intro/"},
+ {id: "peer_connection_api", title: "Peer Connection", content: "https://webrtc-demos.appspot.com/html/pc1.html"}
+ ]},
+ {id: "webrtc_org", title: "WebRTC.org", content: "http://wwww.webrtc.org"},
+ {id: "webrtc_wikipedia", title: 'Wikipedia', content: 'http://en.wikipedia.org/wiki/Webrtc'},
+ {id: "w3c_specs", title: "W3C Specs", content: "http://dev.w3.org/2011/webrtc/editor/getusermedia.html"}
+ ]},
+ {id: "demos", title: 'Demos', content: [
+ {id: "head_tracking", title: "Head-Tracking", content: "http://auduno.tumblr.com/post/25125149521/head-tracking-with-webrtc"},
+ {id: "sample_app", title: "Sample App", content: "https://code.google.com/p/libjingle/source/browse/#svn%2Ftrunk%2Ftalk%2Fexamples%2Fpeerconnection%2Fclient"},
+ {id: "data_channel_test", title: "Data Test", content: "http://people.mozilla.com/~anarayanan/webrtc/data_test.html"}
+ ]},
+ {id: "articles", title: "Articles & Posts", content: [
+ {id: "techcrunch", title: "TechCrunch", content: "http://techcrunch.com/2012/11/05/tokboxs-opentok-webrtc/"},
+ {id: "openflow", title: "OpenFlow", content: "http://en.wikipedia.org/wiki/OpenFlow"},
+ {id: "gov_adopt", title: "Gov. Adoption", content: "http://www.fedtechmagazine.com/article/2012/09/8-reasons-why-government-adopting-video-conferencing-infographic"},
+ {id: "ericson", title: "Ericson Review", content: "http://www.ericsson.com/news/120405_webrtc_enhancing_the_web_with_real-time_communication_capabilities_244159019_c?categoryFilter=ericsson_review_1270673222_c"},
+ ]},
+ {id: "contributors", title: "Contributors", content:[
+ {id: "justin", title: "Justin Uberti", content: [
+ {id: "wayback", title: "Justin Wayback", content: "http://web.archive.org/web/20070518195017/http://journals.aol.com/juberti/runningman/"},
+ {id: "google", title: "Justin@Google", content: "http://www.youtube.com/watch?v=E8C8ouiXHHk"},
+ ]},
+ {id: "tokbox", title: "TokBox", content: [
+ {id: "website", title: "Website", content: "http://tokbox.com/"},
+ {id: "opentok_lib", title: "OpenTok Library", content: "http://tokbox.com/opentok/api/documentation/gettingstarted"}
+ ]},
+ {id: "big_blue_button", title: "BigBlueButton", content: [
+ {id: "website", title: "Website", content: "http://www.bigbluebutton.org/"},
+ {id: "blog", title: "Blog", content: "http://www.bigbluebutton.org/blog/"},
+ {id: "submission", title: "Ignite Submission", content: "https://mozillaignite.org/ideas/215/"}
+ ]},
+ {id: "ian_on_webrtc", title: "Ian on WebRTC", content: "http://www.tokbox.com/blog/opentok-on-webrtc-grab-your-lab-coat/"},
+ {id: "anants_blog", title: "Anant's Blog", content: "http://kix.in/"}
+ ]},
+ {id: "assorted", display: "none", content: [
+ {id: "google_video_chat", title: "Google Vid. Chat", content: "https://www.google.com/chat/video"},
+ {id: "google_hangouts", title: "Google Hangouts", content: "http://www.google.com/+/learnmore/hangouts/"},
+
+ {id: "chrome_canary", title: "Chrome Canary", content: "https://tools.google.com/dlpage/chromesxs"},
+ {id: "firefox_nightly", title: "Firefox Nightly", content: "http://nightly.mozilla.org/"},
+
+ {id: "sdn", title: "SDN", content: "http://en.wikipedia.org/wiki/Software-defined_networking"},
+ {id: "cebp", title: "CEBP", content: "http://en.wikipedia.org/wiki/Communication-enabled_business_process"},
+ {id: "bit_rates", title: "Bit Rates List", content: "http://en.wikipedia.org/wiki/List_of_device_bit_rates"},
+ {id: "compression", title: "Compression", content: "http://en.wikipedia.org/wiki/Video_compression#Video"},
+ {id: "data_rate_units", title: "Data rate units", content: "http://en.wikipedia.org/wiki/Data_rate_units"},
+ {id: "voip", title: "VOIP", content: "http://en.wikipedia.org/wiki/Voice_over_IP"},
+ {id: "telemedicine", title: "Telemedicine", content: "http://en.wikipedia.org/wiki/Telemedicine"},
+ {id: "ietf", title: "IETF", content: "http://www.ietf.org/"},
+ {id: "web_access", title: "Accessibiliity", content: "http://www.w3.org/WAI/"},
+ {id: "codec_wars", title: "Codec Wars", content: "http://news.softpedia.com/news/Mozilla-May-Have-Won-the-Codec-Wars-for-WebRTC-Before-They-Even-Started-288822.shtml"},
+ ]}
+];
View
803 media/ignite/resources/js/webrtc_main.js
@@ -0,0 +1,803 @@
+/*
+ * This code written in whole by Jacob A Brennan.
+ *
+ * This work is licensed under the Creative Commons Attribution 3.0 Unported
+ * License. To view a copy of this license, visit
+ * http://creativecommons.org/licenses/by/3.0/ or send a letter to Creative
+ * Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA.
+ */
+ignite = {
+ // Define compatibility flags. This may be expanded in the future.
+ compatibility: {
+ EVENT: 1,
+ DOM: 2,
+ HTML5: 4,
+ CONTROLS: 8,
+ CSS_TRANSITION: 16,
+ status: 0, // Not undefined, so that bitwise operations will work.
+ check: function (dom_content_event){
+ // First check if the event DOMContentLoaded can be listened for and will be fired.
+ if(dom_content_event){
+ // Test for the ability to listen for events.
+ if(document.addEventListener){
+ this.status |= this.EVENT;
+ }
+ } else{
+ // Test for HTML5 video support by testing for the existence of the main video.
+ // Note: Assumes document.getElementById. Support charts show support back to IE6.
+ if(document.getElementById("lab_video") || document.getElementById("walkthrough_audio")){
+ this.status |= this.HTML5;
+ }
+ // Test for progress bar click support, which requires clientWidth.
+ // Note: event.clientX is not tested here, but support charts show near universal compatibility.
+ var progress_bar = document.getElementById("control_progress")
+ if((progress_bar.clientWidth !== undefined) && (progress_bar.offsetLeft !== undefined) && progress_bar.offsetParent){
+ this.status |= this.CONTROLS;
+ }
+ // Test for DOM manipulation.
+ if(document.createElement && document.appendChild){
+ var test_element = document.createElement("div");
+ var test_contents = document.createElement("span");
+ test_contents.innerHTML = "textContent check";
+ test_element.appendChild(test_contents)
+ if(test_element.setAttribute || test_element.innerHTML){
+ this.status |= this.DOM;
+ }
+ // textContent is used by the svg DOM in the custom controls.
+ if(!test_contents.textContent){
+ this.status &= ~this.CONTROLS;
+ }
+ var test_style = test_element.style;
+ if( "transition" in test_style ||
+ "MozTransition" in test_style ||
+ "WebkitTransition" in test_style ||
+ "OTransition" in test_style){
+ this.status |= this.CSS_TRANSITION;
+ }
+ }
+ /* Remaining Tests:
+ * mp4 || webm || theora.ogv
+ * inline SVG
+ * Embedded fonts
+ */
+ }
+ return this.status;
+ },
+ notify: function (){
+ /* Function must be delayed to allow for page loading,
+ * particularly the support_message div.
+ */
+ setTimeout(function (){
+ document.getElementById("support_message").style.display = "block";
+ if(!(ignite.compatibility.status & (ignite.compatibility.EVENT | ignite.compatibility.DOM | ignite.compatibility.HTML5))){
+ document.getElementById("support_none").style.display = "block";
+ } else if(!(ignite.compatibility.status & ignite.compatibility.CSS_TRANSITION && ignite.compatibility.status & ignite.compatibility.CONTROLS)){
+ document.getElementById("support_limited").style.display = "block";
+ document.getElementById("support_button").addEventListener("click", function (){
+ document.getElementById("support_message").style.display = "none";
+ }, false);
+ }
+ }, 1000);
+ }
+ },
+ setup: function (){
+ this.seeking = false;
+ this.popcorn = Popcorn("#lab_video");
+ window.addEventListener("resize", function (){ ignite.resize()}, false);
+ window.addEventListener("keydown", function (e){ ignite.key_down(e);}, false);
+ // Configure html urls:
+ var logo_background = document.getElementById("logo_background");
+ logo_background.src = ignite.url.resource_background;
+ var logo1 = document.getElementById("logo1");
+ logo1.src = ignite.url.logo1;
+ var logo2 = document.getElementById("logo2");
+ logo2.src = ignite.url.logo2;
+ var demo_link = document.getElementById("demo_link");
+ demo_link.href = ignite.url.hackable_demo;
+ // Configure Custom Controls:
+ var controls = document.getElementById("controls");
+ if(this.compatibility.status & this.compatibility.CONTROLS){
+ // Capture standard play events.
+ this.popcorn.media.addEventListener("click", function (){
+ if(ignite.walkthrough_in_progress){ return;}
+ if(ignite.popcorn.paused()){
+ ignite.popcorn.play()
+ } else{
+ ignite.popcorn.pause();
+ }
+ }, false);
+ // Big Play Button
+ document.getElementById("control_big_play").addEventListener("click", function (){
+ if(ignite.walkthrough_in_progress){ return;}
+ ignite.popcorn.play();
+ }, false)
+ // Play/Pause Button
+ var play_button = document.getElementById("control_play")
+ play_button.addEventListener("click", function (){
+ if(ignite.walkthrough_in_progress){ return;}
+ if(ignite.popcorn.currentTime() == ignite.popcorn.duration()){
+ ignite.popcorn.currentTime(0);
+ ignite.popcorn.play();
+ return;
+ }
+ if(ignite.popcorn.paused()){ ignite.popcorn.play();}
+ else{ ignite.popcorn.pause();}
+ }, false);
+ this.popcorn.on("playing", function (){
+ document.getElementById("control_big_play").style.opacity = "0";
+ setTimeout(function (){
+ document.getElementById("control_big_play").style.display = "none";
+ }, 1000)
+ play_button.getElementById("play" ).style.opacity = "0";
+ play_button.getElementById("pause").style.opacity = "1";
+ });
+ this.popcorn.on("pause", function (){
+ var play_button = document.getElementById("control_play")
+ play_button.getElementById("play" ).style.opacity = "1";
+ play_button.getElementById("pause").style.opacity = "0";
+ });
+ this.popcorn.on("ended", function (){
+ var play_button = document.getElementById("control_play")
+ play_button.getElementById("play" ).style.opacity = "1";
+ play_button.getElementById("pause").style.opacity = "0";
+ });
+ // Progress Bar and Timer
+ var progress_bar = document.getElementById("control_progress");
+ var buffered_bar = document.getElementById("control_buffered_time");
+ var elapsed_bar = document.getElementById("control_elapsed_time");
+ var timer = document.getElementById("control_timer");
+ progress_bar.addEventListener("click", function (event){
+ if(ignite.walkthrough_in_progress){ return;}
+ var duration = ignite.popcorn.duration();
+ if(!duration){ return;}
+ var resized_width = progress_bar.clientWidth;
+ var actual_left = 0;
+ var offset_element = progress_bar;
+ while(offset_element){
+ actual_left += offset_element.offsetLeft;
+ offset_element = offset_element.offsetParent;
+ }
+ var click_percent = (event.clientX-actual_left) / resized_width;
+ var seek_time = duration * click_percent;
+ elapsed_bar.style.width = ""+(click_percent*100)+"%";
+ ignite.popcorn.currentTime(seek_time);
+ });
+ this.popcorn.on("timeupdate", function (){
+ var duration = ignite.popcorn.duration();
+ if(!duration){ return;}
+ var current_time = ignite.popcorn.currentTime();
+ var elapsed_percent = current_time / duration;
+ elapsed_bar.style.width = ""+(elapsed_percent*100)+"%";
+ var extra_0 = ((current_time%60) < 10)? "0" : "";
+ current_time = ""+Math.floor(current_time/60)+":"+extra_0+Math.floor(current_time%60);
+ var timer_text = timer.getElementById("svg_timer");
+ if(ignite.current_duration){
+ timer_text.textContent = ""+current_time+"/"+ignite.current_duration;
+ } else{
+ timer_text.textContent = ""+current_time;
+ }
+ });
+ this.popcorn.on("progress", function (){
+ ignite.current_duration = ignite.popcorn.duration();
+ if(!ignite.current_duration){ return;}
+ var buffered_range = ignite.popcorn.buffered();
+ var buffer_end = buffered_range.end(0);
+ if(!buffer_end){ buffer_end = 0}
+ buffered_bar.style.width = ""+((buffer_end/ignite.current_duration)*100)+"%";
+ var current_time = ignite.popcorn.currentTime()
+ var extra_0 = ((current_time%60) < 10)? "0" : "";
+ current_time = ""+Math.floor(current_time/60)+":"+extra_0+Math.floor(current_time%60);
+ ignite.current_duration = ""+Math.floor(ignite.current_duration/60)+":"+Math.floor(ignite.current_duration%60);
+ var timer_text = timer.getElementById("svg_timer");
+ if(ignite.current_duration){
+ timer_text.textContent = ""+current_time+"/"+ignite.current_duration;
+ } else{
+ timer_text.textContent = ""+current_time;
+ }
+ });
+ // Volume:
+ var mute_button = document.getElementById("control_mute");
+ mute_button.addEventListener("click", function (){
+ if(ignite.popcorn.muted()){
+ ignite.popcorn.unmute();
+ mute_button.getElementById("sound" ).style.opacity = "1";
+ } else{
+ ignite.popcorn.muted(true);
+ mute_button.getElementById("sound" ).style.opacity = "0";
+ }
+ }, false);
+ } else{
+ this.popcorn.media.controls = "true";
+ controls.style.display = "none";
+ }
+ // Setup frame slider:
+ this.frame = document.getElementById("frame");
+ this.slider = document.getElementById("slider");
+ this.middle = document.getElementById("video_content");
+ this.right = document.getElementById("credits" );
+ this.left = document.getElementById("resources" );
+ this.video_width = 1280;
+ this.video_height = 720;
+ this.slider_state = "middle";
+ this.arrow_left = document.getElementById("arrow_left" );
+ this.arrow_right = document.getElementById("arrow_right");
+ this.arrow_left.addEventListener("click", function (){
+ ignite.transition("left");
+ }, false)
+ this.arrow_right.addEventListener("click", function (){
+ ignite.transition("right");
+ }, false)
+ this.resize();
+ // Setup Resource Section:
+ var setup_node = function (node, tier){
+ for(var I = 0; I < node.content.length; I++){
+ var resource = node.content[I];
+ resource.tier = tier+1;
+ if(resource.display == "none"){
+ continue;
+ }
+ var container_li = document.createElement("li");
+ /* A separate block container is needed to prevent our resources
+ * from having an ancestor positioned absolutely. Otherwise
+ * percentage sizing would be based on that ancestor instead of
+ * the frame. */
+ node.list.appendChild(container_li)
+ var r_element
+ var logo_text;
+ if(typeof(resource.content) == "string"){
+ r_element = document.createElement("a");
+ resource.element = r_element;
+ r_element.setAttribute("id", "rsc_"+resource.title)
+ r_element.setAttribute("class", "resource tier"+(tier+1));
+ r_element.setAttribute("href", resource.content);
+ r_element.setAttribute("target", "_blank");
+ logo_text = ' link"><img src="'+ignite.url.node_linkbox+'" />';
+ r_element.innerHTML = '<div class="title">'+resource.title+'</div><div class="icon'+logo_text+'</div>';
+ }
+ else{
+ r_element = document.createElement("div");
+ resource.element = r_element;
+ r_element.setAttribute("id", "rsc_"+resource.title)
+ r_element.setAttribute("class", "resource tier"+(tier+1));
+ r_element.addEventListener("click",
+ (function (resource_replacement){
+ return function (){
+ ignite.resources.highlight(resource_replacement);
+ }
+ })(resource),
+ false);
+ logo_text = '"><img src="'+ignite.url.node_logo+'" />';
+ r_element.innerHTML = '<div class="title">'+resource.title+'</div><div class="icon'+logo_text+'</div>';
+ resource.list = document.createElement("ul");
+ container_li.appendChild(resource.list);
+ setup_node(resource, tier+1);
+ }
+ container_li.appendChild(r_element);
+ r_element.style.top = (20+I*10)+"%";
+ }
+ }
+ this.resources.list = document.getElementById("resource_list");
+ setup_node(this.resources, 0);
+ // Setup Video Driven pop-corn elements (Global & Link Node):
+ // Setup Global events:
+ var global_group = this.link_node_manager.content[0];
+ for(var I = 0; I < global_group.content.length; I++){
+ var indexed_event = global_group.content[I];
+ var indexed_start_function = (function (passed_event){
+ return function (){
+ passed_event.start();
+ }
+ })(indexed_event);
+ var indexed_end_function = (function (passed_event){
+ return function (){
+ passed_event.end();
+ }
+ })(indexed_event);
+ this.popcorn.cue(indexed_event.time_in , indexed_start_function);
+ this.popcorn.cue(indexed_event.time_out, indexed_end_function );
+ }
+ // Setup Link Nodes events:
+ for(var I = 1; I < this.link_node_manager.content.length; I++){
+ // I is set to 1 so as to skip the global list of elements at position 0.
+ var group = this.link_node_manager.content[I];
+ for(var group_index = 0; group_index < group.content.length; group_index++){
+ var link_node = group.content[group_index];
+ var cue_function = (function (indexed_node){
+ return function (){
+ if(ignite.seeking){ return;}
+ var node = ignite.link_node_manager.create_node(indexed_node);
+ var custom;
+ if(indexed_node.position){
+ custom = indexed_node.position;
+ }
+ ignite.link_node_manager.add_node(node, custom);
+ };
+ })(link_node);
+ this.popcorn.cue(link_node.time_in, cue_function);
+ }
+ this.popcorn.cue(group.time_out, function (){
+ ignite.link_node_manager.clear_nodes();
+ })
+ }
+ this.popcorn.on("seeked", function (){
+ ignite.seeking = false;
+ ignite.link_node_manager.setup_at(ignite.popcorn.currentTime());
+ });
+ this.popcorn.on("seeking", function (){
+ ignite.seeking = true;
+ ignite.link_node_manager.clear_nodes();
+ });
+ // Finished
+ },
+ start_walkthrough: function (){
+ if(this.walkthrough_in_progress){
+ return;
+ }
+ this.walkthrough_in_progress = true;
+ ignite.arrow_left.style.opacity = "0";
+ // There cannot be more than one popcorn instance per document.
+ ignite.popcorn.pause();
+ //ignite.popcorn.emit("seeking");
+ ignite.link_node_manager.clear_nodes();
+ //var walkthrough = Popcorn("#walkthrough_audio");
+ setTimeout(/*
+ walkthrough.cue(1, */function (){
+ var test_resource = {resource_id: "mozilla_ignite"};
+ var test_node = ignite.link_node_manager.create_node(test_resource);
+ ignite.link_node_manager.add_node(test_node);
+ }, 1333);
+ setTimeout(/*
+ walkthrough.cue(2, */function (){
+ var test_resource = {resource_id: "mozilla_ignite.geni"};
+ var test_node = ignite.link_node_manager.create_node(test_resource);
+ ignite.link_node_manager.add_node(test_node);
+ }, 2666);
+ setTimeout(/*
+ walkthrough.cue(3, */function (){
+ var test_resource = {resource_id: "demos"};
+ var test_node = ignite.link_node_manager.create_node(test_resource);
+ ignite.link_node_manager.add_node(test_node);
+ }, 4000);
+ setTimeout(/*
+ walkthrough.cue(6, */function (){
+ ignite.link_node_manager.clear_nodes()
+ ignite.transition("left", true);
+ ignite.arrow_right.style.opacity = "0";
+ // Transitioning left normally causes the right arrow to appear.
+ // In the walkthrough we want to disable this.
+ }, 6000);
+ setTimeout(/*
+ walkthrough.cue(10, */function (){
+ ignite.resources.highlight(ignite.resources.content[0]);
+ }, 9500);
+ setTimeout(/*
+ walkthrough.cue(10, */function (){
+ ignite.resources.highlight(ignite.resources.content[0].content[0]);
+ }, 10000);
+ setTimeout(/*
+ walkthrough.on("ended", */function (){
+ ignite.popcorn.currentTime(10);
+ ignite.link_node_manager.setup_at(ignite.popcorn.currentTime(10))
+ setTimeout(function (){
+ ignite.transition("right", true);
+ ignite.walkthrough_in_progress = false;
+ ignite.popcorn.play()
+ }, 250);
+ setTimeout(function (){
+ ignite.resources.unhighlight(ignite.resources.highlight_tier1);
+ }, 1000);
+ }, 13000);
+ var walkthrough_audio = document.getElementById("walkthrough_audio");
+ walkthrough_audio.play()
+ },
+ viewport_size: function (){
+ var e = document.documentElement;
+ var g = document.getElementsByTagName('body')[0];
+ var _x = window.innerWidth || e.clientWidth || g.clientWidth;
+ var _y = window.innerHeight || e.clientHeight || g.clientHeight;
+ return {width: _x, height: _y};
+ },
+ key_down: function (e){
+ var key_code;
+ if(window.event){ key_code = e.keyCode} // IE 8 and earlier compatibility.
+ else{
+ key_code = e.which// | e.keyCode;
+ }
+ switch(key_code){
+ case 37:{
+ this.transition("left");
+ break;
+ }
+ case 39:{
+ if(this.slider_state == "left"){
+ this.transition("right");
+ }
+ break;
+ }
+ }
+ },
+ resize: function (){
+ this.slider.style.transition = "";
+ this.slider.style.MozTransition = "";
+ this.slider.style.WebkitTransition = "";
+ this.slider.style.OTransition = "";
+ var size = this.viewport_size();
+ var monitor_aspect_ratio = size.width / size.height;
+ var video_aspect_ratio = 16 / 9;
+ var modified_width;
+ var modified_height;
+ if(monitor_aspect_ratio >= video_aspect_ratio){
+ // Center Horizontally
+ modified_height = size.height;
+ modified_width = video_aspect_ratio * modified_height;
+ this.frame.style.top = "0px";
+ this.frame.style.left = ""+Math.floor((size.width-modified_width)/2)+"px";
+ } else{
+ // Center Vertically
+ modified_width = size.width;
+ modified_height = modified_width / video_aspect_ratio;
+ this.frame.style.top = ""+Math.floor((size.height-modified_height)/2)+"px";
+ this.frame.style.left = "0px";
+ }
+ this.frame.style.width = modified_width +"px";
+ this.frame.style.height = modified_height+"px";
+ document.body.style.fontSize = Math.round(modified_height/20)+"px";
+ this.left.style.fontSize = Math.round(modified_height/16)+"px";
+ document.getElementById("walkthrough_link").style.fontSize = Math.round(modified_height/13)+"px";
+ document.getElementById("credits_link").style.fontSize = Math.round(modified_height/13)+"px";
+ document.getElementById("demo_link").style.fontSize = Math.round(modified_height/13)+"px";
+ this.middle.style.top = "0px";
+ this.left.style.top = "0px";
+ this.right.style.top = "0px";
+ this.slider.style.top = "0px";
+ this.middle.style.left = ( modified_width )+"px";
+ this.left.style.left = "0px";
+ this.right.style.left = ( modified_width*2)+"px";
+ switch(this.slider_state){
+ case "middle":{
+ this.slider.style.left = "-100%";
+ break;
+ }
+ case "left":{
+ this.slider.style.left = "0%";
+ break;
+ }
+ case "right":{
+ this.slider.style.left = "-200%"
+ break;
+ }
+ }
+ this.middle.style.width = modified_width+"px";
+ this.left.style.width = modified_width+"px";
+ this.right.style.width = modified_width+"px";
+ this.slider.style.width = (modified_width*3)+"px";
+ this.middle.style.height = modified_height+"px";
+ this.left.style.height = modified_height+"px";
+ this.right.style.height = modified_height+"px";
+ this.slider.style.height = modified_height+"px";
+ },
+ transition: function (direction, force){
+ this.slider.style.transition = "left 1s";
+ this.slider.style.MozTransition = "left 1s";
+ this.slider.style.WebkitTransition = "left 1s";
+ this.slider.style.OTransition = "left 1s";
+ switch(direction){
+ case "left":{
+ if(this.arrow_left.style.opacity != "1" && !force){
+ return;
+ }
+ switch(this.slider_state){
+ case "middle":{
+ this.slider_state = "left";
+ break;
+ }
+ case "right":{
+ this.slider_state = "middle";
+ break;
+ }
+ }
+ break;
+ }
+ case "right":{
+ if((this.arrow_right.style.opacity != "1" && !force)){
+ return;
+ }
+ switch(this.slider_state){
+ case "middle":{
+ this.slider_state = "right";
+ break;
+ }
+ case "left":{
+ this.slider_state = "middle";
+ break;
+ }
+ }
+ break;
+ }
+ }
+ switch(this.slider_state){
+ case "left":{
+ ignite.link_node_manager.clear_nodes();
+ this.slider.style.left = "0%";
+ this.arrow_left.style.opacity = "0";
+ this.arrow_right.style.opacity = "1";
+ this.popcorn.pause()
+ break;
+ }
+ case "middle":{
+ this.slider.style.left = "-100%";
+ this.arrow_left.style.opacity = "1";
+ this.arrow_right.style.opacity = "0";
+ if(!this.walkthrough_in_progress){
+ ignite.link_node_manager.setup_at(ignite.popcorn.currentTime());
+ if(ignite.popcorn.currentTime() != ignite.popcorn.duration()){
+ // Don't play if returning to video from credits or resources after video has ended.
+ this.popcorn.play();
+ }
+ }
+ break;
+ }
+ case "right":{
+ ignite.link_node_manager.clear_nodes();
+ this.slider.style.left = "-200%";
+ this.arrow_right.style.opacity = "0";
+ this.popcorn.pause()
+ break;
+ }
+ }
+ },
+ link_node_manager: {
+ current_nodes: new Array(),
+ add_node: function (node, custom){
+ ignite.middle.appendChild(node);
+ if(custom){
+ this.custom_node = node;
+ node.style.top = custom.top;
+ node.style.left = custom.left;
+ node.style.transition = "opacity 1s";
+ node.style.MozTransition = "opacity 1s";
+ node.style.WebkitTransition = "opacity 1s";
+ node.style.OTransition = "opacity 1s";
+ } else{
+ var position;
+ for(var I = 0; I < this.current_nodes.length; I++){
+ if(!this.current_nodes[I]){
+ position = I;
+ break;
+ }
+ }
+ if(position === undefined){
+ position = Math.min(this.current_nodes.length, 4)
+ }
+ if(this.current_nodes.length > position && this.current_nodes[position]){
+ this.bump_node(this.current_nodes[position]);
+ }
+ this.current_nodes[position] = node;
+ var percent = 30 + position*8
+ node.style.top = percent+"%";
+ node.style.left = "7%";
+ node.style.transition = "opacity 1s, left 2s, top 1s";
+ node.style.MozTransition = "opacity 1s, left 2s, top 1s";
+ node.style.WebkitTransition = "opacity 1s, left 2s, top 1s";
+ node.style.OTransition = "opacity 1s, left 2s, top 1s";
+ }
+ /* The following statement must be delayed from the other settings
+ * to ensure that the transition happens.
+ */
+ setInterval(function (){node.style.opacity = "1";}, 100);
+ },
+ bump_node: function (node){
+ node.style.transition = "opacity 1s, left 2s, top 1s";
+ node.style.MozTransition = "opacity 1s, left 2s, top 1s";
+ node.style.WebkitTransition = "opacity 1s, left 2s, top 1s";
+ node.style.OTransition = "opacity 1s, left 2s, top 1s";
+ var place = this.current_nodes.indexOf(node);
+ this.current_nodes[place] = null;
+ place--;
+ if(place < 0){
+ this.remove_node(node);
+ } else{
+ node.style.top = 30+(8*place)+"%";
+ var old_node = this.current_nodes[place];
+ if(old_node){
+ this.bump_node(old_node);
+ }
+ this.current_nodes[place] = node;
+ }
+ },
+ create_node: function (node_json){
+ var node = document.createElement("a");
+ var resource = ignite.resources.get_resource_from_id(node_json.resource_id);
+ if(typeof(resource.content) == "string"){
+ node.setAttribute("class", "link_node");
+ node.setAttribute("href", resource.content)
+ node.setAttribute("target", "_blank");
+ node.innerHTML = '<div class="title">'+resource.title+'</span></div><div class="icon"><img src="'+ignite.url.node_linkbox+'" /></div>';
+ } else{
+ node.setAttribute("class", "link_node link_node_group");
+ node.innerHTML = '<div class="title">'+resource.title+'</span></div><div class="icon"><img src="'+ignite.url.node_logo+'" /></div>';
+ node.addEventListener("click", function (){
+ if(ignite.walkthrough_in_progress){ return;}
+ ignite.transition("left");
+ setTimeout(function (){
+ ignite.resources.navigate_id(node_json.resource_id);
+ }, 500);
+ }, false);
+ }
+ return node;
+ },
+ remove_node: function (node){
+ if(node == this.custom_node){
+ node.style.opacity = "0";
+ this.custom_node = undefined;
+ } else{
+ node.style.left = "-100%";
+ var position = this.current_nodes.indexOf(node);
+ if(position != -1){
+ this.current_nodes[position] = undefined;
+ }
+ }
+ setTimeout(function (){
+ ignite.middle.removeChild(node);
+ }, 1000);
+ },
+ clear_nodes: function (){
+ if(this.custom_node){
+ this.remove_node(this.custom_node);
+ }
+ for(var I = 0; I < this.current_nodes.length; I++){
+ var node = this.current_nodes[I];
+ if(node){
+ this.remove_node(node);
+ }
+ }
+ },
+ setup_at: function (time_code){
+ // Setup Global events:
+ var global_group = this.content[0];
+ for(var event_index = 0; event_index < global_group.content.length; event_index++){
+ var indexed_event = global_group.content[event_index];
+ indexed_event.check(ignite.popcorn.currentTime());
+ }
+ // Setup current link node group:
+ var display_group;
+ var display_nodes = new Array();
+ for(var I = 1 ; I < this.content.length; I++){
+ // This index starts at 1 so as to skip the global group at position 0.
+ var group = this.content[I];
+ if(group.time_in <= time_code && group.time_out > time_code){
+ display_group = group;
+ break;
+ }
+ }
+ if(!display_group){ return;}
+ for(var node_index = display_group.content.length-1; node_index >= 0; node_index--){
+ var indexed_node = display_group.content[node_index];
+ if(indexed_node.time_in > time_code){
+ continue;
+ }
+ display_nodes.push(indexed_node);
+ if(display_nodes.length >= 5){
+ break;
+ }
+ }
+ if(display_nodes.length <= 0){ return;}
+ for(var I = display_nodes.length-1; I >= 0; I--){
+ var indexed_node = display_nodes[I];
+ var new_node = this.create_node(indexed_node);
+ var custom;
+ if(indexed_node.position){
+ custom = indexed_node.position;
+ }
+ this.add_node(new_node, custom)
+ }
+ }
+ }
+};
+ignite.resources = {
+ highlight: function (resource){
+ switch(resource.tier){
+ case 1:{
+ if(this.highlight_tier1){
+ this.unhighlight(this.highlight_tier1);
+ }
+ this.highlight_tier1 = resource;
+ break;
+ }
+ case 2:{
+ if(this.highlight_tier2){
+ this.unhighlight(this.highlight_tier2);
+ }
+ this.highlight_tier2 = resource;
+ break;
+ }
+ }
+ resource.element.firstChild.style.background = "rgb(239, 72, 25)";
+ for(var I = 0; I < resource.content.length; I++){
+ var sub_rsc = resource.content[I];
+ var old_left = sub_rsc.element.style.left;
+ var old_top = sub_rsc.element.style.top;
+ sub_rsc.element.style.left = (10+((resource.tier-1)*28))+"%";
+ sub_rsc.element.style.top = resource.element.style.top;
+ sub_rsc.element.style.display = "block";
+ sub_rsc.element.style.transition = "top 1s, left 0.5s";
+ sub_rsc.element.style.MozTransition = "top 1s, left 0.5s";
+ sub_rsc.element.style.WebkitTransition = "top 1s, left 0.5s";
+ sub_rsc.element.style.OTransition = "top 1s, left 0.5s";
+ var mover_func = (function (indexed_rsc, indexed_left, indexed_top){
+ return function (){
+ indexed_rsc.element.style.left = indexed_left;
+ indexed_rsc.element.style.top = indexed_top;
+ }
+ })(sub_rsc, old_left, old_top)
+ setTimeout(mover_func, 50);
+ }
+ },
+ unhighlight: function (resource){
+ if(resource.tier == 1){
+ if(this.highlight_tier2){
+ this.unhighlight(this.highlight_tier2);
+ }
+ }
+ this["highlight_tier"+resource.tier] = null;
+ resource.element.firstChild.style.background = null;
+ for(var I = 0; I < resource.content.length; I++){
+ var sub_rsc = resource.content[I];
+ sub_rsc.element.style.display = "none";
+ sub_rsc.element.style.transition = "";
+ sub_rsc.element.style.MozTransition = "";
+ sub_rsc.element.style.WebkitTransition = "";
+ sub_rsc.element.style.OTransition = "";
+ }
+ },
+ navigate_id: function (resource_id){
+ var navigation_steps = resource_id.split(".");
+ var parent_resource = ignite.resources;
+ for(var nav_index = 0; nav_index < navigation_steps.length; nav_index++){
+ var step_id = navigation_steps[nav_index];
+ for(var res_index = 0; res_index < parent_resource.content.length; res_index++){
+ var test_resource = parent_resource.content[res_index];
+ if(test_resource.id == step_id){
+ parent_resource = test_resource;
+ this.highlight(parent_resource);
+ break;
+ }
+ }
+ }
+ },
+ get_resource_from_id: function (resource_id){
+ var navigation_steps = resource_id.split(".");
+ var parent_resource = ignite.resources;
+ for(var nav_index = 0; nav_index < navigation_steps.length; nav_index++){
+ var step_id = navigation_steps[nav_index];
+ for(var res_index = 0; res_index < parent_resource.content.length; res_index++){
+ var test_resource = parent_resource.content[res_index];
+ if(test_resource.id == step_id){
+ parent_resource = test_resource;
+ break;
+ }
+ }
+ }
+ return parent_resource;
+ }
+};
+ignite.compatibility.check(true);
+if((ignite.compatibility.status & ignite.compatibility.EVENT)){
+ document.addEventListener("DOMContentLoaded", function (){
+ ignite.compatibility.check();
+ var full_featured = (
+ ignite.compatibility.CONTROLS |
+ ignite.compatibility.CSS_TRANSITION |
+ ignite.compatibility.DOM |
+ ignite.compatibility.EVENT |
+ ignite.compatibility.HTML5);
+ if(ignite.compatibility.status != full_featured){
+ ignite.compatibility.notify()
+ }
+ if(ignite.compatibility.status & (ignite.compatibility.DOM | ignite.compatibility.HTML5)){
+ ignite.setup();
+ }
+ });
+} else{
+ ignite.compatibility.notify()
+}
View
8 media/ignite/resources/js/webrtc_urls.js
@@ -0,0 +1,8 @@
+ignite.url = {
+ node_linkbox: ignite_bundle.data.MEDIA_URL + "resources/svg/linkbox_padding.svg",
+ node_logo: ignite_bundle.data.MEDIA_URL + "resources/svg/ignite_embossed_logo.svg",
+ logo1: ignite_bundle.data.MEDIA_URL + "resources/svg/ignite_w_text.svg",
+ logo2: ignite_bundle.data.MEDIA_URL + "resources/svg/webrtc_w_text.svg",
+ resource_background: ignite_bundle.data.MEDIA_URL + "resources/svg/ignite_embossed_logo.svg",
+ hackable_demo: "https://github.com/mozilla/mozilla-ignite-learning-lab-demos/tree/master/lab-2-webrtc-video"
+};
View
186 media/ignite/resources/static/webrtc.html
@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <title>Mozilla Ignite Learning Lab - WebRTC</title>
+ <link rel="stylesheet" type="text/css" href="/media/ignite/resources/css/ignite_ll.css" />
+ <script src="../js/popcorn.min.js"></script>
+ <script src="../js/webrtc_main.js"></script>
+ <script src="../js/webrtc_urls.js"></script>
+ <script src="../js/ignite_ll_webrtc_resources.js"></script>
+ <script src="../js/global_popcorn_events_webrtc.js"></script>
+<!-- The elements with the following ids must be edited:
+source_walkthrough
+source_mp4
+source_ogv
+sourc_webm
+
+Also, remember to edit the file rtc_urls.js
+-->
+ </head>
+ <body>
+ <div id="support_message">
+ <div id="support_none">
+ <span>Your browser does not support HTML5. Please update your browser to view this video.</span>
+ </div>
+ <div id="support_limited">
+ <span>Your browser is out of date. Please update your browser to access all features of this video.</span>
+ <br />
+ <button id="support_button">Ok</button>
+ </div>
+ </div>
+ <div id="frame">
+ <div id="slider">
+ <div id="video_content">
+ <video id="lab_video">
+ <source id="source_mp4" src="http://videos.mozilla.org/serv/webmademovies/ignite/ignite_ll_webrtc.mp4"></source>
+ <source id="source_ogv" src="http://videos.mozilla.org/serv/webmademovies/ignite/ignite_ll_webrtc.ogv"></source>
+ <source id="source_webm" src="http://videos.mozilla.org/serv/webmademovies/ignite/ignite_ll_webrtc.webm"></source>
+ </video>
+ <div id="controls">
+ <svg id="control_big_play" width="100" height="100" viewBox="0 0 100 100"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:ev="http://www.w3.org/2001/xml-events">
+ <style>
+ #big_play:hover{
+ fill: rgb(239, 72, 25);
+ opacity: 1;
+ }
+ </style>
+ <title>Big Play</title>
+ <path id="big_play" d="m10,10l80,40l-80,40l0,-80" opacity="0.8" id="svg_6" fill="white" />
+ </svg>
+ <div id="control_panel">
+ <svg id="control_play" width="100" height="100" viewBox="0 0 100 100"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:ev="http://www.w3.org/2001/xml-events">
+ <title>Play / Pause</title>
+ <style>
+ #pause{
+ opacity: 0;
+ }
+ .icon:hover{
+ fill: rgb(239, 72, 25);
+ }
+ </style>
+ <g class="icon" stroke-linejoin="round" fill="rgb(102, 102, 102)" stroke="#000000" stroke-width="0">
+ <g id="play">
+ <path id="play" d="m5,5l81,45l-81,45l0,-90z" />
+ </g>
+ <g id="pause">
+ <path d="m12,86l0,-72l20,0l0,71.20879l-20,0.79121z" />
+ <path d="m45,86l0,-72l20,0l0,71.20879l-20,0.79121z" />
+ </g>
+ </g>
+ </svg>
+ <div id="control_progress">
+ <div id="control_buffered_time"></div>
+ <div id="control_elapsed_time"></div>
+ </div>
+ <svg id="control_mute" width="100" height="100" viewBox="0 0 100 100"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:ev="http://www.w3.org/2001/xml-events">
+ <title>Mute / Unmute</title>
+ <style>
+ .icon:hover{
+ fill: rgb(239, 72, 25);
+ }
+ </style>
+ <g stroke="#000000" stroke-width="0" stroke-linejoin="round">
+ <path class="icon" d="m8,30l0,40l20,0l25,25l0,-90l-25,25l-20,0z" fill="rgb(102, 102, 102)" />
+ <g id="sound" fill="none" stroke="rgb(102, 102, 102)" stroke-width="8">
+ <path d="m65,20a50,50 0 0 10,60" id="svg_6"/>
+ <path d="m75,10a50,50 0 0 10,80" id="svg_7"/>
+ </g>
+ </g>
+ </svg>
+ <svg id="control_timer" width="300" height="100" viewBox="0 0 225 100"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:ev="http://www.w3.org/2001/xml-events">
+ <title>Timer</title>
+ <text id="svg_timer" transform="matrix(2.0294, 0, 0, 2.0294, 4.73115, 22.9506)" text-anchor="left"
+ font-family="sans-serif" font-size="24" y="22" x="0" stroke="#000000"></text>
+ </svg>
+ </div>
+ </div>
+ <div id="walkthrough">
+ <a id="walkthrough_link" href="#"><div>Walkthrough</div></a>
+ <audio id="walkthrough_audio">
+ <source src="http://videos-cdn.mozilla.net/serv/webmademovies/ignite/walkthrough.m4a"></source>
+ <source src="http://videos-cdn.mozilla.net/serv/webmademovies/ignite/walkthrough.ogg"></source>
+ </audio>
+ </div>
+ <!-- Do not add the demo link here. Add the correct URL to the rtc_urls.js file. -->
+ <a id="demo_link" href="#"><div>Hackable Demo</div></a>
+ <a id="credits_link" href="#"><div>Credits</div></a>
+ </div>
+ <div id="resources">
+ <!-- This decorative img element is included here and not in CSS as a result of
+ issues with scaling of svg background images. -->
+ <img id="logo_background" alt="decorative background" />
+ <ul id="resource_list"></ul>
+ </div>
+ <div id="credits">
+<ul>
+ <li>Credits</li>
+ <li>
+<span class="credit_name">Open the Studio</span>
+<span class="credit_type">Design and Development</span>
+</li>
+<li>
+<span class="credit_name">Kenny Katzgrau</span>
+<span class="credit_type">Interviews And Writing</span>
+</li>
+ <li>Special Thanks</li>
+<li>
+<span class="credit_name">Anant Narayanan</span>
+<span class="credit_type">Interview, Mozilla</span>
+</li>
+<li>
+<span class="credit_name">Ian Small</span>
+<span class="credit_type">Interview, TokBox</span>
+</li>
+<li>
+<span class="credit_name">Fred Dixon</span>
+<span class="credit_type">Interview, BigBlueButton</span>
+</li>
+<li>
+<span class="credit_name">Justin Uberti</span>
+<span class="credit_type">Interview, Google</span>
+</li>
+</ul>
+</div>
+ </div>
+ <img id="logo1" class="logo_centered" alt="Mozilla Ignite Logo" />
+ <img id="logo2" class="logo_centered" alt="WebRTC Learning Lab Logo" />
+ <svg id="arrow_left" class="slider_arrow interface" width="50px" height="200px" viewBox="0 0 50 200"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:ev="http://www.w3.org/2001/xml-events">
+ <style>
+ .arrow:hover{
+ fill: rgb(239, 72, 25);
+ opacity: 1;
+ }
+ </style>
+ <polygon class="arrow" fill="#ffffff" opacity="0.4" points="50,0 0,100 50,200" />
+ </svg>
+ <svg id="arrow_right" class="slider_arrow interface" width="50px" height="200px" viewBox="0 0 50 200"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:ev="http://www.w3.org/2001/xml-events">
+ <style>
+ .arrow:hover{
+ fill: rgb(239, 72, 25);
+ opacity: 1;
+ }
+ </style>
+ <polygon class="arrow" fill="#ffffff" opacity="0.4" points="0,0 50,100 0,200" />
+ </svg>
+ </div>
+ </body>
+</html>
View
152 media/ignite/resources/svg/webrtc_w_text.svg
@@ -0,0 +1,152 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="1520.922px" height="837.062px" viewBox="0 0 1520.922 837.062" enable-background="new 0 0 1520.922 837.062"
+ xml:space="preserve">
+<g id="Layer_2" display="none">
+ <g display="inline" opacity="0.7">
+ <path fill="#FFFFFF" d="M984.799,730.632h13.583v79.878h17.986v12.58h-31.57L984.799,730.632L984.799,730.632z"/>
+ <path fill="#FFFFFF" d="M1021.908,730.632h31.07v13.962h-17.486v24.279h12.58v14.844h-12.58v25.407h17.486v13.966h-31.07V730.632z
+ "/>
+ <path fill="#FFFFFF" d="M1057.004,823.09l13.964-92.458h16.604l13.962,92.458h-13.208l-2.515-18.868h-13.083l-2.516,18.868
+ H1057.004z M1080.022,760.697l-0.377-2.389h-0.753l-0.378,2.389l-3.899,29.183h9.307L1080.022,760.697z"/>
+ <path fill="#FFFFFF" d="M1132.103,823.09l-7.046-38.995h-3.644v38.995h-13.587v-92.458h13.587
+ c16.225,0,23.145,9.184,23.145,26.669c0,9.184-2.391,17.486-7.549,21.007l8.68,44.782H1132.103z M1121.41,771.515
+ c1.885,0,4.403-0.249,6.415-2.011c2.014-1.762,3.65-5.16,3.65-11.698c0-6.544-1.637-10.066-3.65-11.827
+ c-2.012-1.761-4.528-1.888-6.415-1.888V771.515z"/>
+ <path fill="#FFFFFF" d="M1167.577,774.913l-1.131-4.275h-0.753v52.452h-12.453v-92.458h12.074l13.208,48.178l1.134,4.277h0.756
+ v-52.455h12.452v92.458h-12.078L1167.577,774.913z"/>
+ <path fill="#FFFFFF" d="M1202.925,730.632h13.586v92.458h-13.586V730.632z"/>
+ <path fill="#FFFFFF" d="M1240.915,774.913l-1.133-4.275h-0.755v52.452h-12.453v-92.458h12.078l13.207,48.178l1.134,4.277h0.755
+ v-52.455h12.451v92.458h-12.075L1240.915,774.913z"/>
+ <path fill="#FFFFFF" d="M1298.025,763.842v-14.215c0-2.514-0.503-4.275-1.762-5.786c-0.628-0.632-1.636-1.004-2.765-1.004
+ c-2.393,0-3.526,1.762-4.027,3.395c-0.379,1.004-0.499,2.14-0.499,3.396v55.601c0,2.646,0.626,4.406,1.883,5.789
+ c0.628,0.63,1.508,1.005,2.644,1.005c2.392,0,3.523-1.512,4.023-3.395c0.38-0.879,0.503-2.015,0.503-3.399v-16.726h-5.41v-11.448
+ h18.996v46.036h-8.051l-1.634-4.401c-2.516,3.146-6.165,5.409-10.566,5.409c-4.403,0-7.422-1.134-9.687-3.145
+ c-2.265-1.887-3.773-4.279-4.779-6.792c-1.132-2.896-1.635-6.292-1.512-10.067v-54.467c0.13-3.646,0.882-7.044,2.266-9.934
+ c1.132-2.52,2.769-5.033,5.286-6.921c2.512-1.887,6.039-3.145,10.564-3.145c4.527,0,7.924,1.258,10.441,3.145
+ c2.516,1.884,4.277,4.401,5.409,6.921c1.382,2.89,2.138,6.288,2.262,9.934v14.215H1298.025z"/>
+ <path fill="#FFFFFF" d="M1340.921,730.632h13.586v79.878h17.988v12.58h-31.574V730.632z"/>
+ <path fill="#FFFFFF" d="M1375.511,823.09l13.966-92.458h16.605l13.96,92.458h-13.208l-2.513-18.868h-13.084l-2.516,18.868
+ H1375.511z M1398.532,760.697l-0.377-2.389h-0.755l-0.377,2.389l-3.899,29.183h9.308L1398.532,760.697z"/>
+ <path fill="#FFFFFF" d="M1426.334,823.09v-92.458h11.951c8.049,0,14.339,1.512,18.486,5.409c4.152,3.899,6.291,9.938,6.291,19.123
+ c0,4.401-0.378,7.67-1.763,10.692c-1.383,3.017-3.521,5.533-6.665,8.426c3.396,1.889,5.912,5.411,7.927,11.324
+ c1.002,2.892,1.508,6.666,1.508,11.316c0,6.921-1.258,13.082-4.403,17.866c-3.146,4.78-8.552,7.925-16.604,8.301H1426.334z
+ M1439.921,768.748c1.131,0,3.771,0.125,6.036-1.384c2.266-1.508,4.026-4.529,4.026-10.943c0-6.417-1.761-9.435-4.026-10.946
+ c-2.265-1.51-4.905-1.384-6.036-1.384V768.748z M1439.921,809.631c1.131,0,3.771,0.251,6.036-1.383
+ c2.266-1.636,4.026-5.285,4.026-12.829c0-7.546-1.761-11.197-4.026-12.831c-2.265-1.638-4.905-1.385-6.036-1.385V809.631z"/>
+ </g>
+</g>
+<g id="Layer_1_1_">
+ <g>
+ <path opacity="0.4" fill="#FEFEFD" enable-background="new " d="M609.858,137.785c-24.353-5.781-48.525-4.951-72.534,1.957
+ c-56.657,16.295-98.422,69.563-101.622,129.625c-3.087,57.92,32.436,114.479,85.618,136.308c0.249,1.001,0.494,1.998,0.742,2.999
+ c-37.314,63.481-19.791,144.815,40.457,187.75c60.242,42.935,142.46,32.407,191.744-24.542l1.268,0.091l1.261-0.15
+ c36.033,40.771,81.299,57.322,134.6,47.974c92.273-16.193,147.765-120.317,98.125-209.985c2.627-1.767,5.182-3.649,7.893-5.282
+ c51.194-30.814,76.602-75.47,73.927-135.794c-3.757-84.628-91.096-149.421-173.32-128.202c-0.446-0.347-0.949-0.47-1.508-0.363
+ C886.986,47.356,815.006-4.203,726.103,8.915c-61.857,9.13-110.978,66.107-114.394,128.115
+ C611.066,137.225,610.452,137.476,609.858,137.785z"/>
+ <path opacity="0.8" fill="#FDFDFC" enable-background="new " d="M565.186,419.068c0.021-19.089,0.045-38.177,0.068-57.271
+ c0.154-44.878,0.242-89.764,0.496-134.639c0.146-25.247,14.225-39.231,39.678-39.827c3.161-0.074,6.317-0.349,9.479-0.527
+ c24.623,0.015,49.241,0.031,73.861,0.053c43.636-0.01,87.28-0.028,130.92-0.039c24.368,0.341,48.739,0.678,73.111,1.016
+ c20.318,8.418,27.442,24.044,27.092,45.426c-0.621,38.096,0.091,76.214,0.248,114.32c0.019,24.728,0.039,49.456,0.057,74.182
+ c-4.426,32.87-21.438,43.986-56.088,41.094c-24.713-2.063-49.769-0.037-74.676,0.167c-18.67,5.488-34.901,16.289-52.513,24.085
+ c-5.262,2.327-10.377,4.978-15.564,7.487c-29.239,14.616-58.476,29.22-87.716,43.829c-4.454,2.154-8.911,4.314-13.362,6.474
+ c-7.886,1.107-13.492,8.559-22.014,7.903c1.582-12.26,2.839-17.418,6.812-32.736c7.772-18.608,8.571-25.204,12.808-37.996
+ c6.333-19.129,6.096-19.205-14.091-19.704C578.303,461.728,561.196,442.547,565.186,419.068z"/>
+ <g>
+ <path opacity="0.2" fill="#FFFFFF" enable-background="new " d="M736.923,487.104c-5.263,2.327-10.379,4.978-15.563,7.481
+ c1.91,9.311,3.823,18.617,5.736,27.925c7.14,17.511,15.453,34.376,27.169,49.371l1.267,0.085l1.262-0.147
+ c23.926-32.358,35.223-68.497,32.642-108.808C770.767,468.505,754.535,479.304,736.923,487.104z"/>
+ <path opacity="0.2" fill="#FFFFFF" enable-background="new " d="M660.97,157.136c-15.795-8.241-31.437-16.844-49.257-20.11
+ c-0.644,0.2-1.26,0.451-1.854,0.755c-0.229,2.741-0.456,5.476-0.686,8.216c0.415,7.191,0.83,14.383,1.245,21.575
+ c0.18,0.875,0.359,1.751,0.54,2.623c1.316,5.535,2.635,11.07,3.951,16.604c24.623,0.016,49.243,0.031,73.863,0.053
+ C684.057,172.69,669.288,167.934,660.97,157.136z"/>
+ <path opacity="0.2" fill="#FFFFFF" enable-background="new " d="M852.384,156.957c-12.777,7.9-23.52,18.026-32.696,29.862
+ c24.368,0.336,48.739,0.678,73.107,1.016c1.692-7.553,3.384-15.097,5.07-22.647c0.044-8.221,0.098-16.436,0.146-24.656
+ c-0.445-0.347-0.951-0.47-1.509-0.363C880.466,142.255,866.92,150.916,852.384,156.957z"/>
+ <path opacity="0.2" fill="#FFFFFF" enable-background="new " d="M530.557,391.855c-1.592,5.604-4.952,10.021-9.237,13.818
+ c0.249,1.001,0.494,1.998,0.742,3.004c10.141,3.151,20.28,6.302,30.418,9.452c4.236,0.314,8.469,0.625,12.705,0.941
+ c0.021-19.092,0.045-38.18,0.068-57.272C550.734,368.406,542.825,382.65,530.557,391.855z"/>
+ <path opacity="0.2" fill="#FFFFFF" enable-background="new " d="M982.171,395.885c-8.323-9.882-17.435-19.095-26.23-28.58
+ c-12.09-6.292-22.097-16.36-35.8-19.726c0.019,24.724,0.041,49.453,0.057,74.178c23.901,1.994,46.724-2.315,68.672-11.747
+ C989.587,403.936,985.447,399.771,982.171,395.885z"/>
+ </g>
+ <g>
+ <path opacity="0.6" fill="#FFFFFF" enable-background="new " d="M598.562,552.663c-0.099,0.019-0.201,0.036-0.302,0.051
+ c0.006,0.028,0.006,0.055,0.011,0.08L598.562,552.663z"/>
+ </g>
+ <path fill="#D66D1C" d="M598.585,555.516c-0.008-0.948-0.017-1.9-0.023-2.853l-0.291,0.131"/>
+ <path fill="#D66D1C" d="M620.28,544.894"/>
+ <path fill="#FDFDFC" d="M598.562,552.663c0.007,0.952,0.015,1.904,0.023,2.853c-0.657-0.851-1.315-1.692-1.976-2.543
+ C597.261,552.871,597.911,552.769,598.562,552.663z"/>
+ <path fill="#4B86C8" d="M610.955,170.199c-0.813-0.295-1.622-0.594-2.433-0.89c0.629-0.575,1.254-1.151,1.887-1.732
+ C610.597,168.448,610.774,169.325,610.955,170.199z"/>
+ </g>
+ <path opacity="0.7" fill="#FFFFFF" enable-background="new " d="M354.431,795.098l-30.95-114.793l-31.345,114.793
+ c-2.436,8.71-4.373,14.958-5.811,18.746c-1.438,3.785-3.94,7.179-7.508,10.183c-3.573,3.006-8.313,4.51-14.234,4.51
+ c-4.79,0-8.729-0.895-11.82-2.679c-3.088-1.785-5.592-4.311-7.506-7.576c-1.918-3.265-3.483-7.136-4.705-11.624
+ c-1.22-4.482-2.307-8.643-3.265-12.474L205.42,665.284c-1.918-7.487-2.874-13.189-2.874-17.108c0-4.961,1.742-9.141,5.225-12.536
+ c3.484-3.4,7.79-5.093,12.93-5.093c7.051,0,11.796,2.263,14.234,6.792c2.44,4.524,4.573,11.099,6.401,19.718l25.074,111.795
+ l28.077-104.61c2.09-8.012,3.962-14.103,5.618-18.285c1.652-4.178,4.356-7.793,8.097-10.842c3.74-3.048,8.833-4.572,15.278-4.572
+ c6.531,0,11.602,1.587,15.213,4.767c3.613,3.18,6.118,6.638,7.509,10.387c1.395,3.744,3.266,9.924,5.618,18.541l28.34,104.609
+ l25.078-111.792c1.22-5.83,2.371-10.4,3.458-13.711c1.088-3.312,2.958-6.271,5.618-8.886c2.654-2.609,6.507-3.915,11.554-3.915
+ c5.049,0,9.338,1.677,12.865,5.03c3.527,3.352,5.288,7.552,5.288,12.599c0,3.573-0.958,9.273-2.875,17.11l-31.865,128.902
+ c-2.176,8.704-3.985,15.081-5.42,19.131c-1.436,4.048-3.876,7.603-7.314,10.644c-3.438,3.05-8.294,4.571-14.561,4.571
+ c-5.924,0-10.667-1.474-14.235-4.44c-3.574-2.963-6.052-6.29-7.445-9.987C358.918,810.4,356.958,804.069,354.431,795.098z"/>
+ <path opacity="0.7" fill="#FFFFFF" enable-background="new " d="M560.125,764.8h-69.74c0.086,8.099,1.719,15.237,4.898,21.419
+ c3.18,6.186,7.4,10.843,12.669,13.979c5.269,3.134,11.082,4.704,17.435,4.704c4.265,0,8.164-0.505,11.688-1.502
+ c3.524-1,6.944-2.566,10.253-4.704c3.31-2.135,6.354-4.42,9.14-6.857c2.786-2.436,6.4-5.747,10.84-9.927
+ c1.831-1.57,4.442-2.352,7.838-2.352c3.659,0,6.618,0.998,8.883,3.003c2.265,2.006,3.397,4.832,3.397,8.49
+ c0,3.221-1.262,6.986-3.788,11.298c-2.525,4.307-6.333,8.442-11.429,12.405c-5.094,3.959-11.492,7.251-19.198,9.86
+ c-7.708,2.612-16.566,3.92-26.577,3.92c-22.899,0-40.7-6.534-53.415-19.594c-12.711-13.058-19.07-30.775-19.07-53.15
+ c0-10.533,1.569-20.309,4.705-29.317c3.135-9.01,7.705-16.737,13.712-23.182c6.006-6.443,13.407-11.383,22.203-14.82
+ c8.793-3.439,18.544-5.163,29.255-5.163c13.93,0,25.881,2.94,35.848,8.815c9.97,5.876,17.437,13.474,22.398,22.793
+ c4.962,9.318,7.446,18.807,7.446,28.471c0,8.969-2.571,14.776-7.708,17.434C576.666,763.475,569.442,764.8,560.125,764.8z
+ M490.385,744.558h64.646c-0.873-12.188-4.16-21.309-9.859-27.358c-5.705-6.053-13.212-9.078-22.528-9.078
+ c-8.882,0-16.173,3.067-21.875,9.206C495.065,723.466,491.607,732.543,490.385,744.558z"/>
+ <path opacity="0.7" fill="#FFFFFF" enable-background="new " d="M648.931,650.92v54.46c6.704-6.966,13.537-12.298,20.502-16
+ c6.965-3.698,15.587-5.547,25.858-5.547c11.841,0,22.224,2.807,31.149,8.42c8.923,5.618,15.848,13.755,20.764,24.423
+ c4.918,10.665,7.381,23.313,7.381,37.939c0,10.797-1.371,20.699-4.118,29.711c-2.743,9.01-6.722,16.827-11.948,23.442
+ c-5.225,6.618-11.557,11.731-19.002,15.345c-7.443,3.615-15.65,5.423-24.617,5.423c-5.485,0-10.643-0.654-15.478-1.962
+ c-4.833-1.304-8.946-3.025-12.341-5.158c-3.397-2.131-6.29-4.331-8.687-6.595c-2.396-2.266-5.549-5.66-9.465-10.189v3.529
+ c0,6.703-1.614,11.777-4.83,15.216c-3.222,3.438-7.313,5.161-12.278,5.161c-5.05,0-9.078-1.721-12.082-5.161
+ c-3.001-3.438-4.504-8.513-4.504-15.216V652.486c0-7.227,1.458-12.689,4.375-16.39c2.915-3.701,6.987-5.55,12.21-5.55
+ c5.488,0,9.709,1.762,12.67,5.285C647.452,639.36,648.931,644.39,648.931,650.92z M650.629,756.834
+ c0,14.197,3.244,25.099,9.729,32.717c6.489,7.619,14.998,11.429,25.533,11.429c8.966,0,16.694-3.896,23.18-11.688
+ c6.486-7.792,9.73-18.957,9.73-33.494c0-9.403-1.353-17.501-4.049-24.296c-2.698-6.79-6.528-12.034-11.491-15.735
+ c-4.962-3.699-10.754-5.55-17.37-5.55c-6.792,0-12.844,1.851-18.155,5.55c-5.308,3.701-9.488,9.056-12.537,16.065
+ C652.154,738.833,650.629,747.169,650.629,756.834z"/>
+ <path opacity="0.7" fill="#FFFFFF" enable-background="new " d="M827.641,743.382h-13.583v61.514
+ c0,8.094-1.783,14.06-5.356,17.894c-3.567,3.827-8.223,5.747-13.972,5.747c-6.181,0-10.972-2.005-14.365-6.011
+ c-3.392-4.001-5.094-9.88-5.094-17.63V657.582c0-8.36,1.872-14.412,5.619-18.155c3.742-3.741,9.797-5.616,18.154-5.616h63.078
+ c8.707,0,16.152,0.368,22.334,1.11c6.181,0.74,11.754,2.242,16.716,4.504c6.009,2.525,11.32,6.137,15.934,10.843
+ c4.615,4.701,8.117,10.161,10.516,16.389c2.389,6.226,3.588,12.822,3.588,19.788c0,14.276-4.024,25.68-12.08,34.216
+ c-8.054,8.532-20.26,14.582-36.63,18.151c6.877,3.661,13.448,9.059,19.72,16.198c6.267,7.141,11.862,14.736,16.778,22.79
+ c4.92,8.057,8.752,15.321,11.493,21.808c2.74,6.488,4.117,10.948,4.117,13.388c0,2.523-0.807,5.03-2.418,7.509
+ c-1.61,2.48-3.806,4.441-6.594,5.874c-2.787,1.438-6.005,2.158-9.665,2.158c-4.355,0-8.009-1.025-10.973-3.071
+ c-2.96-2.05-5.505-4.635-7.636-7.771c-2.136-3.136-5.034-7.75-8.685-13.845l-15.544-25.856
+ c-5.569-9.491-10.555-16.719-14.952-21.681c-4.396-4.963-8.86-8.356-13.384-10.185
+ C840.229,744.299,834.518,743.382,827.641,743.382z M849.842,662.935h-35.784v52.629h34.741c9.314,0,17.147-0.804,23.508-2.414
+ c6.355-1.611,11.209-4.354,14.563-8.225c3.35-3.872,5.027-9.211,5.027-16.002c0-5.309-1.35-9.991-4.049-14.038
+ c-2.699-4.05-6.443-7.074-11.229-9.077C872.088,663.896,863.164,662.935,849.842,662.935z"/>
+ <path opacity="0.7" fill="#FFFFFF" enable-background="new " d="M1078.913,665.808h-42.317v139.088
+ c0,8.01-1.783,13.953-5.354,17.825c-3.567,3.875-8.186,5.815-13.845,5.815c-5.748,0-10.426-1.962-14.04-5.877
+ c-3.612-3.917-5.419-9.838-5.419-17.764V665.808h-42.313c-6.617,0-11.539-1.455-14.761-4.376c-3.216-2.914-4.83-6.768-4.83-11.555
+ c0-4.962,1.678-8.883,5.026-11.754c3.356-2.874,8.208-4.31,14.564-4.31h123.288c6.702,0,11.688,1.482,14.954,4.439
+ c3.261,2.965,4.895,6.838,4.895,11.624c0,4.791-1.653,8.644-4.961,11.555C1090.493,664.353,1085.531,665.808,1078.913,665.808z"/>
+ <path opacity="0.7" fill="#FFFFFF" enable-background="new " d="M1278.207,764.8c0,6.095-1.502,12.692-4.505,19.789
+ c-3.005,7.095-7.728,14.058-14.172,20.893c-6.444,6.836-14.672,12.386-24.682,16.655c-10.01,4.269-21.679,6.401-35.003,6.401
+ c-10.098,0-19.281-0.958-27.557-2.871c-8.274-1.913-15.782-4.901-22.528-8.944c-6.749-4.051-12.95-9.386-18.611-16.001
+ c-5.053-6.008-9.36-12.735-12.933-20.178c-3.567-7.443-6.241-15.388-8.031-23.835c-1.786-8.451-2.677-17.413-2.677-26.902
+ c0-15.411,2.244-29.212,6.727-41.398c4.481-12.191,10.903-22.616,19.263-31.281c8.357-8.663,18.153-15.261,29.384-19.786
+ c11.231-4.529,23.205-6.794,35.919-6.794c15.497,0,29.297,3.09,41.396,9.271c12.103,6.184,21.377,13.822,27.816,22.925
+ c6.443,9.099,9.667,17.696,9.667,25.792c0,4.442-1.57,8.357-4.702,11.756c-3.137,3.395-6.92,5.092-11.363,5.092
+ c-4.964,0-8.683-1.176-11.163-3.526c-2.486-2.354-5.251-6.4-8.298-12.148c-5.049-9.485-10.993-16.581-17.825-21.285
+ c-6.835-4.705-15.261-7.054-25.27-7.054c-15.932,0-28.625,6.052-38.068,18.158c-9.447,12.101-14.172,29.296-14.172,51.586
+ c0,14.887,2.09,27.272,6.268,37.157c4.18,9.879,10.101,17.257,17.764,22.135c7.66,4.875,16.628,7.313,26.9,7.313
+ c11.146,0,20.571-2.767,28.274-8.296c7.706-5.53,13.52-13.645,17.436-24.354c1.656-5.055,3.699-9.164,6.137-12.343
+ c2.44-3.181,6.355-4.767,11.756-4.767c4.613,0,8.577,1.609,11.885,4.829C1276.547,756.008,1278.207,760.013,1278.207,764.8z"/>
+</g>
+</svg>
View
21 templates_ignite/base.html
@@ -16,6 +16,20 @@
<![endif]-->
<link rel="icon" href="{{ MEDIA_URL }}img/favicon.ico" />
{% block social_meta %}{% endblock %}
+ {% if waffle.switch('track_hits') %}
+ <script type="text/javascript">
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-35433268-3']);
+ _gaq.push(['_trackPageview']);
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript';
+ ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' :'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0];
+ s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
+ {% endif %}
</head>
<body id="{% block page_id %}{% endblock %}" class="{% block section_class %}{% endblock %}">
<script type="text/javascript">
@@ -159,12 +173,5 @@ <h2 class="point">Connect with Mozilla</h2>
{% endblock %}
{% block page_js %}{% endblock %}
<script src="//www.mozilla.org/tabzilla/media/js/tabzilla.js"></script>
- {% if waffle.switch('track_hits') %}
- <!-- START OF SmartSource Data Collector TAG v10.2.0 -->
- <!-- Copyright (c) 2012 Webtrends Inc. All rights reserved. -->
- <script src="{{ MEDIA_URL }}js/include/ext/webtrends/webtrends.load.js"></script>
- <noscript><img alt="dcsimg" id="dcsimg" width="1" height="1" src="//statse.webtrendslive.com/dcs7ggi1tvz5bdbvfb86i75xm_9b9v/njs.gif?dcsuri=/nojavascript&amp;WT.js=No&amp;WT.tv=10.2.10&amp;dcssip=www.mozillaignite.org"/></noscript>
- <!-- END OF SmartSource Data Collector TAG v10.2.0 -->
- {% endif %}
</body>
</html>
View
17 templates_ignite/ignite_resources/object_list.html
@@ -18,6 +18,23 @@ <h2 class="wimper">Index</h2>
<div class="col box main">
<section id="learning-labs">
<h2>Ignite Learning Labs</h2>
+ <ul class="sticky">
+ {% for stick in sticky %}
+ <li>
+ <article>
+ <a href="/resources/labs/{{ stick.slug }}/">
+ {% if stick.thumbnail %}
+ <div class="frame box">
+ <img src="{{ stick.get_image_src() }}" alt="" />
+ </div>
+ {% endif %}
+ <h3>{{ stick.title }}</h3>
+ </a>
+ <p>{{ stick.body|safe }}</p>
+ </article>
+ </li>
+ {% endfor %}
+ </ul>
<ul>
{% for lab in labs %}
<li>
View
12 templates_ignite/ignite_resources/pages/base.html
@@ -10,6 +10,13 @@
margin: 0;
}
</style>
+ <script type="text/javascript">
+ var ignite_bundle = window.ignite || {};
+ ignite_bundle.data = {
+ MEDIA_URL : '{{ MEDIA_URL }}',
+ JS_BUILD_ID: 'foo'
+ };
+ </script>
<!--[if lt IE 9]>
<script type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
@@ -19,11 +26,6 @@
<body id="{% block page_id %}{% endblock %}" class="{% block section_class %}{% endblock %}">
<script type="text/javascript">
document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/, '');
- var ignite = window.ignite || {};
- ignite.data = {
- MEDIA_URL : '{{ MEDIA_URL }}',
- JS_BUILD_ID: 'foo'
- };
</script>
{% block content %}
<div id="video_box">
View
76 templates_ignite/ignite_resources/pages/webrtc.html
@@ -0,0 +1,76 @@
+{% extends 'ignite_resources/pages/base.html' %}
+
+{% block page_title %}WebRTC Learning Lab | {% endblock %}
+{% block page_id %}webrtc{% endblock %}
+{% block section_class %}learning-lab{% endblock %}
+
+{% block page_files %}
+<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}resources/css/ignite_ll.css" />
+<script src="{{ MEDIA_URL }}resources/js/popcorn.min.js"></script>
+<script src="{{ MEDIA_URL }}resources/js/webrtc_main.js"></script>
+<script src="{{ MEDIA_URL }}resources/js/webrtc_urls.js"></script>
+<script src="{{ MEDIA_URL }}resources/js/ignite_ll_webrtc_resources.js"></script>
+<script src="{{ MEDIA_URL }}resources/js/global_popcorn_events_webrtc.js"></script>
+{% endblock %}
+
+{% block video %}
+<video id="lab_video">
+ <source src="//videos-cdn.mozilla.net/serv/webmademovies/ignite/ignite_ll_webrtc.mp4" />
+ <source src="//videos-cdn.mozilla.net/serv/webmademovies/ignite/ignite_ll_webrtc.ogv" />
+ <source src="//videos-cdn.mozilla.net/serv/webmademovies/ignite/ignite_ll_webrtc.webm" />
+</video>
+{% endblock %}
+
+{% block walkthrough %}
+<div id="walkthrough">
+ <a id="walkthrough_link" href="#"><div>Walkthrough</div></a>
+ <audio id="walkthrough_audio">
+ <source src="//videos-cdn.mozilla.net/serv/webmademovies/ignite/walkthrough.m4a"></source>
+ <source src="//videos-cdn.mozilla.net/serv/webmademovies/ignite/walkthrough.ogg" />
+ </audio>
+</div>
+{% endblock %}
+
+{% block resources %}
+<div id="resources">
+ <!-- This decorative img element is included here and not in CSS as a result of issues with scaling of svg background images. -->
+ <img id="logo_background" alt="decorative background" />
+ <ul id="resource_list"></ul>
+</div>
+<a id="demo_link" href="#"><div>Hackable Demo</div></a>
+{% endblock %}
+
+{% block credits %}
+<ul>
+ <li>Credits</li>
+ <li>
+ <span class="credit_name">Open the Studio</span>
+ <span class="credit_type">Design and Development</span>
+ </li>
+ <li>
+ <span class="credit_name">Kenny Katzgrau</span>
+ <span class="credit_type">Interviews And Writing</span>
+ </li>
+ <li>Special Thanks</li>
+ <li>
+ <span class="credit_name">Anant Narayanan</span>
+ <span class="credit_type">Interview, Mozilla</span>
+ </li>
+ <li>
+ <span class="credit_name">Ian Small</span>
+ <span class="credit_type">Interview, TokBox</span>
+ </li>
+ <li>
+ <span class="credit_name">Fred Dixon</span>
+ <span class="credit_type">Interview, BigBlueButton</span>
+ </li>
+ <li>
+ <span class="credit_name">Justin Uberti</span>
+ <span class="credit_type">Interview, Google</span>
+ </li>
+</ul>
+{% endblock %}
+
+{% block extra_assets %}
+<img id="logo2" class="logo_centered" alt="WebGL Learning Lab Logo" src="{{ MEDIA_URL }}resources/svg/webgl_w_text.svg" />
+{% endblock %}

0 comments on commit 712e558

Please sign in to comment.
Something went wrong with that request. Please try again.