From 119f89abcab296884b3c628146fb0f94c49caaf6 Mon Sep 17 00:00:00 2001
From: Bachir Soussi Chiadmi <bachir@g-u-i.me>
Date: Mon, 12 Mar 2018 16:55:13 +0100
Subject: [PATCH] ajax loading of edlp studio from custom block link ok also
 refactored page layout for better display of footer

---
 .../edlp_studio/assets/js/edlp_studio.js      |   1 +
 .../figli/edlp_studio/edlp_studio.module      |   9 +-
 .../figli/edlp_studio/edlp_studio.routing.yml |   8 +
 .../edlp_studio/includes/edlp_chutier_ui.inc  |  57 ++++++-
 .../includes/edlp_composition_ui.inc          |   4 +-
 .../edlp_studio/includes/edlp_studio_ui.inc   |   2 -
 .../src/Controller/StudioUIController.php     |  58 +++++--
 .../src/Plugin/Block/StudioLinkBlock.php      |  71 ++++++++
 .../templates/edlp-chutier-ui.html.twig       |   6 +
 .../templates/edlp-composition-ui.html.twig   |   6 +
 .../templates/edlp-studio-ui.html.twig        |   4 +
 .../templates/edlp_chutier_ui.html.twig       |   0
 .../templates/edlp_composition_ui.html.twig   |   0
 .../templates/edlp_studio_ui.html.twig        |   0
 .../edlptheme/assets/dist/scripts/main.min.js |   7 +-
 .../edlptheme/assets/dist/styles/app.min.css  | 160 ++++++++++++++----
 .../custom/edlptheme/assets/scripts/main.js   |   7 +-
 .../custom/edlptheme/assets/styles/app.scss   | 123 +++++++++++---
 .../edlptheme/assets/styles/base/_layout.scss |  39 +++--
 .../content/edlp-studio-ui.html.twig          |  10 ++
 .../edlptheme/templates/layout/page.html.twig |  10 +-
 .../sync/block.block.studiolinkblock.yml      |  20 +++
 ...ew_display.node.enregistrement.chutier.yml |  52 ++++++
 ...ew_display.node.enregistrement.default.yml |   1 +
 .../core.entity_view_mode.node.chutier.yml    |  10 ++
 25 files changed, 569 insertions(+), 96 deletions(-)
 create mode 100644 sites/all/modules/figli/edlp_studio/src/Plugin/Block/StudioLinkBlock.php
 create mode 100644 sites/all/modules/figli/edlp_studio/templates/edlp-chutier-ui.html.twig
 create mode 100644 sites/all/modules/figli/edlp_studio/templates/edlp-composition-ui.html.twig
 create mode 100644 sites/all/modules/figli/edlp_studio/templates/edlp-studio-ui.html.twig
 delete mode 100644 sites/all/modules/figli/edlp_studio/templates/edlp_chutier_ui.html.twig
 delete mode 100644 sites/all/modules/figli/edlp_studio/templates/edlp_composition_ui.html.twig
 delete mode 100644 sites/all/modules/figli/edlp_studio/templates/edlp_studio_ui.html.twig
 create mode 100644 sites/all/themes/custom/edlptheme/templates/content/edlp-studio-ui.html.twig
 create mode 100644 sites/default/config/sync/block.block.studiolinkblock.yml
 create mode 100644 sites/default/config/sync/core.entity_view_display.node.enregistrement.chutier.yml
 create mode 100644 sites/default/config/sync/core.entity_view_mode.node.chutier.yml

diff --git a/sites/all/modules/figli/edlp_studio/assets/js/edlp_studio.js b/sites/all/modules/figli/edlp_studio/assets/js/edlp_studio.js
index c78eae51d..98475f61d 100644
--- a/sites/all/modules/figli/edlp_studio/assets/js/edlp_studio.js
+++ b/sites/all/modules/figli/edlp_studio/assets/js/edlp_studio.js
@@ -48,6 +48,7 @@
     });
     $link.replaceWith(data.new_link);
     initAjax();
