--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/media.html Mon Nov 26 18:42:56 2012 +0100
@@ -0,0 +1,246 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="description" content="Interface d'édition de Hashcuts (Mashups vidéo cliquables)" />
+ <meta name="copyright" content="Institut de Recherche et d'Innovation (IRI), 2012" />
+ <meta name="author" content="Anthony Ly, Raphaël Velt" />
+ <title>Hashcut > Media</title>
+ <link rel="stylesheet" href="lib/jquery-ui.css" />
+ <link rel="stylesheet" href="css/reset.css" />
+ <link rel="stylesheet" href="css/common.css" />
+ <link rel="stylesheet" href="css/players.css" />
+ </head>
+ <body>
+
+ <div class="wrap-header-top">
+ <div class="wrap-header-top-content">
+ <a title="Bibliothèque Publique d'Information" href="#"><img src="img/pompidou-logo.png" alt="Bibliothèque centre Pompidou" /></a>
+ </div>
+ </div><!-- wrap-header-top -->
+
+ <div class="wrap-header">
+ <div class="header">
+
+ <!-- popin user -->
+ <div class="popin user info" id="user">
+ <img class="pointer" src="img/popin-triangle.png" alt="" />
+ <div class="popin-content">
+ <h2>Mashup75</h2>
+ <h3>mash@cinecast.fr</h3>
+ <a href="#" class="nb-hashcut">12 Hashcuts</a>
+ <p>
+ <a href="#" class="change-account button">Changer de compte</a>
+ </p>
+ </div>
+ </div><!-- popin user info-->
+
+ <div class="popin user signup" id="user">
+ <img class="pointer" src="img/popin-triangle.png" alt="" />
+ <div class="popin-content">
+ <h2>Créer un compte :</h2>
+ <form action="#" class="signup-form">
+ <p>
+ <label for="signup-pseudo">Pseudonyme : </label>
+ <input type="text" id="signup-pseudo" name="" />
+ </p>
+ <p>
+ <label for="signup-email">Email : </label>
+ <input type="text" id="signup-email" name="" />
+ </p>
+ <p>
+ <label for="signup-password">Mot de passe : </label>
+ <input type="password" id="signup-password" name="" />
+ </p>
+ <p>
+ <label for="signup-password">Confirmer le mot de passe : </label>
+ <input type="password" id="signup-password" name="" />
+ </p>
+ <p>
+ <input class="button" type="submit" value="Créer le compte">
+ </p>
+ </form>
+
+ </div>
+ </div><!-- popin user signup-->
+
+ <div class="popin user login" id="user">
+ <img class="pointer" src="img/popin-triangle.png" alt="" />
+ <div class="popin-content">
+ <h2>Connexion :</h2>
+ <form action="#" class="login-form">
+ <p>
+ <label for="signup-pseudo">E-mail : </label>
+ <input type="text" id="signup-pseudo" name="" />
+ </p>
+ <p >
+ <label for="signup-email">Mot de passe : </label>
+ <input type="password" id="signup-email" name="" />
+ </p>
+ <p>
+ <input class="button" type="submit" value="Se connecter">
+ </p>
+ <p>
+ <a class="button signup-button" href="#">Créer un compte</a>
+ </p>
+ </form>
+
+ </div>
+ </div><!-- popin user login-->
+
+ <!-- /popin user -->
+
+ <h1><a title="Hashcut - Le Mashup cliquable" class="clearfix" href="#">
+ <img src="img/hashcut-logo.png" alt="Hashcut" />
+ <span>Le Mashup<br />Cliquable</span>
+ </a></h1>
+ <div class="title-video-wrap">
+ <div class="Ldt-Social">
+ <div class="Ldt-Social-Url-Container">
+ <a href="#" target="_blank" class="Ldt-Social-Square Ldt-Social-Url" title="Partager le lien"></a>
+ <span class="Ldt-Social-UrlPop">
+ <input class="Ldt-Social-Input"/>
+ <div class="Ldt-Social-CopyBtn">Copier</div>
+ </span>
+ </div>
+ <a href="#" target="_blank" class="Ldt-Social-Fb Ldt-Social-Ext" title="Partager sur Facebook"></a>
+ <a href="#" target="_blank" class="Ldt-Social-Twitter Ldt-Social-Ext" title="Partager sur Twitter"></a>
+ <a href="#" target="_blank" class="Ldt-Social-Gplus Ldt-Social-Ext" title="Partager sur Google+"></a>
+ <a href="#" target="_blank" class="Ldt-Social-Mail" title="Partager par mail"></a>
+ </div>
+ <p class="title-video" href="#">Titre du Média</p>
+ </div>
+ <div class="profil-wrap">
+ <a href="#" class="all-hashcut">Tous les Hashcuts</a>
+ <a href="#user" class="my-profil open-popin">Mon profil</a>
+ </div>
+ </div><!-- header -->
+ </div><!-- wrap-header -->
+
+ <div class="wrapper">
+ <div class="wrap">
+ <div class="content clearfix">
+
+ <div class="left-content">
+ <h2>Lire le Média</h2>
+ <div class="bloc-video">
+ <div class="video">
+ <div class="video-wait"></div>
+ </div>
+ <div class="widget">
+ <div class="Ldt-Slider-Container">
+ <div class="Ldt-Slider"></div>
+ </div>
+ <div class="Ldt-Slider-Time"></div>
+
+ <div class="Ldt-Ctrl">
+ <div class="Ldt-Ctrl-Left">
+ <div title="Lecture" class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState"></div>
+ <div class="Ldt-Ctrl-spacer"></div>
+ <div class="Ldt-Ctrl-InOutBlock">
+ <div title="Débuter le segment ici" class="Ldt-Ctrl-button Ldt-Ctrl-SetIn"></div>
+ <div class="Ldt-Ctrl-spacer"></div>
+ <div title="Finir le segment ici" class="Ldt-Ctrl-button Ldt-Ctrl-SetOut"></div>
+ <div class="Ldt-Ctrl-spacer"></div>
+ </div>
+ </div>
+ <div class="Ldt-Ctrl-Right">
+ <div class="Ldt-Ctrl-spacer"></div>
+ <div class="Ldt-Ctrl-Time">
+ <div title="Temps écoulé" class="Ldt-Ctrl-Time-Elapsed">00:00</div>
+ <div class="Ldt-Ctrl-Time-Separator">/</div>
+ <div title="Temps total" class="Ldt-Ctrl-Time-Total">1:03:30</div>
+ </div>
+ <div class="Ldt-Ctrl-spacer"></div>
+ <div title="Couper le son" class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-Ctrl-Sound-Full"></div>
+ </div>
+ <div title="Changer le volume" class="Ldt-Ctrl-Volume-Control">
+ <div class="Ldt-Ctrl-Volume-Bar"></div>
+ </div>
+ </div>
+
+ </div>
+ <div class="media-segments"></div>
+ </div><!-- bloc-video -->
+ </div><!-- left-content -->
+
+ <div class="right-content">
+ <h2>Plus d’informations</h2>
+ <div class="more-info-wrap">
+ <table class="more-info ">
+ <tbody>
+ <tr class="info-title">
+ <th>Titre :</th>
+ <td><a href="#">Titre du Média</a></td>
+ </tr>
+ <tr class="info-duration">
+ <th>Durée :</th>
+ <td></td>
+ </tr>
+ <tr class="info-description">
+ <th>Description : </th>
+ <td></td>
+ </tr>
+ <tr class="info-tags">
+ <th>Tags : </th>
+ <td></td>
+ </tr>
+ </tbody>
+ </table>
+ <!-- <a href="#" class="button cloner">Cloner le Hashcut</a> -->
+ </div>
+ </ul>
+ <h2>Hashcuts utilisant le média</h2>
+ <ul class="list-video">
+
+ </ul>
+ </div><!-- right-content -->
+
+
+
+ </div><!-- content -->
+
+ <div class="footer clearfix">
+ <ul class="links-left">
+ <li><a href="#">Mentions légales</a></li>
+ <li><a href="#">Contacts</a></li>
+ </ul>
+ <ul class="links-right">
+ <li><a title="IRI" href="http://www.iri.centrepompidou.fr/"> <img src="img/logo-iri.png" alt="iri" /></a></li>
+ <li><a title="cinecast" href="http://cinecast.fr/"><img src="img/logo-cinecast.png" alt="cinecast" /></a></li>
+ <li>© 2012</li>
+ </ul>
+ </div><!-- footer -->
+ </div><!-- wrap -->
+ </div><!-- wrapper -->
+ <!-- JavaScript -->
+ <script type="text/javascript" src="lib/jquery.min.js"></script>
+ <script type="text/javascript" src="lib/jquery-ui.min.js"></script>
+ <script type="text/javascript" src="lib/underscore-min.js"></script>
+ <script type="text/javascript" src="lib/popcorn-complete.min.js"></script>
+ <script type="text/javascript" src="lib/ZeroClipboard.js"></script>
+ <script type="text/javascript" src="js/hashcut.js"></script>
+ <script type="text/javascript">
+
+ IriSP.endpoints = {
+ content: "/pf/ldtplatform/api/ldt/1.0/contents/",
+ project: "/pf/ldtplatform/api/ldt/1.0/projects/",
+ segment: "/pf/ldtplatform/api/ldt/1.0/segments/",
+ ldt: "http://capsicum//pf/ldtplatform/ldt/cljson/id/",
+ hashcut_page: "hashcut.html?project="
+ };
+
+ var mediarx = /media=([^&#]+)/,
+ match = document.location.href.match(mediarx),
+ mediaid = match ? match[1] : "f72aa2f4-29bb-11e2-a193-08002791f1b7";
+
+ $(function() {
+ IriSP.mediaplayer({
+ id: mediaid
+ });
+ IriSP.social();
+ });
+ </script>
+ </body>
+</html>