Live Video and Annotation

# HG changeset patch # User Raphael Velt # Date 1323799319 -3600 # Node ID 86b62b98fea7050098b879d03fed52cd36894baa # Parent 6626b728b1427f31fcc8c49dd7220ec88e331b77 Polemic Tweet client now uses rv's live system diff -r 6626b728b142 -r 86b62b98fea7 web/client.php --- a/web/client.php Mon Dec 12 14:26:20 2011 +0100 +++ b/web/client.php Tue Dec 13 19:01:59 2011 +0100 @@ -31,12 +31,12 @@ $big_visual_url = URL_ROOT."/$rep/images/big_visuel_rsln_mb.jpg"; if($translate->_('config__client_visual') != 'config__client_visual' && $translate->_('config__client_visual') != null ) { - $big_visual_url = URL_ROOT."$rep/".$translate->_('config__client_visual'); + $big_visual_url = URL_ROOT."$rep/".$translate->_('config__client_visual'); } $head_logo = URL_ROOT."$rep/images/head_logo.gif"; if($translate->_('config__head_logo') != 'config__head_logo' && $translate->_('config__head_logo') != null ) { - $head_logo = URL_ROOT."$rep/".$translate->_('config__head_logo'); + $head_logo = URL_ROOT."$rep/".$translate->_('config__head_logo'); } ?> @@ -48,374 +48,283 @@ Live Video and Annotation - + - - - - - - - + + ' rel='stylesheet' type='text/css'> + ' rel='stylesheet' type='text/css'> + + + + - - - - - - - - ' rel='stylesheet' type='text/css'> - ' rel='stylesheet' type='text/css'> - ' rel='stylesheet' type='text/css'> + + + + + + + + + + - - - - + + + + -

- - - - - -

- -

- 0):?> -

- -

- - -

- -

- _('config__title')); ?>

-
_('config__description')); ?>

- - -

- -

_("ClientTitle1 :"); ?>

"); - }else{ - echo(""); - } - ?> - +

- _("Envoyé"); ?>

-

- -

- _("Erreur1"); ?>

- - - - - _("Envoyer"); ?> - - - - - - ++ - -- - == - ?? - -

- -

- - - - - - +

+ + +

_("ClientTitle1 :"); ?>

"); + } else { + echo(""); + } + ?> + + + + _("Envoyer"); ?> + + + + + ++ + -- + == + ?? + +

+ +

+ 0):?> + + +

+ +

+
_('config__title')); ?>
+
+
_('config__description')); ?>
+
+
_('Tagcloud'); ?>
+

+ + +