+    // TODO: reload Studio chutier_ui's documents list
   };
 
   function onErrorActionToChutier(jqxhr, textStatus, error, $link){
diff --git a/sites/all/modules/figli/edlp_studio/edlp_studio.module b/sites/all/modules/figli/edlp_studio/edlp_studio.module
index c5bcec9bc..3cc7c9a9e 100644
--- a/sites/all/modules/figli/edlp_studio/edlp_studio.module
+++ b/sites/all/modules/figli/edlp_studio/edlp_studio.module
@@ -43,20 +43,22 @@ function edlp_studio_theme($existing, $type, $theme, $path) {
     'edlp_chutier_ui' => array(
       'file' => 'includes/edlp_chutier_ui.inc',
       'variables' => array(
-        'documents' => array(),
+        'title' => t('Chutier'),
+        'document_nodes' => array(),
       ),
     ),
     'edlp_composition_ui' => array(
       'file' => 'includes/edlp_composition_ui.inc',
       'variables' => array(
+        'title' => t('Compositon'),
         'compositions' => array(),
       ),
     ),
     'edlp_studio_ui' => array(
       'file' => 'includes/edlp_studio_ui.inc',
       'variables' => array(
-        'chutier' => null,
-        'compositions' => null,
+        'chutier_ui' => null,
+        'composition_ui' => null,
       ),
     ),
   );
@@ -127,6 +129,7 @@ function edlp_studio_node_view(array &$build, \Drupal\Core\Entity\EntityInterfac
       $url = Chutier::getActionsUrl($entity->id(), $user->id());
       $build['chutier_actions'] = array(
         '#type' => 'link',
+        '#title' => 'Chutier',
         '#url' => $url,
         '#options'=>array(
           'attributes' => array(
diff --git a/sites/all/modules/figli/edlp_studio/edlp_studio.routing.yml b/sites/all/modules/figli/edlp_studio/edlp_studio.routing.yml
index c469fd984..ab541630e 100644
--- a/sites/all/modules/figli/edlp_studio/edlp_studio.routing.yml
+++ b/sites/all/modules/figli/edlp_studio/edlp_studio.routing.yml
@@ -22,3 +22,11 @@ edlp_studio.studio_ui:
     _title: 'Studio User Interface'
   requirements:
     _permission: 'use chutier'
+
+edlp_studio.studio_ui_ajax:
+  path: '/edlp/studio-ui/ajax'
+  defaults:
+    _controller: '\Drupal\edlp_studio\Controller\StudioUIController::StudioUIJson'
+    _title: 'Studio User Interface'
+  requirements:
+    _permission: 'use chutier'
diff --git a/sites/all/modules/figli/edlp_studio/includes/edlp_chutier_ui.inc b/sites/all/modules/figli/edlp_studio/includes/edlp_chutier_ui.inc
index c125cf7ea..fc9b2c7c2 100644
--- a/sites/all/modules/figli/edlp_studio/includes/edlp_chutier_ui.inc
+++ b/sites/all/modules/figli/edlp_studio/includes/edlp_chutier_ui.inc
@@ -1,12 +1,57 @@
 <?php
 
-// use Drupal\Core\Url;
+use \Drupal\Core\Url;
+use Drupal\Component\Utility\Unicode;
 
 function template_preprocess_edlp_chutier_ui(&$vars){
   // dpm($vars);
-/*
-  @see https://www.drupal8.ovh/index.php/en/tutoriels/339/render-a-node-or-an-entity
-  */
-  // $view_builder = \Drupal::entityTypeManager()->getViewBuilder($vars['entity_type']);
-  // $vars['content'] = $view_builder->view($vars['entity'], $vars['view_mode']);
+  // $view_builder = \Drupal::entityTypeManager()->getViewBuilder('node');
+
+  $vars['documents'] = array (
+    '#theme' => 'item_list',
+    '#items' => [],
+  );
+  foreach($vars['document_nodes'] as $node){
+    // get the url
+    $url = Url::fromRoute('entity.node.canonical', ['node' => $node->id()], ['absolute' => TRUE]);
+    // get the audio file url
+    $field_son_values = $node->get('field_son')->getValue();
+    $son_fid = count($field_son_values) ? $field_son_values[0]['target_id'] : "";
+    $son_file = \Drupal\file\Entity\File::load($son_fid);
+    $son_url = null;
+    if($son_file){
+      $son_uri = $son_file->getFileUri();
+      $son_url = file_create_url($son_uri);
+    }
+    // get the title
+    $title = $node->getTitle();
+    if(!$title) continue;
+    $trunc_title = Unicode::truncate($title, 30, true, true);
+    // classes
+    $classes = array('audio-link', 'ajax-link');
+    // get the entries
+    $entrees = '';
+    foreach ($node->get('field_entrees')->getValue() as $key => $term) {
+      $entrees .= '<span class="entree" tid="'.$term['target_id'].'"></span>';
+    }
+    // build the link
+    $vars['documents']['#items'][] = array(
+      '#prefix' => '<div class="entrees">'.$entrees.'</div>',
+      '#title' => $trunc_title,
+      '#type' => 'link',
+      '#url' => $url,
+      '#options'=>array(
+        'attributes' => array(
+          'data-drupal-link-system-path' => $url->getInternalPath(),
+          'audio_url' => $son_url,
+          'nid' => $node->id(),
+          // 'tid' => $entrees[mt_rand(0, count($entrees) - 1)],
+          // 'entries_size' => count($entrees),
+          'class' => $classes,
+          'title'=>$title,
+        )
+      )
+    );
+  }
+
 }
diff --git a/sites/all/modules/figli/edlp_studio/includes/edlp_composition_ui.inc b/sites/all/modules/figli/edlp_studio/includes/edlp_composition_ui.inc
index f789599df..227a46119 100644
--- a/sites/all/modules/figli/edlp_studio/includes/edlp_composition_ui.inc
+++ b/sites/all/modules/figli/edlp_studio/includes/edlp_composition_ui.inc
@@ -1,8 +1,6 @@
 <?php
 
-// use Drupal\Core\Url;
-
-function template_preprocess_edlp_compositions_ui(&$vars){
+function template_preprocess_edlp_composition_ui(&$vars){
   // dpm($vars);
 /*
   @see https://www.drupal8.ovh/index.php/en/tutoriels/339/render-a-node-or-an-entity
diff --git a/sites/all/modules/figli/edlp_studio/includes/edlp_studio_ui.inc b/sites/all/modules/figli/edlp_studio/includes/edlp_studio_ui.inc
index 82f846160..7c6d0746b 100644
--- a/sites/all/modules/figli/edlp_studio/includes/edlp_studio_ui.inc
+++ b/sites/all/modules/figli/edlp_studio/includes/edlp_studio_ui.inc
@@ -1,7 +1,5 @@
 <?php
 
-// use Drupal\Core\Url;
-
 function template_preprocess_edlp_studio_ui(&$vars){
   // dpm($vars);
 /*
diff --git a/sites/all/modules/figli/edlp_studio/src/Controller/StudioUIController.php b/sites/all/modules/figli/edlp_studio/src/Controller/StudioUIController.php
index a987ab29d..64751e6ce 100644
--- a/sites/all/modules/figli/edlp_studio/src/Controller/StudioUIController.php
+++ b/sites/all/modules/figli/edlp_studio/src/Controller/StudioUIController.php
@@ -6,6 +6,7 @@ use Drupal\Core\Controller\ControllerBase;
 use Symfony\Component\DependencyInjection\ContainerInterface;
 use Drupal\Core\Session\AccountInterface;
 use Drupal\User\UserDataInterface;
+use Symfony\Component\HttpFoundation\JsonResponse;
 
 use Drupal\edlp_studio\Entity\Chutier;
 
@@ -38,36 +39,69 @@ class StudioUIController extends ControllerBase {
     );
   }
 
-
   /**
-   * Studioui.
+   * Studio-ui.
    *
-   * @return string
-   *   Return Hello string.
+   * @return array
+   *   Return renderable array.
    */
   public function StudioUI() {
+    return $this->buildUI();
+  }
+
+  /**
+   * Studio-ui.
+   *
+   * @return array
+   *   Return renderable array.
+   */
+  public function StudioUIJson() {
+    $renderable = $this->buildUI();
+    $rendered = render($renderable);
+
+    // JSON
+    $response = new JsonResponse();
+    $response->setData([
+      'rendered'=> $rendered,
+    ]);
+    return $response;
+
+  }
+
+  public function buildUI(){
     // get current user
     // done by DependencyInjection of AccountInterface
-    dpm($this->user->id());
+    // dpm($this->user->id());
 
     // get his docs in chutier
-    $docs = Chutier::getUserChutiersContents($this->user->id());
-    dpm($docs);
+    $documents_nids = Chutier::getUserChutiersContents($this->user->id());
+    // dpm($documents_nids);
 
-    // TODO: add chutier theme, preprocess, twig template to studio module
-    // TODO: build content renderable array
+    $documents = entity_load_multiple('node', $documents_nids);
+
+    // build content renderable array
+    $chutier_ui = array(
+      "#theme"=>'edlp_chutier_ui',
+      '#title' => t('Chutier'),
+      "#document_nodes" => $documents,
+    );
 
     // TODO: get compositions
     // TODO: add compositions theme, preprocess, twig template to studio module
     // TODO: build content renderable array
+    $composition_ui = array(
+      "#theme"=>'edlp_compostion_ui',
+      "#title" => t('Composition'),
+      "#compositions" => array('#markup'=>'TODO : compositions UI'),
+    );
 
     // TODO: add studio theme, preprocess, twig template to studio module
     // TODO: build global studio renderable array
 
     return [
-      '#type' => 'markup',
-      '#markup' => $this->t('Implement method: StudioUI')
+      '#theme' => 'edlp_studio_ui',
+      '#chutier_ui' => $chutier_ui,
+      '#composition_ui' => $composition_ui,
     ];
   }
-
 }
diff --git a/sites/all/modules/figli/edlp_studio/src/Plugin/Block/StudioLinkBlock.php b/sites/all/modules/figli/edlp_studio/src/Plugin/Block/StudioLinkBlock.php
new file mode 100644
index 000000000..7b4c93b4c
--- /dev/null
+++ b/sites/all/modules/figli/edlp_studio/src/Plugin/Block/StudioLinkBlock.php
@@ -0,0 +1,71 @@
+<?php
+
+namespace Drupal\edlp_studio\Plugin\Block;
+
+use Drupal\Core\Session\AccountProxy;
+use Drupal\Core\Session\AccountProxyInterface;
+use Drupal\Core\Block\BlockBase;
+use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+use Drupal\Core\Url;
+
+/**
+ * Provides a 'StudioLinkBlock' block.
+ *
+ * @Block(
+ *  id = "edlp_studio_link_block",
+ *  admin_label = @Translation("Studio link block"),
+ * )
+ */
+class StudioLinkBlock extends BlockBase  implements ContainerFactoryPluginInterface{
+
+  protected $user;
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
+    // Instantiates this form class.
+    return new static(
+      $configuration,
+      $plugin_id,
+      $plugin_definition,
+      $container->get('current_user')
+    );
+  }
+
+  /**
+  * @param array $configuration
+  * @param string $plugin_id
+  * @param mixed $plugin_definition
+  * @param \Drupal\Core\Session\AccountProxyInterface $account
+  */
+  public function __construct(array $configuration, $plugin_id, $plugin_definition, AccountProxyInterface $account) {
+    parent::__construct($configuration, $plugin_id, $plugin_definition);
+    $this->user = $account;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function build() {
+    $build = [];
+    if($this->user->id()){
+      $url = Url::fromRoute('edlp_studio.studio_ui', [], ['absolute' => TRUE]);
+      $build['edlp_studio_link_block'] = array(
+        '#title' => "Studio",
+        '#type' => 'link',
+        '#url' => $url,
+        '#options'=>array(
+          'attributes' => array(
+            'data-drupal-link-system-path' => $url->getInternalPath(),
+            'class' => array('ajax-link'),
+          )
+        )
+      );
+
+    }
+    return $build;
+  }
+
+}
diff --git a/sites/all/modules/figli/edlp_studio/templates/edlp-chutier-ui.html.twig b/sites/all/modules/figli/edlp_studio/templates/edlp-chutier-ui.html.twig
new file mode 100644
index 000000000..92e2f11f8
--- /dev/null
+++ b/sites/all/modules/figli/edlp_studio/templates/edlp-chutier-ui.html.twig
@@ -0,0 +1,6 @@
+<div class="chutier_ui">
+ <h2>{{ title }}</h2>
+ <section class="documents">
+   {{ documents }}
+ </section>
+</div>
diff --git a/sites/all/modules/figli/edlp_studio/templates/edlp-composition-ui.html.twig b/sites/all/modules/figli/edlp_studio/templates/edlp-composition-ui.html.twig
new file mode 100644
index 000000000..99960b169
--- /dev/null
+++ b/sites/all/modules/figli/edlp_studio/templates/edlp-composition-ui.html.twig
@@ -0,0 +1,6 @@
+<div class="composition_ui">
+ <h2>{{ title }}</h2>
+ <section class="composition">
+   {{ compostions }}
+ </section>
+</div>
diff --git a/sites/all/modules/figli/edlp_studio/templates/edlp-studio-ui.html.twig b/sites/all/modules/figli/edlp_studio/templates/edlp-studio-ui.html.twig
new file mode 100644
index 000000000..a0a3379d1
--- /dev/null
+++ b/sites/all/modules/figli/edlp_studio/templates/edlp-studio-ui.html.twig
@@ -0,0 +1,4 @@
+<div id="studio-ui">
+  {{ chutier_ui }}
+  {{ composition_ui }}
+</div>
diff --git a/sites/all/modules/figli/edlp_studio/templates/edlp_chutier_ui.html.twig b/sites/all/modules/figli/edlp_studio/templates/edlp_chutier_ui.html.twig
deleted file mode 100644
index e69de29bb..000000000
diff --git a/sites/all/modules/figli/edlp_studio/templates/edlp_composition_ui.html.twig b/sites/all/modules/figli/edlp_studio/templates/edlp_composition_ui.html.twig
deleted file mode 100644
index e69de29bb..000000000
diff --git a/sites/all/modules/figli/edlp_studio/templates/edlp_studio_ui.html.twig b/sites/all/modules/figli/edlp_studio/templates/edlp_studio_ui.html.twig
deleted file mode 100644
index e69de29bb..000000000
diff --git a/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js b/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js
index d15c3964d..264715f7b 100644
--- a/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js
+++ b/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js
@@ -28,7 +28,7 @@ edlp_vars = {
     var _$body = $('body');
     var _is_front = _$body.is('.path-frontpage');
     var _$corpus_canvas;
-    var _$content_container = $('.layout-container>main>.layout-content');
+    var _$content_container = $('main[role="main"]>.layout-content');
     var _$ajaxLinks;
 
     function init(){
@@ -117,6 +117,7 @@ edlp_vars = {
         // TODO: previous and next btns
       },
       openDocument(node){
+        console.log('AudioPlayer openDocument', node);
         this.setSRC(node.audio_url);
         this.loadNode(node.nid);
       },
@@ -129,13 +130,13 @@ edlp_vars = {
       },
       onNodeLoaded(data){
         console.log('AudioPlayer node loaded', data);
-        this.$cartel.html(data.rendered);
-        this.$cartel.removeClass('loading');
+        this.$cartel.html(data.rendered).removeClass('loading');
         _$body.trigger({'type':'new-audio-cartel-loaded'});
         initAjaxLinks();
       },
       onNodeLoadFail(jqxhr, textStatus, error){
         console.warn('AudioPlayer node load failed', jqxhr.responseText);
+        this.$cartel.removeClass('loading').html('');
       },
       // audio functions
       setSRC(url){
diff --git a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
index 48f995bbf..7d093f89d 100644
--- a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
+++ b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
@@ -1095,16 +1095,16 @@ body, html {
   margin: 0;
   padding: 0; }
 
-div.layout-container {
+header[role="banner"] {
+  z-index: 1;
   position: relative;
-  width: 100%;
-  height: 100%;
-  padding: 0.5em 1em;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  z-index: 1; }
+  padding: 0.5em 1em; }
+  header[role="banner"] > .wrapper {
+    border-bottom: 1px solid red;
+    height: 70px; }
 
 main[role="main"] {
+  z-index: 1;
   pointer-events: none;
   position: absolute;
   left: 0;
@@ -1119,26 +1119,26 @@ main[role="main"] {
     width: 100%;
     height: 100%;
     overflow: hidden; }
-  main[role="main"] .layout-content > * {
-    pointer-events: auto; }
+    main[role="main"] .layout-content > .messages {
+      max-height: 500px;
+      overflow: auto; }
+    main[role="main"] .layout-content > * {
+      pointer-events: auto; }
 
 footer[role="contentinfo"] {
+  z-index: 1;
   position: fixed;
   bottom: 0;
-  width: 100%; }
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+  width: 100%;
+  padding: 0.5em 1em; }
 
 .os-scroll {
   height: 100%; }
 
-.layout-container {
-  pointer-events: none; }
-
 header[role="banner"] {
-  position: relative;
-  padding: 0 0 0.5em 0;
-  border-bottom: 1px solid red;
-  pointer-events: all;
-  height: 70px; }
+  pointer-events: all; }
 
 #block-edlptheme-branding {
   display: inline-block; }
@@ -1496,6 +1496,81 @@ body.ajax-loading main[role="main"]:before {
   .chutier-icon:hover .popup {
     display: block; }
 
+.row .col .studio-ui-wrapper {
+  height: 100%; }
+
+#studio-ui {
+  height: 100%; }
+  #studio-ui .chutier_ui {
+    height: 50%;
+    border-bottom: 1px solid red; }
+    #studio-ui .chutier_ui > h2 {
+      margin: 0.5em 0;
+      font-size: 1em;
+      font-weight: 500;
+      text-transform: uppercase; }
+    #studio-ui .chutier_ui .documents ul, #studio-ui .chutier_ui .documents li {
+      margin: 0;
+      padding: 0;
+      line-height: 1.2; }
+    #studio-ui .chutier_ui .documents li {
+      display: inline-block;
+      vertical-align: top;
+      width: 49%;
+      margin-bottom: 0.5em; }
+      #studio-ui .chutier_ui .documents li .entrees {
+        line-height: 0;
+        display: inline-block; }
+        #studio-ui .chutier_ui .documents li .entrees span {
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          background-color: black;
+          margin-right: 3px; }
+          #studio-ui .chutier_ui .documents li .entrees span[tid='134'] {
+            background-color: #2b8f2f; }
+          #studio-ui .chutier_ui .documents li .entrees span[tid='121'] {
+            background-color: #3a33b6; }
+          #studio-ui .chutier_ui .documents li .entrees span[tid='125'] {
+            background-color: #2c9f57; }
+          #studio-ui .chutier_ui .documents li .entrees span[tid='119'] {
+            background-color: #c48978; }
+          #studio-ui .chutier_ui .documents li .entrees span[tid='132'] {
+            background-color: #5270bb; }
+          #studio-ui .chutier_ui .documents li .entrees span[tid='122'] {
+            background-color: #fb54d3; }
+          #studio-ui .chutier_ui .documents li .entrees span[tid='129'] {
+            background-color: #e07483; }
+          #studio-ui .chutier_ui .documents li .entrees span[tid='120'] {
+            background-color: #655845; }
+          #studio-ui .chutier_ui .documents li .entrees span[tid='130'] {
+            background-color: #7e0868; }
+          #studio-ui .chutier_ui .documents li .entrees span[tid='118'] {
+            background-color: #0e7121; }
+          #studio-ui .chutier_ui .documents li .entrees span[tid='127'] {
+            background-color: #dabd42; }
+          #studio-ui .chutier_ui .documents li .entrees span[tid='133'] {
+            background-color: #0399bb; }
+          #studio-ui .chutier_ui .documents li .entrees span[tid='128'] {
+            background-color: #399a1c; }
+          #studio-ui .chutier_ui .documents li .entrees span[tid='124'] {
+            background-color: #708540; }
+          #studio-ui .chutier_ui .documents li .entrees span[tid='116'] {
+            background-color: #191bff; }
+          #studio-ui .chutier_ui .documents li .entrees span[tid='117'] {
+            background-color: #279d84; }
+          #studio-ui .chutier_ui .documents li .entrees span[tid='131'] {
+            background-color: #5219ab; }
+          #studio-ui .chutier_ui .documents li .entrees span[tid='126'] {
+            background-color: #d49cb6; }
+          #studio-ui .chutier_ui .documents li .entrees span[tid='123'] {
+            background-color: #497715; }
+      #studio-ui .chutier_ui .documents li a {
+        text-transform: capitalize;
+        font-size: 1em; }
+  #studio-ui .composition_ui {
+    height: 50%; }
+
 body.path-agenda main .col > .wrapper {
   height: 100%; }
 
