--- a/src/hashcut/static/hashcut/iri/css/common.css Wed Nov 28 17:55:33 2012 +0100
+++ b/src/hashcut/static/hashcut/iri/css/common.css Wed Nov 28 19:22:15 2012 +0100
@@ -93,7 +93,7 @@
}
.wrap-header-top{
padding-top: 5px;
- background-color: #370078;
+ background-color: #2C80AF;
height: 53px;
margin-bottom: 1px;
}
@@ -131,7 +131,7 @@
}
.wrap-header{
- background-color: #e2dbfd;
+ background-color: #7CD0FF;
}
.header{
position: relative;
@@ -284,7 +284,7 @@
}
.user.info h2 {
- color: #7628df;
+ color: #2C80AF;
font-size: 18px;
font-weight: 600;margin-bottom: 2px;
}
@@ -408,7 +408,7 @@
}
.pagination a{
font-size: 14px;
- color: #7628df;
+ color: #2C80AF;
text-decoration: underline;
}
.pagination a:hover{
@@ -512,7 +512,7 @@
font-size: 11px;
}
.item-video .duration{
- color: #7628df;
+ color: #2C80AF;
font-size: 12px;
font-weight: 600;
}
@@ -602,7 +602,7 @@
font-weight: bold;
}
.annotation-time {
- color: #7628DF;
+ color: #2C80AF;
}
.mashup-description table{
font-size: 12px;
@@ -984,5 +984,5 @@
}
.media-segment-popin span{
- color: #7628df;
+ color: #2C80AF;
}
--- a/src/hashcut/static/hashcut/iri/css/home.css Wed Nov 28 17:55:33 2012 +0100
+++ b/src/hashcut/static/hashcut/iri/css/home.css Wed Nov 28 19:22:15 2012 +0100
@@ -43,7 +43,7 @@
font-weight: bold;
}
.definition p a{
- color: #7628df;
+ color: #2C80AF;
text-decoration: underline;
}
.definition p a:hover{
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/hashcut/templates/iri_mashup_content.html Wed Nov 28 19:22:15 2012 +0100
@@ -0,0 +1,119 @@
+{% extends "iri_mashup_edit.html" %}
+{% load static %}
+{% load i18n %}
+{% load analytics %}
+{% load thumbnail %}
+ {% block title %}Hashcut Media - iri{% endblock %}
+
+
+{% block content %}
+<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>
+ </div>
+ </ul>
+ <h2>Hashcuts utilisant le média</h2>
+ <ul class="list-video">
+
+ </ul>
+ </div><!-- right-content -->
+</div><!-- content -->
+{% endblock %}
+<!-- JavaScript -->
+{% block js_import %}
+<script type="text/javascript" src="{% static 'hashcut/lib/jquery.min.js' %}"></script>
+<script type="text/javascript" src="{% static 'hashcut/lib/jquery-ui.min.js' %}"></script>
+<script type="text/javascript" src="{% static 'hashcut/js/common.js' %}"></script>
+<script type="text/javascript" src="{% static 'hashcut/lib/underscore-min.js' %}"></script>
+<script type="text/javascript" src="{% static 'hashcut/lib/popcorn-complete.min.js' %}"></script>
+<script type="text/javascript" src="{% static 'hashcut/lib/ZeroClipboard.js' %}"></script>
+<script type="text/javascript" src="{% static 'hashcut/js/hashcut.js' %}"></script>
+<script type="text/javascript">
+ IriSP.endpoints = {
+ content: "{% url api_dispatch_list api_name='1.0' resource_name='contents' %}",
+ project: "{% url api_dispatch_list api_name='1.0' resource_name='projects' %}",
+ segment: "{% url api_dispatch_list api_name='1.0' resource_name='segments' %}",
+ ldt: "{% url projectjson_id id='' %}",
+ hashcut_page: "{% url mashup_hashcut branding=branding ldt_id='' %}"
+ };
+
+ $(function() {
+ IriSP.video_url_transform = function(oldurl) {
+ var newurl = oldurl.replace(/mp4:/i,'');
+ newurl = newurl.replace(/ddc_player\//i,'');
+ newurl = newurl.replace(/rtmp/i,'http');
+ return newurl;
+ };
+ IriSP.mediaplayer({
+ id: "{{ctt_id}}"
+ });
+ IriSP.social();
+ });
+</script>
+{% endblock %}
+
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/hashcut/templates/iri_mashup_edit.html Wed Nov 28 19:22:15 2012 +0100
@@ -0,0 +1,287 @@
+{% extends "iri_mashup_home.html" %}
+{% load static %}
+{% load i18n %}
+{% load analytics %}
+{% load thumbnail %}
+ {% block title %}Hashcut Edition - IRI{% endblock %}
+ {% block css_import %}
+ {{ block.super }}
+ <link rel="stylesheet" href="{% static 'hashcut/lib/jquery.tagit.css' %}" />
+ <link rel="stylesheet" href="{% static 'hashcut/iri/css/edition.css' %}" />
+ {% endblock %}
+
+{% block wrap_header %}
+<div class="wrap-header">
+ <div class="header">
+ {% include 'partial/iri_mashup_popin_user.html' %}
+ <!-- popin update-title -->
+ <div class="popin update-title" id="update-title">
+ <div class="pointer"></div>
+ <div class="popin-content">
+ <form class="clearfix" action="#" id="hashcut-form" method="">
+ <p>
+ <label for="hashcut-title">Titre :</label>
+ <input type="text" id="hashcut-title" name="" value="Hashcut sans titre" />
+ </p>
+ <p>
+ <label for="hashcut-description">Description :</label>
+ <textarea name="" id="hashcut-description"></textarea>
+ </p>
+ </form>
+ </div>
+ </div>
+ <!-- /popin update-title -->
+
+ {% include 'partial/iri_hashcut_logo.html' %}
+
+ <div class="title-video-wrap">
+ <p class="title-video">
+ <a title="Modifier le titre et la description" class="open-popin" href="#update-title">Hashcut sans titre</a>
+ </p>
+ <p class="time-length">Durée: <span class="mashup-total-duration">00:00</span></p>
+ </div>
+ <div class="profil-wrap">
+ <ul class="space-top">
+ <li><a href="{% url mashup_home branding=branding %}" class="all-hashcut">Tous les Hashcuts</a></li>
+ <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
+ </ul>
+ </div>
+ </div><!-- header -->
+</div> <!-- wrap-header -->
+{% endblock %}
+
+{% block content %}
+<div class="content clearfix">
+
+ <div class="col-left">
+ <div class="left-head">
+ <h2>Sélectionner les vidéos</h2>
+ <input type="text" name="" placeholder="Rechercher une vidéo" />
+ </div>
+ <ul class="list-video">
+
+ </ul>
+ </div><!-- col-left -->
+
+ <div class="col-middle empty-mode">
+
+ <div class="col-middle-header">
+ <a href="#" class="tab tab-segment">Segmenter <span class="tab-media-title"></span></a>
+ <a href="#" class="tab tab-pvw">Prévisualiser</a>
+ </div>
+
+ <div class="video">
+ <div class="tutorial">
+ <h2>Créer un Hashcut, c’est facile !</h2>
+ <ol>
+ <li>Commencez par choisir une vidéo dans le volet de gauche</li>
+ <li>Créez un segment dans la vidéo et profitez-en pour annoter votre segment</li>
+ <li>Ajoutez votre segment à la liste, réorganisez les segments entre eux</li>
+ <li>Rajoutez quelques commentaires à votre Hashcut. Vous êtes prêts à publier !</li>
+ </ol>
+ </div>
+ <div class="video-wait"></div>
+ <a class="publier-button disable" title="Publier" href="#"></a>
+ </div>
+
+ <div class="widget">
+ <div class="Ldt-Slider-Container">
+ <div class="Ldt-Slider"></div>
+ </div>
+ <div class="Ldt-Slider-Time">00:00</div>
+
+ <div class="Ldt-Ctrl">
+ <div class="Ldt-Ctrl-Left">
+ <div class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState" title="Lecture/Pause"></div>
+ <div class="Ldt-Ctrl-spacer"></div>
+ <div class="Ldt-Ctrl-InOutBlock">
+ <div class="Ldt-Ctrl-button Ldt-Ctrl-SetIn" title="Débuter le segment ici"></div>
+ <div class="Ldt-Ctrl-spacer"></div>
+ <div class="Ldt-Ctrl-button Ldt-Ctrl-SetOut" title="Finir le segment ici"></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 class="Ldt-Ctrl-Time-Elapsed" title="Temps écoulé">00:00</div>
+ <div class="Ldt-Ctrl-Time-Separator">/</div>
+ <div class="Ldt-Ctrl-Time-Total" title="Temps total">00:00</div>
+ </div>
+ <div class="Ldt-Ctrl-spacer"></div>
+ <div class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-Ctrl-Sound-Full" title="Couper/Activer le son"></div>
+ </div>
+ <div class="Ldt-Ctrl-Volume-Control" title="Changer le volume">
+ <div class="Ldt-Ctrl-Volume-Bar"></div>
+ </div>
+ </div>
+
+ </div>
+
+ <div class="bloc-segmentation">
+ <div class="Ldt-Slice"></div>
+ <div class="segmentation">
+ <div class="pointer-padder">
+ <div class="pointer"></div>
+ </div>
+ <div class="popin-content">
+ <div class="validate">
+ <div class="validate-tooltip"></div>
+ </div>
+ <h2>
+ <span class="create-or-edit">Créer un nouveau segment</span>
+ de
+ <span class="time-tangle tangle-start"></span>
+ à
+ <span class="time-tangle tangle-end"></span>
+ (durée:
+ <span class="time-tangle tangle-duration"></span>)
+ </h2>
+ <form action="#" id="segment-form">
+ <div class="form-segment-left">
+ <p>
+ <label for="segment-title">Titre :</label>
+ <input type="text" id="segment-title" />
+ </p>
+ <p>
+ <label for="segment-tags">Tags :</label>
+ <ul id="segment-tags"></ul>
+ </p>
+ </div>
+ <div class="form-segment-right">
+ <p>
+ <label for="segment-description">Description :</label>
+ <textarea id="segment-description"></textarea>
+ </p>
+ </div>
+ <input class="button add-segment" type="submit" value="Ajouter au Hashcut" />
+
+ </form>
+ </div>
+ </div><!-- popin segmentation -->
+
+ <div class="media-segments self-media-segments">
+ <h2>Mes segments sur ce média :</h2>
+ <div class="media-segments-list">
+ </div>
+ </div>
+
+ <div class="media-segments other-media-segments">
+ <h2>Segments existants sur ce média :</h2>
+ <div class="media-segments-list">
+ </div>
+ </div>
+
+ </div><!-- bloc-segmentation -->
+
+ <div class="bloc-pvw">
+
+ <div class="frise mashup-frise">
+ <div class="frise-overflow">
+ <div class="frise-segments">
+ </div>
+ <div class="frise-indications">
+ </div>
+ </div>
+ <div class="frise-position"></div>
+ <div class="mashup-tooltip segment-tooltip-wrapper">
+ <div class="segment-tooltip"></div>
+ <div class="segment-tooltip-tip"></div>
+ </div>
+
+ </div>
+
+ <div class="segment-info mashup-description">
+ <div class="pointer-padder">
+ <div class="pointer"></div>
+ </div>
+ <div class="popin-content">
+ <ul class="tools">
+ <li><a title="Éditer" class="edit" href="#"></a></li>
+ </ul>
+
+ <h2><span class="annotation-title"></span></h2>
+ <table>
+ <tbody>
+ <tr>
+ <th>Extrait de :</th>
+ <td><span class="annotation-media-title"></span> (<span class="annotation-time annotation-begin"></span> - <span class="annotation-time annotation-end"></span>)</td>
+ </tr>
+ <tr>
+ <th>Description :</th>
+ <td><span class="annotation-description"></span></td>
+ </tr>
+ <tr>
+ <th>Tags :</th>
+ <td><span class="annotation-tags"></span></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div><!-- bloc-pvw -->
+
+ </div><!-- col-middle -->
+
+ <div class="col-right">
+ <div class="liste-segment">
+ <div class="validate critical">
+ <div class="validate-tooltip"></div>
+ </div>
+ <h2>Liste des segments</h2>
+ <div class="frise mashup-frise">
+ <p class="aucun-segment">Aucun segment</p>
+ <div class="frise-overflow">
+ <div class="frise-segments">
+ </div>
+ <div class="frise-indications">
+ </div>
+ </div>
+ <div class="mashup-tooltip segment-tooltip-wrapper">
+ <div class="segment-tooltip"></div>
+ <div class="segment-tooltip-tip"></div>
+ </div>
+
+ </div>
+ </div>
+
+ <ul class="list-video organize-segments">
+
+ </ul>
+ </div><!-- col-right -->
+
+</div><!-- content -->
+{% endblock %}
+<!-- JavaScript -->
+{% block js_import %}
+{{ block.super }}
+<script type="text/javascript" src="{% static 'hashcut/lib/tag-it.js' %}"></script>
+<script type="text/javascript" src="{% static 'hashcut/lib/underscore-min.js' %}"></script>
+<script type="text/javascript" src="{% static 'hashcut/lib/popcorn-complete.min.js' %}"></script>
+<script type="text/javascript" src="{% static 'hashcut/js/hashcut.js' %}"></script>
+<script type="text/javascript">
+ IriSP.endpoints = {
+ content: "{% url api_dispatch_list api_name='1.0' resource_name='contents' %}",
+ project: "{% url api_dispatch_list api_name='1.0' resource_name='projects' %}",
+ segment: "{% url api_dispatch_list api_name='1.0' resource_name='segments' %}",
+ ldt: "{% url projectjson_id id='' %}",
+ hashcut_page: "{% url mashup_hashcut branding=branding ldt_id='' %}"
+ };
+ $(function() {
+ IriSP.video_url_transform = function(oldurl) {
+ var newurl = oldurl.replace(/mp4:/i,'');
+ newurl = newurl.replace(/ddc_player\//i,'');
+ newurl = newurl.replace(/rtmp/i,'http');
+ return newurl;
+ };
+ var hashcut = IriSP.editor({
+ creator: "{{creator}}",
+ csrf_token: "{{csrf_token}}",
+ filter: {
+ tags__icontains: "BPI"
+ }
+ });
+ });
+</script>
+{% endblock %}
+
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/hashcut/templates/iri_mashup_hashcut.html Wed Nov 28 19:22:15 2012 +0100
@@ -0,0 +1,190 @@
+{% extends "iri_mashup_home.html" %}
+{% load static %}
+{% load i18n %}
+{% load analytics %}
+{% load thumbnail %}
+ {% block title %}Hashcut Playing - iri{% endblock %}
+ {% block css_import %}
+ {{ block.super }}
+ <link rel="stylesheet" href="{% static 'hashcut/iri/css/players.css' %}" />
+ {% endblock %}
+
+{% block wrap_header %}
+<div class="wrap-header">
+ <div class="header">
+ {% include 'partial/iri_mashup_popin_user.html' %}
+ {% include 'partial/iri_hashcut_logo.html' %}
+ <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="#">Hashcut sans titre</p>
+ </div>
+ <div class="profil-wrap">
+ <ul>
+ <li><a href="{% url mashup_home branding=branding %}" class="all-hashcut">Tous les Hashcuts</a></li>
+ <li><a href="{% url mashup_edit branding=branding %}" class="new-hashcut">Créer un Hashcut</a></li>
+ <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
+ </ul>
+ </div>
+ </div><!-- header -->
+</div><!-- wrap-header -->
+{% endblock %}
+
+{% block content %}
+<div class="content clearfix">
+ <div class="left-content">
+ <h2>Lire le Hashcut</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="frise mashup-frise">
+ <div class="frise-overflow">
+ <div class="frise-segments">
+ </div>
+ <div class="frise-indications">
+ </div>
+ </div>
+ <div class="frise-position"></div>
+ <div class="mashup-tooltip segment-tooltip-wrapper">
+ <div class="segment-tooltip"></div>
+ <div class="segment-tooltip-tip"></div>
+ </div>
+
+ </div>
+ <div class="segment-info mashup-description">
+ <div class="pointer" style="left: 50%;"></div>
+ <div class="popin-content">
+ <h2><span class="annotation-title">Segment sans titre</span></h2>
+ <table>
+ <tbody>
+ <tr>
+ <th>Extrait de :</th>
+ <td><span class="annotation-media-title"></span> (<span class="annotation-time annotation-begin"></span> - <span class="annotation-time annotation-end"></span>)</td>
+ </tr>
+ <tr>
+ <th>Description :</th>
+ <td><span class="annotation-description"></span></td>
+ </tr>
+ <tr>
+ <th>Tags :</th>
+ <td><span class="annotation-tags"></span></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </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 Hashcut</a></td>
+ </tr>
+ <tr class="info-duration">
+ <th>Durée :</th>
+ <td></td>
+ </tr>
+ <tr class="info-author">
+ <th>Auteur : </th>
+ <td><a href="#"></a></td>
+ </tr>
+ <tr class="info-description">
+ <th>Description : </th>
+ <td></td>
+ </tr>
+<!-- <tr class="info-tags">
+ <th>Tags : </th>
+ <td>Mashup, Création, Art</td>
+ </tr> -->
+ </tbody>
+ </table>
+<!-- <a href="#" class="button cloner">Cloner le Hashcut</a> -->
+ </div>
+ <h2>Médias utilisés dans le Hashcut</h2>
+ <ul class="list-video">
+
+ </ul>
+ </div><!-- right-content -->
+</div><!-- content -->
+{% endblock %}
+<!-- JavaScript -->
+{% block js_import %}
+{{ block.super }}
+<script type="text/javascript" src="{% static 'hashcut/lib/underscore-min.js' %}"></script>
+<script type="text/javascript" src="{% static 'hashcut/lib/popcorn-complete.min.js' %}"></script>
+<script type="text/javascript" src="{% static 'hashcut/lib/ZeroClipboard.js' %}"></script>
+<script type="text/javascript" src="{% static 'hashcut/js/hashcut.js' %}"></script>
+<script type="text/javascript">
+ IriSP.endpoints = {
+ content: "{% url api_dispatch_list api_name='1.0' resource_name='contents' %}",
+ project: "{% url api_dispatch_list api_name='1.0' resource_name='projects' %}",
+ segment: "{% url api_dispatch_list api_name='1.0' resource_name='segments' %}",
+ ldt: "{% url projectjson_id id='' %}",
+ media_page: "{% url mashup_content branding=branding ctt_id='' %}"
+ };
+
+ $(function() {
+ IriSP.video_url_transform = function(oldurl) {
+ var newurl = oldurl.replace(/mp4:/i,'');
+ newurl = newurl.replace(/ddc_player\//i,'');
+ newurl = newurl.replace(/rtmp/i,'http');
+ return newurl;
+ };
+ IriSP.mashupplayer({
+ id: "{{ldt_id}}"
+ });
+ IriSP.social();
+ });
+</script>
+{% endblock %}
+
--- a/src/hashcut/templates/iri_mashup_home.html Wed Nov 28 17:55:33 2012 +0100
+++ b/src/hashcut/templates/iri_mashup_home.html Wed Nov 28 19:22:15 2012 +0100
@@ -1,12 +1,14 @@
{% load static %}
{% load i18n %}
{% load analytics %}
+{% load thumbnail %}
<!DOCTYPE html>
<html>
<head>
{% block 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>{% block title %}Hashcut Home - IRI{% endblock %}</title>
@@ -14,13 +16,10 @@
{% endblock %}
{% block css_import %}
- <link rel="stylesheet" href="{% static 'iri/lib/jquery-ui.css' %}" />
- <link rel="stylesheet" href="{% static 'iri/lib/css/reset.css' %}" />
- <link rel="stylesheet" href="{% static 'iri/lib/css/common.css' %}" />
- <link rel="stylesheet" href="{% static 'iri/lib/css/home.css' %}" />
- {% endblock %}
-
- {% block js_import %}
+ <link rel="stylesheet" href="{% static 'hashcut/lib/jquery-ui.css' %}" />
+ <link rel="stylesheet" href="{% static 'hashcut/iri/css/reset.css' %}" />
+ <link rel="stylesheet" href="{% static 'hashcut/iri/css/common.css' %}" />
+ <link rel="stylesheet" href="{% static 'hashcut/iri/css/home.css' %}" />
{% endblock %}
{% block js_declaration %}
@@ -29,7 +28,119 @@
</head>
<body>
{% block body %}
-<p>TEMPLATE PAR DEFAUT IRI. Ta variable branding = {{branding}}</p>
+<div class="wrap-header-top">
+ <div class="wrap-header-top-content">
+ <a title="Institut de recherche et d'innovation" href="#"><img src="{% static 'hashcut/iri/img/logo-iri.png' %}" alt="Institut de recherche et d'innovation" /></a>
+ </div>
+</div><!-- wrap-header-top -->
+
+{% block wrap_header %}
+<div class="wrap-header">
+ <div class="header">
+ {% include 'partial/iri_mashup_popin_user.html' %}
+ {% include 'partial/iri_hashcut_logo.html' %}
+ <div class="title-header">
+ <h2><a href="{% url mashup_edit branding=branding %}">Créer un hashcut !</a></h2>
+ </div>
+ <div class="profil-wrap">
+ <ul class="space-top-2">
+ <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
+ </ul>
+ </div>
+ </div><!-- header -->
+</div><!-- wrap-header -->
+{% endblock %}
+
+{% block wrapper %}
+<div class="wrapper">
+ <div class="wrap">
+ {% block content %}
+ <div class="content">
+ <div class="left-content">
+ <h2>Hashcuts à la Une</h2>
+ <div class="hashcut-video-wrap news">
+ <div class="video-item">
+ <a href="" class="screenshot">{% thumbnail p1.image "302x202" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt=""/>{% empty %} {% endthumbnail %}</a>
+ <h3><strong>{{ p1.title }}</strong> par <a href="#">{{ p1.created_by }}</a> | <span>02:24</span> </h3>
+ </div>
+ <div class="video-item">
+ <a href="#" class="screenshot">{% thumbnail p2.image "302x202" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt=""/>{% empty %} {% endthumbnail %}</a>
+ <h3><strong>{{ p2.title }}</strong> par <a href="#">{{ p1.created_by }}</a> | <span>02:24</span> </h3>
+ </div>
+ </div>
+
+ <h2>Derniers Hashcuts</h2>
+ <div class="hashcut-video-wrap last">
+ {% for p in projects %}
+ <div class="video-item">
+ <a href="#" class="screenshot">{% thumbnail p.image "142x95" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt=""/>{% empty %} {% endthumbnail %}</a>
+ <h3><strong>{% if p.title|length > 30 %}{{p.title|slice:":30"}}...{% else %}{{p.title}}{% endif %}</strong> par <a href="#">{{ p.created_by }}</a> | <span>02:24</span> </h3>
+ </div>
+ {% endfor %}
+ </div>
+
+ <!--div class="pagination">
+ <a href="#" class="active">1</a>
+ <a href="#">2</a>
+ <a href="#">3</a>
+ <a href="#">4</a>
+ <a href="#">5</a>
+ <a href="#">6</a>
+ <a href="#">Suivant</a>
+ </div-->
+
+ </div><!-- left-content -->
+ <div class="right-content">
+ <div class="definition">
+ <h2>Hashcuts ?</h2>
+ <p>Un <strong>Hashcut</strong> est à la fois une <a href="#">Hypervidéo</a> (ensemble de vidéos cliquable, permettant une navigation entre vidéos) et un <a href="#">Mashup</a> (mélange de médias, de l’anglais mash, «purée»).</p>
+ <p>Un <strong>Hashcut</strong> est un assemblage de citations de vidéos, mises bout à bout, sans altération des médias d’origine, et permet à chacun de proposer un nouveau regard, une porte d’entrée éditorialisée sur ces médias.</p>
+ </div>
+ <div class="how-to">
+ <h2>Comment faire ?</h2>
+ <ul>
+ <li class="inscription">
+ <h3>1. S’inscrire</h3>
+ <p>Commencez par créer votre espace personnel sur cette plateforme !</p>
+ </li>
+ <li class="next-step"></li>
+ <li class="creation">
+ <h3>2. Créer un hashcut</h3>
+ <p>Choisissez des médias, segmentez les, assemblez les segments et rajoutez des commentaires sur le Hashcut.</p>
+ </li>
+ <li class="next-step"></li>
+ <li class="publier">
+ <h3>3. Publier et partager</h3>
+ <p>Une fois le hashcut terminé, publiez-le sur cette plateforme etpartagez votre création sur les réseaux sociaux</p>
+ </li>
+ </ul>
+ </div>
+
+ </div><!-- left-content -->
+ </div><!-- content -->
+ {% endblock %}
+ {% block footer %}
+ <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/" target="_blank"> <img src="{% static 'hashcut/iri/img/logo-iri.png' %}" alt="iri" /></a></li>
+ <li><a title="cinecast" href="http://cinecast.fr/" target="_blank"><img src="{% static 'hashcut/iri/img/logo-cinecast.png' %}" alt="cinecast" /></a></li>
+ <li>© 2012</li>
+ </ul>
+ </div><!-- footer -->
+ {% endblock %}
+ </div><!-- wrap -->
+</div><!-- wrapper -->
+{% endblock %}
+<!-- JavaScript -->
+{% block js_import %}
+<script type="text/javascript" src="{% static 'hashcut/lib/jquery.min.js' %}"></script>
+<script type="text/javascript" src="{% static 'hashcut/lib/jquery-ui.min.js' %}"></script>
+<script type="text/javascript" src="{% static 'hashcut/js/common.js' %}"></script>
+{% endblock %}
{% endblock %}
{% analytics %}
</body>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/hashcut/templates/partial/iri_hashcut_logo.html Wed Nov 28 19:22:15 2012 +0100
@@ -0,0 +1,5 @@
+{% load static %}
+ <h1><a title="Hashcut - Le Mashup cliquable" class="clearfix" href="#">
+ <img src="{% static 'hashcut/iri/img/hashcut-logo.png' %}" alt="Hashcut" />
+ <span>Le Mashup<br />Cliquable</span>
+ </a></h1>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/hashcut/templates/partial/iri_mashup_popin_user.html Wed Nov 28 19:22:15 2012 +0100
@@ -0,0 +1,68 @@
+ <!-- popin user -->
+
+ <div class="popin user info" id="user">
+ <div class="pointer"></div>
+ <div class="popin-content">
+ <h2>{{creator}}</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">
+ <div class="pointer"></div>
+ <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">
+ <div class="pointer"></div>
+ <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 -->
\ No newline at end of file
--- a/src/hashcut/views.py Wed Nov 28 17:55:33 2012 +0100
+++ b/src/hashcut/views.py Wed Nov 28 19:22:15 2012 +0100
@@ -65,7 +65,6 @@
return names
def get(self, request, branding="iri", **kwargs):
- logging.debug("COUCOU")
self.branding = branding
context = {"branding":self.branding, "creator":request.user.username}
return self.render_to_response(context)