- + \ No newline at end of file diff -r 6626b728b142 -r 86b62b98fea7 web/common.php --- a/web/common.php Mon Dec 12 14:26:20 2011 +0100 +++ b/web/common.php Tue Dec 13 19:01:59 2011 +0100 @@ -185,6 +185,11 @@ 'jquery-mousewheel' => URL_ROOT.'res/jquery.fancybox/fancybox/jquery.mousewheel-3.0.4.pack.js', 'swfobject' => URL_ROOT.'res/metadataplayer/res/js/swfobject.js', 'json-js' => URL_ROOT.'res/douglascrockford-JSON-js/json2.js', + 'underscore' => URL_ROOT.'res/underscore/underscore-min.js' , + 'twcx-gevent' => URL_ROOT.'res/js-tweetcast/connect-gevent.js' , + 'twcx-nodejs' => URL_ROOT.'res/js-tweetcast/connect-nodejs.js' , + 'twcx-standalone'=> URL_ROOT.'res/js-tweetcast/connect-standalone.js' , + 'twcx-main' => URL_ROOT.'res/js-tweetcast/live-polemic.js' , ), 'cdn' => array( @@ -200,6 +205,11 @@ 'jquery-mousewheel' => URL_ROOT.'res/jquery.fancybox/fancybox/jquery.mousewheel-3.0.4.pack.js', 'swfobject' => 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js', 'json-js' => URL_ROOT.'res/douglascrockford-JSON-js/json2.js', + 'underscore' => URL_ROOT.'res/underscore/underscore-min.js' , + 'twcx-gevent' => URL_ROOT.'res/js-tweetcast/connect-gevent.js' , + 'twcx-nodejs' => URL_ROOT.'res/js-tweetcast/connect-nodejs.js' , + 'twcx-standalone'=> URL_ROOT.'res/js-tweetcast/connect-standalone.js' , + 'twcx-main' => URL_ROOT.'res/js-tweetcast/live-polemic.js' , ) ); @@ -228,6 +238,7 @@ 'fancybox' => URL_ROOT.'res/jquery.fancybox/fancybox/jquery.fancybox-1.3.4.css', 'jquery-ui' => URL_ROOT.'res/metadataplayer/res/css/jq-css/themes/base/jquery-ui.css', 'tabs-slideshow' => URL_ROOT.'res/css/tabs-slideshow.css', + 'tweetcast' => URL_ROOT.'res/css/tweetcast.css' ), 'cdn' => array( 'blueprint-screen' => URL_ROOT.'res/blueprint/screen.css', @@ -238,6 +249,7 @@ 'fancybox' => URL_ROOT.'res/jquery.fancybox/fancybox/jquery.fancybox-1.3.4.css', 'jquery-ui' => "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css", 'tabs-slideshow' => URL_ROOT.'res/css/tabs-slideshow.css', + 'tweetcast' => URL_ROOT.'res/css/tweetcast.css' ) ); diff -r 6626b728b142 -r 86b62b98fea7 web/res/css/twcx-img/arrow.png Binary file web/res/css/twcx-img/arrow.png has changed diff -r 6626b728b142 -r 86b62b98fea7 web/res/css/twcx-img/arrowtop.png Binary file web/res/css/twcx-img/arrowtop.png has changed diff -r 6626b728b142 -r 86b62b98fea7 web/res/css/twcx-img/bgd.jpg Binary file web/res/css/twcx-img/bgd.jpg has changed diff -r 6626b728b142 -r 86b62b98fea7 web/res/css/twcx-img/bgdeplie.png Binary file web/res/css/twcx-img/bgdeplie.png has changed diff -r 6626b728b142 -r 86b62b98fea7 web/res/css/twcx-img/bgnoarrow.png Binary file web/res/css/twcx-img/bgnoarrow.png has changed diff -r 6626b728b142 -r 86b62b98fea7 web/res/css/twcx-img/head_logo.gif Binary file web/res/css/twcx-img/head_logo.gif has changed diff -r 6626b728b142 -r 86b62b98fea7 web/res/css/twcx-img/menu_underline.gif Binary file web/res/css/twcx-img/menu_underline.gif has changed diff -r 6626b728b142 -r 86b62b98fea7 web/res/css/twcx-img/placeholder.png Binary file web/res/css/twcx-img/placeholder.png has changed diff -r 6626b728b142 -r 86b62b98fea7 web/res/css/twcx-img/scale.png Binary file web/res/css/twcx-img/scale.png has changed diff -r 6626b728b142 -r 86b62b98fea7 web/res/css/twcx-img/searchcancel.png Binary file web/res/css/twcx-img/searchcancel.png has changed diff -r 6626b728b142 -r 86b62b98fea7 web/res/css/tweetcast.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/web/res/css/tweetcast.css Tue Dec 13 19:01:59 2011 +0100 @@ -0,0 +1,448 @@ +/* Browser-reset CSS */ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +img a { + border: none; +} + +body { + font-family: 'PT Sans', Helvetica, Arial, sans-serif; background-color: #F7F6F6; background-image: url("twcx-img/bgd.jpg"); background-repeat: repeat-x; +} + +h2, h3, h4 { + font-family: 'PT Sans Narrow', Helvetica, Arial, sans-serif; +} + +p { + font-size: 12px; +} + +b { + font-weight: bold; +} + +i { + font-style: italic; +} + +.highlight { + background: #ffff00; +} + +.hidden { + display: none; +} + +/* feedback */ + +#sendUsFeedBack { + position: absolute; right: 0; top: 0; width: 100px; z-index: 999999; +} + +#container { + width: 960px; margin: 0 auto; +} + +#colgauche { + float: left; width: 455px; margin-right: 13px; +} + +.barre { + float: left; width: 100%; +} + +.greyed { + color: #999; font-style: italic; +} + +.rechercheCourante { + background: #ffa0ff; font-weight: bold; color: #000080; +} + + +/* Menu */ + +#headlogo { + float: left; margin-right: 10px; +} + +.menu { + border-left: 1px solid #C3C3C3; + float: left; + list-style: none; + font-size: 12px; + height: 62px; overflow: hidden; +} + +.menu li { + background: url("twcx-img/menu_underline.gif") left bottom no-repeat; + padding: 3px 0 0 5px; + height: 18px; + min-width: 80px; +} + +.menu a { + color: #000000; text-decoration: none; +} + +.menu a:hover { + color: #0099FF; +} + +/* Formulaire */ + +#twwWrap { + float: left; width: 450px; background: #ffffff; padding: 1px; border-width: 1px; border-style: solid solid none solid; border-color: #ababab; margin-top: 6px; +} +#tweetWriter { + width: 430px; padding: 10px; background: #efefef; +} +.loginbutton{ + margin: 10px auto; height: 60px; width: 330px; padding:5px; + background: url(../../images/tweetWriterBgdUnconnect.gif) no-repeat; + border: none; color:#fff; +} +.loginlink{ + text-decoration:none; + color:#fff; +} +textarea { + display: block; margin: 10px auto; height: 60px; width: 330px; padding:5px; + background: url(../../images/tweetWriterBgdTxtArea.gif) no-repeat; + border: none; resize: none; +} + +a#sendTweet { + background: transparent url('../../images/bg_button_a_w.png') no-repeat top right; + color: #444; display: block; font-size: 12px; height: 24px; line-height: 14px; + float:right; margin: 0 45px 0 50px; padding: 0 18px 0 0; text-decoration: none; +} +a#sendTweet span { + background: transparent url('../../images/bg_button_span_w.png') no-repeat; display: block; height: 14px; + padding: 5px 0 5px 18px; +} +a#sendTweet:hover, a#sendTweet:active { + background-position: right -24px; +} +a#sendTweet:hover span, a#sendTweet:active span { + background-position: 0 -24px; +} +a.tweetButton { + float:right; margin: 2px 5px 0 0; width:32px; height:20px; text-decoration: none; font: normal 12px; + color: #444; text-align:center; cursor: pointer; cursor: hand; +} + +#question { + background: transparent url('../../images/bt_blue.png') no-repeat; +} +#reference{ + background: transparent url('../../images/bt_yellow.png') no-repeat; +} +#positive{ + background: transparent url('../../images/bt_green.png') no-repeat; +} +#negative{ + background: transparent url('../../images/bt_red.png') no-repeat; +} + +#tweetCounter{ + float: left; background: transparent; border: none;font-weight:bold; margin: 2px 0 0 42px; padding: 0; +} +.tweetCounterNegative{ + color:red; +} + +/* Liste de Tweets */ + +#tweetviz { + float: left; width: 452px; border: 1px solid #999; +} + +/* Recherche */ + +#recherche { + position: relative; float: left; padding: 2px 0; width: 452px; border-bottom: 1px solid #999; +} + +#recherche input { + float: left; +} + +#inp_q { + width: 236px; border: none; padding: 1px; margin-left: 2px; height: 17px; font-size: 13px; +} + +#inp_submit, #inp_reset { + border: 0; padding: 0; width: 20px; height: 20px; overflow: hidden; text-indent: 800px; background: url(twcx-img/searchcancel.png) +} + +#inp_submit:hover { + background-position: -20px 0; +} + +#inp_submit:active { + background-position: -40px 0; +} + +#inp_reset { + background-position: 0 -20px; +} + +#inp_reset:hover { + background-position: -20px -20px; +} + +#inp_reset:active { + background-position: -40px -20px; +} + +#time_legende { + float: left; margin-left: 30px; width: 30px; height: 20px; background: url(twcx-img/scale.png) left; +} + +#time_scale { + float: left; font-size: 12px; margin: 3px 0 0; color: #666; width: 50px; text-align: center; +} + +#time_zoomout, #time_zoomin { + float: left; width: 12px; height: 20px; background: url(twcx-img/scale.png); +} + +#time_zoomout { + background-position: -30px; +} + +#time_zoomout.inactive { + background-position: -54px; +} + +#time_zoomin { + background-position: -42px; +} + +#time_zoomin.inactive { + background-position: -66px; +} + +#recherche_annot { + position: absolute; top: 20px; z-index: 4; background: #ffffff; border: 1px solid #ccc; padding: 4px; font-size: 12px; + display: none; box-shadow: 2px 2px 2px rgba(0, 0, 0, .5) +} + +#recherche_annot a { + padding: 1px; line-height: 13px; margin: 1px; font-weight: bold; text-decoration: none; color: #000000; +} + +/* Liste des tweets */ + +#tweetlist { + float: left; width: 280px; height: 480px; list-style: none; border-right: 1px solid #999; color: #585858; cursor: pointer; cursor: hand; background: #ffffff; +} + +#tweetlist a { + text-decoration: none; color: #1985B5; +} + +#tweetlist a:hover { + text-decoration: underline; color: #105060; +} + +li.tweet, li.placeholder { + border-bottom : 1px dotted; overflow: hidden; float: left; border-color: #ccc; +} + +li.tweet { + position: relative; background: #fff; +} + +li.full { + width: 270px; height: 117px; border-right: 10px solid #ff0; +} + +li.half { + width: 280px; height: 46px; +} + +li.icons { + width: 20px; height: 20px; border: none; +} + +li.placeholder { + visibility: hidden; +} + +.tweet p { + overflow: hidden; +} + +.full p.tweet_text { + font-size: 12px; margin: 5px 0 5px 58px; height: 108px; width: 207px; color: #000000; +} + +.half p.tweet_text { + font-size: 11px; margin: 5px 0 5px 49px; height: 36px; line-height: 12px; width: 216px; +} + +div.around_img { + float: left; +} + +.full .profile_image { + margin: 5px 5px 0 5px; width: 48px; height: 48px; +} + +.half .profile_image { + margin: 5px; width: 36px; height: 36px; +} + +.icons .profile_image { + margin: 2px; width: 16px; height: 16px; +} + +p.created_at { + font-size: 12px; text-align: center; font-style: italic; color: #999999; width: 58px; overflow: hidden; +} + +.annotations { + position: absolute; margin: 0; padding: 0; top: 0; left: 0; width: 100%; height: 100%; +} + +.icons .annotations { + position: absolute; width: 20px; height: 6px; left: 0; top: 16px; z-index: 3; +} + +div.annotation { + float: left; height: 100%; +} + +div.twmain { + position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; overflow: hidden; +} + +div.tweet_actions { + position: absolute; bottom : 2px; right: 4px; font-size: 11px; +} + +/* timeline */ + +#timeline { + float: left; height: 480px; width: 150px; border-right: 1px solid #999; cursor: pointer; cursor: hand; +} + +#scrollcont { + float: left; width: 20px; height: 480px; overflow: auto; +} + +#scrollin { + width: 1px; height: 8000px; +} + +/* hovertweet */ + +#hovertweet { + position: absolute; display: none; margin: -20px 0 0 15px; z-index: 12; +} + +div.full { + position: absolute; background: #eeeeee; width: 270px; height: 84px; border: 1px solid #808080; border-radius: 3px; box-shadow: 5px 5px 5px rgba(0,0,0,.3); +} + +#hoverarrow { + position: absolute; width: 10px; height: 18px; left: -9px; top: 13px; background: url(twcx-img/arrow.png); +} + +/* Colonne de droite */ + +#coldroite { + float: left; width: 492px; +} + +#vlWrap { + float: left; border: 5px solid #ffffff; background: #999999; padding: 1px; margin-top: 70px; +} + +#videoLivePlayer { + width: 480px; height: 320px; background: #000000; +} + +#out_fleche { + float: left; position: relative; width: 492px; height: 14px; background: url(twcx-img/bgnoarrow.png); +} + +#in_fleche { + position: absolute; left: 10px; width: 27px; height: 15px; background: url(twcx-img/arrowtop.png); +} + +#accordeon { + float: left; width: 492px; list-style: none; background: #999999; +} + +#accordeon h3 { + font-size: 16px; font-weight: bold; color: #666; +} + +#accordeon p { + margin: 5px 0; line-height: 1.5em; +} + +#accordeon li { + float: left; width: 480px; margin: 0 1px 1px 1px; padding: 4px; border: 1px solid #ffffff; +} + +li.acctitre { + background: #efefef; cursor: pointer; cursor: hand; +} + +li.acctexte { + background: url(twcx-img/bgdeplie.png) top repeat-x #efefef; +} + +/* Tag Cloud */ + +#motscles { + text-align: center; +} + +#motscles span { + padding: 2px; cursor: pointer; cursor: hand; +} + +/* Footer */ +.footer { + float: left; width: 100%; margin: 40px 0 10px; text-align: center; +} + +hr { + background: #cccccc; border: none; height: 1px; margin: 0 0 10px; width: 100%; +} + +a.footerLink { + text-decoration:none; margin:5px; color: #000000; + font-family: 'PT Sans Narrow', Arial, Helvetica, sans-serif; font-size: 13px; +} + +a.footerLink:hover { + color: #0099FF; +} + + diff -r 6626b728b142 -r 86b62b98fea7 web/res/js-tweetcast/connect-gevent.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/web/res/js-tweetcast/connect-gevent.js Tue Dec 13 19:01:59 2011 +0100 @@ -0,0 +1,14 @@ +function connectTweets() { + $.getJSON('http://' + document.location.hostname + ':8888/?callback=?', function(data) { + loadTweets(data.tweets) + } ); + + setInterval(function() { + if (!twCx.tweets) { + return; + } + $.getJSON('http://' + document.location.hostname + ':8888/?after_id=' + twCx.tweets[twCx.tweets.length - 1].id + '&callback=?', function(data) { + loadTweets(data.tweets, true); + }); + }, 1000) +} \ No newline at end of file diff -r 6626b728b142 -r 86b62b98fea7 web/res/js-tweetcast/connect-nodejs.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/web/res/js-tweetcast/connect-nodejs.js Tue Dec 13 19:01:59 2011 +0100 @@ -0,0 +1,16 @@ +document.write('

_("ClientTitle1 :"); ?>

_("ClientTitle1 :"); ?>

_('config__title')); ?>

_('Tagcloud'); ?>