@@ -1558,19 +1633,27 @@ body.path-productions .layout-content .row {
         padding: 0 1em; }
 
 footer {
-  pointer-events: none;
-  display: table;
-  padding: 0 0 0.5em 0; }
-  footer > .region {
-    display: table-cell;
+  position: relative;
+  pointer-events: none; }
+  footer > .wrapper {
     white-space: nowrap; }
-  footer .region-footer-left {
-    text-align: left; }
-  footer .region-footer-center {
-    text-align: center; }
-  footer .region-footer-right {
-    text-align: right;
-    min-width: 30px; }
+    footer > .wrapper > .region {
+      display: inline-block;
+      vertical-align: baseline;
+      white-space: normal; }
+      footer > .wrapper > .region > * {
+        display: inline-block;
+        vertical-align: bottom; }
+    footer > .wrapper .region-footer-left {
+      width: 12%;
+      text-align: left; }
+    footer > .wrapper .region-footer-center {
+      width: 72%;
+      overflow: hidden;
+      text-align: center; }
+    footer > .wrapper .region-footer-right {
+      width: 12%;
+      text-align: right; }
   footer nav.block-menu {
     display: inline-block; }
     footer nav.block-menu ul {
@@ -1595,6 +1678,8 @@ footer {
           text-transform: uppercase;
           font-size: 0.756em;
           white-space: nowrap; }
+        footer nav.block-menu ul li:first-of-type {
+          margin-left: 1em; }
   footer .block-language {
     display: inline-block;
     position: relative; }
@@ -1628,6 +1713,7 @@ footer {
     body:not(.path-productions) footer #block-productions {
       display: none; }
     footer #block-productions ul {
+      margin-left: -3em;
       white-space: nowrap; }
       footer #block-productions ul li a {
         pointer-events: all;
