Merge branch '1.11.x' of https://github.com/chamilo/chamilo-lms into 1.11.x

main/document/webcam_clip.php

@@ -9,40 +9,41 @@ use ChamiloSession as Session;
  * @package chamilo.document
  *
  * @author  Juan Carlos Raña Trabado herodoto@telefonica.net
- *
  * @since   7/jun/2012
  * @Updated 04/09/2015 Upgrade to WebCamJS
  */
 require_once __DIR__.'/../inc/global.inc.php';
 
+$_SESSION['whereami'] = 'document/webcamclip';
 $this_section = SECTION_COURSES;
 $nameTools = get_lang('WebCamClip');
+$htmlHeadXtra[] = api_get_js_simple(api_get_path(WEB_PATH).'web/assets/webcamjs/webcam.js');
+$htmlHeadXtra[] = api_get_js('webcam_recorder.js');
 $groupRights = Session::read('group_member_with_upload_rights');
 
 api_protect_course_script();
 api_block_anonymous_users();
 
-$document_data = DocumentManager::get_document_data_by_id(
-    $_GET['id'],
-    api_get_course_id(),
-    true
-);
-if (empty($document_data)) {
+$userId = api_get_user_id();
+$courseCode = api_get_course_id();
+$groupId = api_get_group_id();
+$sessionId = api_get_session_id();
+
+$documentData = DocumentManager::get_document_data_by_id($_GET['id'], $courseCode, true);
+
+if (empty($documentData)) {
     if (api_is_in_group()) {
-        $group_properties = GroupManager::get_group_properties(api_get_group_id());
-        $document_id = DocumentManager::get_document_id(
+        $groupProperties = GroupManager::get_group_properties($groupId);
+        $documentId = DocumentManager::get_document_id(
             api_get_course_info(),
-            $group_properties['directory']
-        );
-        $document_data = DocumentManager::get_document_data_by_id(
-            $document_id,
-            api_get_course_id()
+            $groupProperties['directory']
         );
+        $documentData = DocumentManager::get_document_data_by_id($documentId, $courseCode);
     }
 }
 
-$document_id = $document_data['id'];
-$dir = $document_data['path'];
+$documentId = $documentData['id'];
+$dir = $documentData['path'];
 
 //make some vars
 $webcamdir = $dir;
@@ -50,7 +51,7 @@ if ($webcamdir == "/") {
     $webcamdir = '';
 }
 
-$is_allowed_to_edit = api_is_allowed_to_edit(null, true);
+$isAllowedToEdit = api_is_allowed_to_edit(null, true);
 
 // Please, do not modify this dirname formatting
 if (strstr($dir, '..')) {
@@ -76,13 +77,12 @@ if (!is_dir($filepath)) {
     $dir = '/';
 }
 
-$groupId = api_get_group_id();
-
 if (!empty($groupId)) {
     $interbreadcrumb[] = [
         "url" => "../group/group_space.php?".api_get_cidreq(),
         "name" => get_lang('GroupSpace'),
     ];
+    $noPHP_SELF = true;
     $group = GroupManager::get_group_properties($groupId);
     $path = explode('/', $dir);
     if ('/'.$path[1] != $group['directory']) {
@@ -91,7 +91,7 @@ if (!empty($groupId)) {
 }
 
 $interbreadcrumb[] = [
-    "url" => "./document.php?id=".$document_id."&".api_get_cidreq(),
+    "url" => "./document.php?id=".$documentId."&".api_get_cidreq(),
     "name" => get_lang('Documents'),
 ];
 
@@ -99,186 +99,66 @@ if (!api_is_allowed_in_course()) {
     api_not_allowed(true);
 }
 
-if (!($is_allowed_to_edit || $groupRights ||
-    DocumentManager::is_my_shared_folder(api_get_user_id(), Security::remove_XSS($dir), api_get_session_id()))) {
+$isMySharedFolder = DocumentManager::is_my_shared_folder($userId, Security::remove_XSS($dir), $sessionId);
+
+if (!($isAllowedToEdit || $groupRights || $isMySharedFolder)) {
     api_not_allowed(true);
 }
 
 /*	Header */
 Event::event_access_tool(TOOL_DOCUMENT);
 
-$display_dir = $dir;
+$displayDir = $dir;
 if (isset($group)) {
-    $display_dir = explode('/', $dir);
-    unset($display_dir[0]);
-    unset($display_dir[1]);
-    $display_dir = implode('/', $display_dir);
+    $displayDir = explode('/', $dir);
+    unset($displayDir[0]);
+    unset($displayDir[1]);
+    $displayDir = implode('/', $displayDir);
 }
 
 // Interbreadcrumb for the current directory root path
 $counter = 0;
-if (isset($document_data['parents'])) {
-    foreach ($document_data['parents'] as $document_sub_data) {
+if (isset($documentData['parents'])) {
+    foreach ($documentData['parents'] as $documentSubData) {
         //fixing double group folder in breadcrumb
-        if (api_get_group_id()) {
+        if ($groupId) {
             if ($counter == 0) {
                 $counter++;
                 continue;
             }
         }
         $interbreadcrumb[] = [
-            'url' => $document_sub_data['document_url'],
-            'name' => $document_sub_data['title'],
+            'url' => $documentSubData['document_url'],
+            'name' => $documentSubData['title'],
         ];
         $counter++;
     }
 }
 
-//make some vars
-$webcamuserid = api_get_user_id();
-
-Display :: display_header($nameTools, 'Doc');
-echo '<div class="actions">';
-echo '<a href="document.php?id='.$document_id.'">'.
+$actions = Display::toolbarAction(
+    'webcam_toolbar',
+    [
+        Display::url(
             Display::return_icon(
                 'back.png',
                 get_lang('BackTo').' '.get_lang('DocumentsOverview'),
-        '',
+                [],
                 ICON_SIZE_MEDIUM
-    )
-    .'</a>';
-echo '</div>';
-?>
-
-<div align="center">
-    <h2><?php echo get_lang('TakeYourPhotos'); ?></h2>
-</div>
-<div align="center">
-<table><tr><td valign='top' align='center'>
-<h3 align='center'><?php echo get_lang('LocalInputImage'); ?></h3>
-    <!-- Including New Lib WebCamJS upgrading from JPEGCam -->
-    <script type="text/javascript" src="<?php echo api_get_path(WEB_PUBLIC_PATH); ?>assets/webcamjs/webcam.js"></script>
-    <!-- Adding a div container for the new live camera with some cool style options-->
-    <div class="webcamclip_bg">
-        <div id="chamilo-camera"></div>
-    </div>
-    <!-- Configure a few settings and attach the camera to the div container -->
-    <script>
-        Webcam.set({
-            width: 320,
-            height: 240,
-            image_format: 'jpeg',
-            jpeg_quality: 90
-        });
-        Webcam.attach( '#chamilo-camera' );
-        //This line Fix a minor bug that made a conflict with a videochat feature in another module file
-        $('video').addClass('skip');
-    </script>
-    <!-- Using now Jquery to do the webcamJS Functions and handle the server response (see webcam_receiver.php now in webcamJS directory) -->
-    <script>
-        $(document).ready(function() {
-           $('#btnCapture').click(function() {
-               Webcam.freeze();
-               return false;
-           });
-
-           $('#btnClean').click(function() {
-               Webcam.unfreeze();
-               return false;
-           });
-
-           $('#btnSave').click(function() {
-               snap();
-               return false;
-           });
-
-           $('#btnAuto').click(function() {
-               start_video();
-               return false;
-           });
-
-           $('#btnStop').click(function() {
-               stop_video();
-               return false;
-           });
-        });
-
-        function snap() {
-            Webcam.snap( function(data_uri) {
-                  var clip_filename='video_clip.jpg';
-                  var url = 'webcam_receiver.php?webcamname='+escape(clip_filename)+'&webcamdir=<?php echo $webcamdir; ?>&webcamuserid=<?php echo $webcamuserid; ?>';
-                  Webcam.upload(data_uri, url, function(code, response){
-                      $('#upload_results').html(
-                          '<h3>'+response+'</h3>' +
-                          '<div>'+
-                          '<img src="' + data_uri + '" class="webcamclip_bg">' +
-                          '</div>'+
-                          '</div>'+
-                          '<p hidden="true">'+code+'</p>'
+            ),
+            'document.php?id='.$documentId.'&'.api_get_cidreq()
+        ),
+    ]
 );
-                  });
-              });
-        }
-        var interval=null;
-        var timeout=null;
-        var counter=0;
-        var fps=1000;//one frame per second
-        var maxclip=25;//maximum number of clips
-        var maxtime=60000;//stop after one minute
 
-        function stop_video() {
-            interval=window.clearInterval(interval);
-            return false;
-        }
+$template = new Template($nameTools);
+$template->assign('webcam_dir', $webcamdir);
+$template->assign('user_id', $userId);
+$template->assign('filename', 'video_clip.jpg');
 
-        function start_video() {
-            interval=window.setInterval("clip_send_video()",fps);
-        }
-
-        function clip_send_video() {
-           counter++;
-           timeout=setTimeout('stop_video()',maxtime);
-           if(maxclip>=counter){
-               snap();// clip and upload
-           }
-           else {
-               interval=window.clearInterval(interval);
-           }
-        }
-    </script>
-    </td><td width=50></td><td valign='top' align='center'>
-        <div id="upload_results" style="background-color:#ffffff;"></div>
-    </td></tr></table>
-    <!-- Implementing Button html5 Tags instead Inputs and some cool bootstrap button styles -->
-    <div>
-        <br/>
-            <form>
-                <br/>
-                <button id="btnCapture" class="btn btn-danger">
-                <em class="fa fa-camera"></em>
-                <?php echo get_lang('Snapshot'); ?>
-                </button>
-                <button id="btnClean" class="btn btn-success">
-                <em class="fa fa-refresh"></em>
-                <?php echo get_lang('Clean'); ?>
-                </button>
-                <button id="btnSave" class="btn btn-primary">
-                <em class="fa fa-save"></em>
-                <?php echo get_lang('Save'); ?>
-                </button>
-                &nbsp;&nbsp;||&nbsp;&nbsp;
-                <button id="btnAuto" class="btn btn-default">
-                <?php echo get_lang('Auto'); ?>
-                </button>
-                <button id="btnStop" class="btn btn-default">
-                <?php echo get_lang('Stop'); ?>
-                </button>
-                <br/>
-            </form>
-        <br/>
-   </div>
-</div>
-
-<?php
+$layout = $template->get_template('document/webcam.tpl');
+$content = $template->fetch($layout);
 
-Display :: display_footer();
+$template->assign('header', get_lang('TakeYourPhotos'));
+$template->assign('actions', $actions);
+$template->assign('content', $content);
+$template->display_one_col_template();

main/inc/lib/javascript/webcam_recorder.js

@@ -0,0 +1,107 @@
+(function () {
+    var config = {
+        selectors: {
+            btnFreeze: '#btnCapture',
+            btnUnFreeze: '#btnClean',
+            btnSave: '#btnSave',
+            btnAuto: '#btnAuto',
+            btnStop: '#btnStop',
+            camera: '#chamilo-camera',
+            results: '#upload_results'
+        },
+        urlReceiver: '',
+        video: {
+            fps: 1000,
+            maxTime: 60000,
+            maxClip: 25
+        }
+    };
+
+    function snap() {
+        Webcam.snap(function (dataUri) {
+            Webcam.upload(dataUri, config.urlReceiver, function (code, response) {
+                $(config.selectors.results).html(
+                    '<h3>' + response + '</h3>'
+                    + '<div>'
+                    + '<img src="' + dataUri + '" class="webcamclip_bg">'
+                    + '</div>'
+                );
+            });
+        });
+    };
+
+    var videoInterval = 0;
+
+    function startVideo() {
+        var counter = 0;
+        videoInterval = window.setInterval(function () {
+            counter++;
+
+            window.setTimeout(function () {
+                stopVideo();
+            }, config.video.maxTime);
+
+            if (config.video.maxClip >= counter) {
+                snap();
+            } else {
+                stopVideo();
+            }
+        }, config.video.fps);
+    }
+
+    function stopVideo() {
+        if (!videoInterval) {
+            return;
+        }
+
+        window.clearTimeout(videoInterval);
+    }
+
+    window.RecordWebcam = {
+        init: function (params) {
+            config = $.extend(true, config, params);
+
+            $(document).on('ready', function () {
+                Webcam.set({
+                    width: 320,
+                    height: 240,
+                    image_format: 'jpeg',
+                    jpeg_quality: 90
+                });
+                Webcam.attach(config.selectors.camera);
+
+                $('video').addClass('skip');
+
+                $(config.selectors.btnFreeze).on('click', function (e) {
+                    e.preventDefault();
+
+                    Webcam.freeze();
+                });
+
+                $(config.selectors.btnUnFreeze).on('click', function (e) {
+                    e.preventDefault();
+
+                    Webcam.unfreeze();
+                });
+
+                $(config.selectors.btnSave).on('click', function (e) {
+                    e.preventDefault();
+
+                    snap();
+                })
+
+                $(config.selectors.btnAuto).on('click', function (e) {
+                    e.preventDefault();
+
+                    startVideo();
+                });
+
+                $(config.selectors.btnStop).on('click', function (e) {
+                    e.preventDefault();
+
+                    stopVideo();
+                });
+            })
+        }
+    };
+})();

main/template/default/document/webcam.tpl

@@ -0,0 +1,42 @@
+<div class="row">
+    <div class="col-sm-6 text-center">
+        <h3>{{ 'LocalInputImage'|get_lang }}</h3>
+        <div class="webcamclip_bg center-block">
+            <div id="chamilo-camera" class="embed-responsive-item"></div>
+        </div>
+        <form class="text-center">
+            <br/>
+            <button id="btnCapture" class="btn btn-danger">
+                <span class="fa fa-camera" aria-hidden="true"></span>
+                {{ 'Snapshot'|get_lang }}
+            </button>
+            <button id="btnClean" class="btn btn-success">
+                <span class="fa fa-refresh" aria-hidden="true"></span>
+                {{ 'Clean'|get_lang }}
+            </button>
+            <button id="btnSave" class="btn btn-primary">
+                <span class="fa fa-save" aria-hidden="true"></span>
+                {{ 'Save'|get_lang }}
+            </button>
+            &nbsp;&nbsp;||&nbsp;&nbsp;
+            <button id="btnAuto" class="btn btn-default">
+                {{ 'Auto'|get_lang }}
+            </button>
+            <button id="btnStop" class="btn btn-default">
+                {{ 'Stop'|get_lang }}
+            </button>
+        </form>
+    </div>
+    <div class="col-sm-6">
+        <div id="upload_results" class="center-block" style="background-color:#ffffff;"></div>
+    </div>
+</div>
+<script>
+    RecordWebcam.init({
+        urlReceiver: '{{ _p.web_main }}document/webcam_receiver.php?webcamname='
+            + escape('{{ filename }}') + '&webcamdir={{ webcam_dir }}&webcamuserid={{ user_id }}',
+        video: {
+            maxClip: 10
+        }
+    });
+</script>