web/client.php
changeset 99 6cb4d10f0b8b
child 101 263ea20d9bfd
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/client.php	Wed Apr 06 16:26:16 2011 +0200
@@ -0,0 +1,405 @@
+<?php
+
+/**
+ * include some common code (like we did in the 90s)
+ * People still do this? ;)
+ */
+include_once './common.php';
+
+/**
+ * Do we already have a valid Access Token or need to go get one?
+ */
+if (!isset($_SESSION['TWITTER_ACCESS_TOKEN']) && isset($_GET['CONNECT']) ) {
+    /**
+     * Guess we need to go get one!
+     */
+    $token = $consumer->getRequestToken();
+    $_SESSION['TWITTER_REQUEST_TOKEN'] = serialize($token);
+
+    /**
+     * Now redirect user to Twitter site so they can log in and
+     * approve our access
+     */
+    $consumer->redirect();
+}
+
+/* CLIENT VAR LIVE */
+
+$C_hashtag= "#rsln";
+$C_link  = "http://www.rslnmag.fr/blog/2011/3/24/la-journaliste-mercedes-bunz-prochaine-invitee-des-rencontres-rsln/";
+$C_title = "Mercedes Bunz et le journaliste";
+$C_REP   = "rsln-mercedes-bunz/";
+$C_description  = "Elle nous racontera comment les algorithmes ont fini par devenir des producteurs d'infos et pourquoi ils ne remplaceront pour autant jamais les journalistes.
+<br/><br/>
+(titre de sa conférence, en VO : When robots learned to write, How the rise of the algorithms will change journalism and revolutionize our concept of knowledge.)
+<br/><br/>
+C'est un thème sur lequel elle avait été très remarquée, lors d'une intervention à la conférence Lift, à Genève, en mai 2010.";
+
+$C_partenaires  = "
+		 <a href='http://www.iri.centrepompidou.fr/' class='footerLink' target='_blank'>
+ IRI </a>
+		 |  <a href='http://www.rslnmag.fr/' class='footerLink' target='_blank' > RSLN  </a>
+		 |  <a href='http://www.microsoft.fr/' class='footerLink' target='_blank'> MICROSOFT.fr  </a>";
+
+?>
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+   "http://www.w3.org/TR/html4/strict.dtd">
+
+<html lang="en">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>RSLN  - Live Video and Annotation</title>
+	<meta http-equiv="X-UA-Compatible" content="IE=8" /> 
+
+    <!-- Framework CSS -->
+    <link rel="stylesheet" href="res/blueprint/screen.css" type="text/css" media="screen, projection">
+    <link rel="stylesheet" href="res/blueprint/print.css" type="text/css" media="print">
+    <!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
+
+    <!-- Import fancy-type plugin for the sample page. -->
+    
+	<link rel="stylesheet" href="res/blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
+	<link rel="stylesheet" href="custom.css" type="text/css" media="screen, projection">
+	<link rel="stylesheet" type="text/css" href="res/jquery.fancybox/fancybox/jquery.fancybox-1.3.4.css" media="screen">
+	<link rel="stylesheet" type="text/css" href="res/niceforms/niceforms-custom.css" media="screen" >
+
+	<!-- JAVASCRIPT --> 
+	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+	<script type="text/javascript" src="res/jquery.fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
+	<script type="text/javascript" src="res/metadataplayer/res/js/jquery.tools.min.js"></script>
+	<script type="text/javascript" src="res/niceforms/niceforms.js"></script>
+	<script src="http://widgets.twimg.com/j/2/widget.js"></script>
+	
+	<!-- FONT -->
+	<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin' rel='stylesheet' type='text/css'>
+	<link href='http://fonts.googleapis.com/css?family=PT+Sans&subset=latin' rel='stylesheet' type='text/css'>
+	<link href='http://fonts.googleapis.com/css?family=Geo&subset=latin' rel='stylesheet' type='text/css'>
+
+	<script type="text/javascript">	
+	$(document).ready(function() {
+
+			doTimer();
+			//$("txt").hide();
+			$(".loginbutton").click(function() {
+				document.location.href="<?php URL_ROOT ?>?CONNECT=true";
+			});
+			$("#IDENTIFIER").click(function() {
+				document.location.href="<?php URL_ROOT ?>?CONNECT=true";
+			});
+			
+			$("#messageSuccess").hide();
+			$("#messageFailed").hide();
+			$("#txt").hide();
+			
+			// BUTTONS
+			$("#positive").click(function(){
+				var MyValue = $('#status').attr("value");
+				 $('#status').attr("value",MyValue+"++ ");
+			});
+			$("#negative").click(function(){
+				var MyValue = $('#status').attr("value");
+				$('#status').attr("value",MyValue+"-- ");
+			});
+			$("#reference").click(function(){
+				var MyValue = $('#status').attr("value");
+				$('#status').attr("value",MyValue+"== ");
+			});
+			$("#question").click(function(){
+				var MyValue = $('#status').attr("value");
+				$('#status').attr("value",MyValue+"?? ");
+			});
+			
+			// SEND TWEETS 
+			$("#sendTweet").click(function(){
+				var MyStatus = $('#status').attr("value");
+				$.post('tweet_ajax.php', {status:MyStatus}
+				,function(data) {
+				
+					if(data=="true"){
+						$("#messageSuccess").show('fast');
+						$("#messageSuccess").delay(800).hide('slow');
+						$('#status').attr("value","#rsln");
+					}else{
+						$("#error").text(data);
+						$("#messageFailed").show('fast');
+						$("#messageFailed").delay(800).hide('slow');
+					}
+					
+				});
+				
+			});			
+			
+			$(".timeFrame").tooltip();
+			/*
+			*   Lightbox button 
+			*/
+			$("#About").fancybox({
+				'titlePosition'		: 'inside',
+				'transitionIn'		: 'none',
+				'transitionOut'		: 'none',
+				'enableEscapeButton': 'none',
+				'margin' 			: 1,
+				'padding' 			: 0
+			}<?php if (!isset($_SESSION['TWITTER_ACCESS_TOKEN'])){echo(").trigger('click');");}else{echo(");");} ?>
+			
+			
+			$("#Program").fancybox({
+				'width'				: '75%',
+				'height'			: '75%',
+				'autoScale'			: false,
+				'transitionIn'		: 'none',
+				'transitionOut'		: 'none',
+				'type'				: 'iframe'
+			});
+
+			$("#Video_ldt").fancybox({
+				'width'				: 1021,
+				'height'			: 661,
+				'autoScale'			: false,
+				'transitionIn'		: 'none',
+				'transitionOut'		: 'none',
+				'type'				: 'iframe'
+			});
+			
+			$("#ACCES").click(function() {
+				$.fancybox.close();
+			});
+			
+			// Buttons 
+			
+		
+		});
+		
+		
+		<!-- LIMIT TEXTAREA:
+		function imposemax(Object)
+		{
+		  return (Object.value.length <= 140);
+		}
+		// End -->
+		
+		<!-- TIMER 
+		var c=0;
+		var t;
+		var timer_is_on=0;
+
+		function timedCount()
+		{
+			document.getElementById('txt').value=c;
+			c = c+1;
+			t = window.setTimeout("timedCount()",1000);
+			$(".twtr-ft").hide();
+			$(".twtr-hd").hide();
+			//twtr-tweet
+			$(".twtr-tweet").each(colorTweetings);
+		
+		}
+
+		function colorTweetings (){
+				var tweettemp = $(this).html();
+				if (tweettemp.search(/\x3F\x3F/)!=-1){
+					 $(this).css({'background-color': '#bfdbec','color':"#000"});
+				}
+				if (tweettemp.search(/\x2B\x2B/)!=-1){
+					 $(this).css({'background-color': '#c5e7cd','color':"#fff"});
+				}
+				if (tweettemp.search(/\x2D\x2D/)!=-1){
+					 $(this).css({'background-color': '#f6ced0','color':"#fff"});
+				}
+				if (tweettemp.search(/\x3D\x3D/)!=-1){
+					 $(this).css({'background-color': '#ecedc1','color':"#000"});
+				}
+		};
+			
+
+		
+		function doTimer()
+		{
+		if (!timer_is_on)
+		  {
+		  timer_is_on=1;
+		  timedCount();
+		  }
+		}
+
+		function stopCount()
+		{
+			clearTimeout(t);
+			timer_is_on=0;
+		}
+		//
+		//-->
+	</script>
+	
+	<script type="text/javascript">
+	
+	  var _gaq = _gaq || [];
+	  _gaq.push(['_setAccount', 'UA-9955524-3']);
+	  _gaq.push(['_setDomainName', '.iri.centrepompidou.fr']);
+	  _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>
+	
+  </head>
+  <body>
+    <div class="container">
+      <img src="<?php echo($C_REP); ?>/images/head_logo.gif" class="Producteur logo">
+		<div id="minilogo" style="margin-left:85px;height:5px;top:5px;"></div>
+	  <ul class="menu"> 
+	  <li class="menuUnderline"><a href="index.php" class="menuLink">Archives </a></li>
+	  <li class="menuUnderline" ><a href="http://www.rslnmag.fr/blog/2011/3/13/_nous-en-sommes-2020_toutes-les-donnees-sont-liberees_/" class="menuLink" target="_blank"> Programme</a>
+	  <li ><a href="about.php" class="menuLink" >A propos</a></li>
+
+	  </ul>
+
+	  
+	  <div class="videoLive">
+		<div class="videoLivePlayer">
+			<img src="<?php echo($C_REP); ?>/images/big_visuel_rsln_mb.jpg" width="500"  height="375" />
+		</div>	
+		
+	  </div>
+
+	<div class="videoLiveProgram">	
+		
+		<div class="arrowContainer">
+			<div class="arrow"> </div>
+		</div>
+		<div class="videoLiveProgramTitle">
+			<b><?php echo($C_title); ?></b></div>
+		<div class="videoLiveProgramDescription">
+			<br><?php echo($C_description); ?></div>
+		
+		
+	</div>
+	  
+	  <div class="tweetWriter">
+		<h3 class="tweetWriterTitle">Annotations pol&eacute;mique : </h3>
+		<form  action="tweet.php" method="post" id="statusform" >
+		<?php if (!isset($_SESSION['TWITTER_ACCESS_TOKEN'])){
+				echo("<div class='loginbutton' ><a href='".URL_ROOT."?CONNECT=true' class='loginlink'>
+				Vous n'êtes pas connecté.<br>
+				Pour participer, veuillez vous identifier en cliquant ici. </a></div>");
+			  }else{
+				echo("<textarea name='status' id='status' rows='3' cols='50' onkeypress='return imposemax(this);'>".$C_hashtag."</textarea>");
+			  }
+		?>
+
+
+				<div id="messageSuccess" style="background-color:lightgreen;">
+					Votre tweet a bien été envoyé !<br><br>
+				</div>
+				
+				<div id="messageFailed" style="background-color:red;">
+					Ooups! il y a une erreur vous avez le droit de frapper le developpeur :<div id="error">&nbsp;</div><br/><br>
+				</div>
+
+			  
+			
+			<a class="button_w" href="#"  id="sendTweet" style="float:right;margin-right:15px;margin-left:35px;width:70px;" ><span>Envoyer</span></a> 
+			<!--<button name="s" type="button" id="sendTweet"
+					style="float:right;margin-right:15px;margin-left:35px;width:70px;"  >Envoyer</button>-->
+			<a 
+					
+					id="positive"
+					title="accord"
+					class="tweetButton">++</a>
+			<a 
+					
+					id="negative"
+					title="désaccord"
+					class="tweetButton">--</a>
+			<a
+					
+					id="reference"
+					title="reference"
+					class="tweetButton">==</a>
+			<a 
+					
+					id="question"  
+					title="question"
+					class="tweetButton"> ??</a>
+		</form>
+	  </div>
+	  
+	  <div class="tweetReader">
+			<script>
+				new TWTR.Widget({
+				  version: 2,
+				  type: 'search',
+				  search: '<?php echo($C_hashtag); ?>',
+				  interval: 1000,
+				  title: '',
+				  subject: '',
+				  width: 377,
+				  height: 450,
+				  theme: {
+					shell: {
+					  background: '#ffffff',
+					  color: '#ffffff'
+					},
+					tweets: {
+					  background: '#ffffff',
+					  color: '#444444',
+					  links: '#1985b5'
+					}
+				  },
+				  features: {
+					scrollbar: false,
+					loop: true,
+					live: true,
+					hashtags: true,
+					timestamp: true,
+					avatars: true,
+					toptweets: true,
+					behavior: 'default'
+				  }
+				}).render().start();
+			</script>
+	  </div>
+
+      <div class="footer">
+		<hr>
+		 <?php 
+				echo($C_partenaires);
+				
+				if (isset($_SESSION['TWITTER_ACCESS_TOKEN'])){
+					echo("| 	<a href='clear.php'  class='footerLink'>D&eacute;connexion</a>");
+				}
+		 ?>
+		  <div href="#Aboutbox" id="About">about</div>
+		  <input type="text" id="txt" size="3"/>
+		  
+	  </div>   
+	
+
+    </div>
+	
+	<!-- LIGHTBOX --> 
+	<div style="display:none;">
+		<div id="Aboutbox" >
+		<div class="lightBorder">
+			<div class="lightTitle" style="height:45px;">&nbsp;  </div>
+			<div class="lightSubTitle">Annotation polémique par tweet </div>
+			<div class="lightDescription">À partir de cette interface ou de votre client twitter habituel, vous pouvez réagir en direct aux conférences en twittant. Vos tweets seront synchronisés avec l'enregistrement des conférences. Vous pourrez qualifier vos tweets en y intégrant la syntaxe ci-contre.
+			</div>
+			<div>
+				<br/>
+				<a class="button_b" href="#"  id="IDENTIFIER"><span>S'identifier</span></a> <br/><br/>
+				<a class="button_w" href="#"  id="ACCES"><span>Libre accès</span></a> 
+			</div>
+		</div>
+		</div>
+	</div>
+	<!-- END LIGHTBOX -->
+
+	
+  </body>
+</html>