@@ -1659,6 +1745,7 @@ footer {
     body.path-productions footer .block-block-edlp-entrees {
       display: none; }
     footer .block-block-edlp-entrees ul {
+      margin: 0;
       white-space: nowrap; }
       footer .block-block-edlp-entrees ul li {
         display: inline-block;
@@ -1813,6 +1900,17 @@ footer {
         footer .block-block-edlp-entrees ul li.opened .entree-content {
           width: 350px;
           opacity: 1; }
+  footer #block-studiolinkblock {
+    pointer-events: all; }
+    footer #block-studiolinkblock a {
+      display: block;
+      width: 20px;
+      height: 20px;
+      background-image: url(../img/studio.svg);
+      background-size: contain;
+      text-indent: 40px;
+      margin: 0;
+      overflow: hidden; }
   footer #block-userlogin {
     pointer-events: all;
     position: relative;
@@ -1837,6 +1935,8 @@ footer {
       padding: 0.5em;
       padding-bottom: 20px;
       background-color: rgba(255, 255, 255, 0.95);
+      border-top: 1px solid red;
+      border-bottom: 1px solid red;
       overflow: hidden;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
diff --git a/sites/all/themes/custom/edlptheme/assets/scripts/main.js b/sites/all/themes/custom/edlptheme/assets/scripts/main.js
index 7eca5fce0..a0116fde1 100644
--- a/sites/all/themes/custom/edlptheme/assets/scripts/main.js
+++ b/sites/all/themes/custom/edlptheme/assets/scripts/main.js
@@ -5,7 +5,7 @@
     var _$body = $('body');
     var _is_front = _$body.is('.path-frontpage');
     var _$corpus_canvas;
-    var _$content_container = $('.layout-container>main>.layout-content');
+    var _$content_container = $('main[role="main"]>.layout-content');
     var _$ajaxLinks;
 
     function init(){
@@ -94,6 +94,7 @@
         // TODO: previous and next btns
       },
       openDocument(node){
+        console.log('AudioPlayer openDocument', node);
         this.setSRC(node.audio_url);
         this.loadNode(node.nid);
       },
@@ -106,13 +107,13 @@
       },
       onNodeLoaded(data){
         console.log('AudioPlayer node loaded', data);
-        this.$cartel.html(data.rendered);
-        this.$cartel.removeClass('loading');
+        this.$cartel.html(data.rendered).removeClass('loading');
         _$body.trigger({'type':'new-audio-cartel-loaded'});
         initAjaxLinks();
       },
       onNodeLoadFail(jqxhr, textStatus, error){
         console.warn('AudioPlayer node load failed', jqxhr.responseText);
+        this.$cartel.removeClass('loading').html('');
       },
       // audio functions
       setSRC(url){
diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss
index 8f90b27de..aadf1a06f 100644
--- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss
+++ b/sites/all/themes/custom/edlptheme/assets/styles/app.scss
@@ -49,9 +49,9 @@
 }
 
 
-.layout-container{
-  pointer-events: none;
-}
+// .layout-container{
+//   pointer-events: none;
+// }
 
 
 //  _                _
@@ -59,12 +59,8 @@
 // | ' \/ -_) _` / _` / -_) '_|
 // |_||_\___\__,_\__,_\___|_|
 header[role="banner"]{
-  position: relative;
-  padding:0 0 0.5em 0;
-  border-bottom: 1px solid red;
   pointer-events: all;
   // TODO: what header height to fit well with player ??
-  height:70px;
 }
 
 #block-edlptheme-branding{
@@ -430,6 +426,47 @@ main[role="main"]{
   }
 }
 
+.row .col .studio-ui-wrapper{
+  height: 100%;
+}
+#studio-ui{
+  height:100%;
+  .chutier_ui{
+    height: 50%;
+    border-bottom: 1px solid red;
+    &>h2{
+      margin:0.5em 0;
+      font-size: 1em;
+      font-weight: 500;
+      text-transform: uppercase;
+    }
+    .documents{
+      ul,li{
+        margin:0; padding:0;
+        line-height: 1.2;
+      }
+      li{
+        display: inline-block; vertical-align: top;
+        width:49%; margin-bottom: 0.5em;
+        .entrees{
+          line-height: 0;
+          display:inline-block;
+          span{
+            @include entrie-micro-square;
+          }
+        }
+        a{
+          text-transform: capitalize;
+          font-size: 1em;
+        }
+      }
+
+    }
+  }
+  .composition_ui{
+    height:50%;
+  }
+}
 
  //    _    _            _  _         _
  //   /_\  (_)__ ___ __ | \| |___  __| |___
@@ -561,22 +598,45 @@ body.path-productions{
 }
 
 footer{
+  position: relative;
   pointer-events: none;
   // outline: 1px dotted blue;
-  // text-align: center;
-  display: table;
-  padding: 0 0 0.5em 0;
 
-  >.region{
-    display: table-cell;
+  >.wrapper{
     white-space: nowrap;
-    // pointer-events: none;
-    // outline: 1px dotted purple;
-    // position: relative;
+
+    >.region{
+      // display: table-cell;
+      display: inline-block;
+      vertical-align: baseline;
+      white-space:normal;
+
+      // pointer-events: none;
+      // outline: 1px dotted purple;
+      // position: relative;
+      >*{
+        display: inline-block; vertical-align: bottom;
+      }
+    }
+    .region-footer-left{
+      // float:left;
+      width:12%;
+      // min-width:50px;
+      text-align: left;
+    }
+    .region-footer-center{
+      // float: none;
+      width: 72%;
+      overflow:hidden;
+      text-align: center;
+    }
+    .region-footer-right{
+      // float:right;
+      width:12%;
+      // min-width: 50px;
+      text-align: right;
+    }
   }
-  .region-footer-left{text-align: left;}
-  .region-footer-center{text-align: center;}
-  .region-footer-right{text-align: right;min-width: 30px;}
 
   nav.block-menu{
     display: inline-block;
@@ -586,6 +646,9 @@ footer{
       li{
         pointer-events: all;
         @include oblique-list;
+        &:first-of-type{
+          margin-left: 1em;
+        }
       }
     }
   }
@@ -630,6 +693,7 @@ footer{
     body:not(.path-productions) & {display:none}
 
     ul{
+      margin-left: -3em;
       white-space: nowrap;
       li{
         a{
@@ -663,6 +727,7 @@ footer{
     display: inline-block;
     // vertical-align: top;
     ul{
+      margin:0;
       white-space: nowrap;
       li{
         @include oblique-list;
@@ -834,10 +899,28 @@ footer{
     }
   }
 
+  $icons_w:20px;
+  #block-studiolinkblock{
+    pointer-events: all;
+    a{
+      $wh:$icons_w;
+      display: block;
+      width:$wh; height:$wh;
+      background-image: url(../img/studio.svg);
+      background-size: contain;
+      text-indent: $wh*2;
+      margin: 0;
+      overflow: hidden;
+    }
+  }
+  // #block-fancylogin{
+  //   pointer-events: all;
+  //
+  // }
   #block-userlogin{
     pointer-events: all;
     // outline: 1px solid blue;
-    $wh:20px;
+    $wh:$icons_w;
     position: relative;
     width:$wh; height: $wh;
     // background-color: blue;
@@ -860,6 +943,8 @@ footer{
       padding:0.5em;
       padding-bottom: 20px;
       background-color: $transparent-bg;
+      border-top: 1px solid red;
+      border-bottom: 1px solid red;
       overflow: hidden;
       box-sizing:border-box;
       height: 0px;
diff --git a/sites/all/themes/custom/edlptheme/assets/styles/base/_layout.scss b/sites/all/themes/custom/edlptheme/assets/styles/base/_layout.scss
index e9aa94aa4..f3d4c43c8 100644
--- a/sites/all/themes/custom/edlptheme/assets/styles/base/_layout.scss
+++ b/sites/all/themes/custom/edlptheme/assets/styles/base/_layout.scss
@@ -10,22 +10,30 @@ body, html{
   // background-color: rgb(219, 219, 219);
 }
 
-div.layout-container{
-  position: relative;
-  width:100%; height:100%;
-  padding:0.5em 1em;
-  box-sizing: border-box;
-  z-index: 1;
-}
+// div.layout-container{
+//   position: relative;
+//   width:100%; height:100%;
+//   padding:0.5em 1em;
+//   box-sizing: border-box;
+//   z-index: 1;
+// }
 
 header[role="banner"]{
   // outline: 1px solid blue;
+  z-index: 1;
+  position: relative;
+  padding:0.5em 1em;
+  >.wrapper{
+    border-bottom: 1px solid red;
+    // TODO: what header height to fit well with player ??
+    height:70px;
+  }
 }
 
 
 main[role="main"]{
   // outline:1px solid green;
-  // display: none;
+  z-index: 1;
   pointer-events: none;
   position: absolute;
   left:0; top:0;
@@ -36,17 +44,24 @@ main[role="main"]{
   .layout-content{
     width: 100%; height:100%;
     overflow:hidden;
-  }
-  .layout-content>*{
-    pointer-events: auto;
+    &>.messages{
+      max-height: 500px;
+      overflow: auto;
+    }
+    &>*{
+      pointer-events: auto;
+    }
   }
 }
 
 footer[role="contentinfo"]{
   // outline: 1px solid pink;
-  position: fixed;
+  z-index: 1;
+  position:fixed;
   bottom:0;
+  box-sizing: content-box;
   width:100%;
+  padding:0.5em 1em;
 }
 
 canvas#corpus-map{
diff --git a/sites/all/themes/custom/edlptheme/templates/content/edlp-studio-ui.html.twig b/sites/all/themes/custom/edlptheme/templates/content/edlp-studio-ui.html.twig
new file mode 100644
index 000000000..04c4853fa
--- /dev/null
+++ b/sites/all/themes/custom/edlptheme/templates/content/edlp-studio-ui.html.twig
@@ -0,0 +1,10 @@
+<div class="row">
+  <div class="col small-col-12 med-col-6 large-col-6">
+    <div class="wrapper studio-ui-wrapper">
+      <div id="studio-ui">
+        {{ chutier_ui }}
+        {{ composition_ui }}
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/sites/all/themes/custom/edlptheme/templates/layout/page.html.twig b/sites/all/themes/custom/edlptheme/templates/layout/page.html.twig
index c32bbacd5..f2af4b88f 100644
--- a/sites/all/themes/custom/edlptheme/templates/layout/page.html.twig
+++ b/sites/all/themes/custom/edlptheme/templates/layout/page.html.twig
@@ -42,10 +42,12 @@
  * @see html.html.twig
  */
 #}
-<div class="layout-container">
+{# <div class="layout-container"> #}
 
   <header role="banner">
-    {{ page.header }}
+    <div class="wrapper">
+      {{ page.header }}
+    </div>
   </header>
 
   <main role="main">
@@ -56,10 +58,12 @@
 
   {% if page.footer_left or page.footer_center or page.footer_right %}
     <footer role="contentinfo">
+      <div class="wrapper">
         {{ page.footer_left }}
         {{ page.footer_center }}
         {{ page.footer_right }}
+      </div>
     </footer>
   {% endif %}
 
-</div>{# /.layout-container #}
+{#</div> /.layout-container #}
diff --git a/sites/default/config/sync/block.block.studiolinkblock.yml b/sites/default/config/sync/block.block.studiolinkblock.yml
new file mode 100644
index 000000000..d063c1082
--- /dev/null
+++ b/sites/default/config/sync/block.block.studiolinkblock.yml
@@ -0,0 +1,20 @@
+uuid: a6822428-a78b-46c3-bf0f-ee0d28ac94a0
+langcode: fr
+status: true
+dependencies:
+  module:
+    - edlp_studio
+  theme:
+    - edlptheme
+id: studiolinkblock
+theme: edlptheme
+region: footer_right
+weight: 0
+provider: null
+plugin: edlp_studio_link_block
+settings:
+  id: edlp_studio_link_block
+  label: 'Studio link block'
+  provider: edlp_studio
+  label_display: '0'
+visibility: {  }
diff --git a/sites/default/config/sync/core.entity_view_display.node.enregistrement.chutier.yml b/sites/default/config/sync/core.entity_view_display.node.enregistrement.chutier.yml
new file mode 100644
index 000000000..f47591a6a
--- /dev/null
+++ b/sites/default/config/sync/core.entity_view_display.node.enregistrement.chutier.yml
@@ -0,0 +1,52 @@
+uuid: 0a0a3fc0-62be-4561-af3c-d8babe3a2dc2
+langcode: fr
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.node.chutier
+    - field.field.node.enregistrement.body
+    - field.field.node.enregistrement.field_collectionneurs
+    - field.field.node.enregistrement.field_description
+    - field.field.node.enregistrement.field_entrees
+    - field.field.node.enregistrement.field_genres
+    - field.field.node.enregistrement.field_langues
+    - field.field.node.enregistrement.field_locuteurs
+    - field.field.node.enregistrement.field_son
+    - field.field.node.enregistrement.field_transcript_trad
+    - field.field.node.enregistrement.field_transcript_vo
+    - field.field.node.enregistrement.field_workflow
+    - node.type.enregistrement
+  module:
+    - user
+id: node.enregistrement.chutier
+targetEntityType: node
+bundle: enregistrement
+mode: chutier
+content:
+  content_moderation_control:
+    weight: -20
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  field_entrees:
+    type: entity_reference_label
+    weight: 0
+    region: content
+    label: hidden
+    settings:
+      link: false
+    third_party_settings: {  }
+hidden:
+  body: true
+  chutier_actions: true
+  field_collectionneurs: true
+  field_description: true
+  field_genres: true
+  field_langues: true
+  field_locuteurs: true
+  field_son: true
+  field_transcript_trad: true
+  field_transcript_vo: true
+  field_workflow: true
+  langcode: true
+  links: true
diff --git a/sites/default/config/sync/core.entity_view_display.node.enregistrement.default.yml b/sites/default/config/sync/core.entity_view_display.node.enregistrement.default.yml
index 6ab3800ad..50127a85b 100644
--- a/sites/default/config/sync/core.entity_view_display.node.enregistrement.default.yml
+++ b/sites/default/config/sync/core.entity_view_display.node.enregistrement.default.yml
@@ -129,4 +129,5 @@ content:
     settings: {  }
     third_party_settings: {  }
 hidden:
+  chutier_actions: true
   langcode: true
diff --git a/sites/default/config/sync/core.entity_view_mode.node.chutier.yml b/sites/default/config/sync/core.entity_view_mode.node.chutier.yml
new file mode 100644
index 000000000..b36b30ad3
--- /dev/null
+++ b/sites/default/config/sync/core.entity_view_mode.node.chutier.yml
@@ -0,0 +1,10 @@
+uuid: 5cb0787b-89fe-49dd-a755-ef9ec2bcde4d
+langcode: fr
+status: true
+dependencies:
+  module:
+    - node
+id: node.chutier
+label: 'Chutier (Document)'
+targetEntityType: node
+cache: true