Прослушивание записи звонка в коробочной версии Битрикс24

Инструкция по созданию и использованию решения “Прослушивание записи звонка в Битрикс24” и ссылка на скачивание в карточке элемента в Таймлайне.

Было

Стало

Важно:

• Адрес получения записей должен быть доступен пользователям CRM с их машин.

• Для корректной загрузки записи в плеере, необходимо обеспечить доступ по HTTPS с рабочим сертификатом (большинство браузеров не разрешают смешанный контент).

1. В файл /local/php_interface/init.php добавляем код, с помощью которого подключается js библиотека:

"OnEpilogHandlerMain"));
AddEventHandler("main", "OnEpilog", Array("AudioChangeSymbols", "OnEpilogHandlerMain"));
class AudioChangeSymbols
{
    static function OnEpilogHandlerMain()
    {
        $main = array(
            'mainScript' => array(
                'js' => '/local/js/custom/audio.js',
            ),
        );


        foreach($main as $ext => $arext){
            CJSCore::RegisterExt($ext, $arext);
        }


        CUtil::InitJSCore(array('mainScript'));
    }
}

1. Создаем файл /local/js/custom/audio.js со следующим содержимым:

BX.ready(function(){
  let elements = [
    'div.crm-entity-stream-content-detail-description',
    'div.crm-timeline__editable-text_content',
  ];
  let arDeleteStr = [
    'Download',
    '\n',
  ];
  let express = /\/crm\/\w+\/details\/\d+/;
  let url_cur = document.location.pathname;


  if(url_cur.match(express)) {
    BX.addCustomEvent('onAjaxSuccess', function() {
      let span_audio = '';
      let tag = '';
      for (let i = 0; i <= elements.length - 1; i++) {
        if (document.querySelector(elements[i]) !== null) {
          tag = elements[i];
        }
      }


      if (tag !='') {
        span_audio = document.querySelectorAll(tag);
        let res = '';
        let expr = '';
        for (let elem of span_audio) {
          if (elem.querySelector('audio') === null) {
            res = elem.textContent;
            if (res.includes('http') && res.includes('get_conversation_recording')) {
              expr = /(http[^"]+\/get_conversation_recording\?[^"\/…]+)(…| |")/gm;
              let ar = res.split(expr);


              for (let i = 0; i <= arDeleteStr.length - 1; i++) {
                if (ar[1].includes(arDeleteStr[i]) ) {
                  let arTrim = ar[1].split(arDeleteStr[i]);
                  ar[1] = arTrim[0];
                }
              }


              let html = '';
              if (ar[0] != '' && !res.includes('audio')) {
                html = '<span>' + ar[0] + '</span><br>';
              }


              res = ar[1];
              html += '<audio controls src=' + res + '></audio><br><a href=' + res + '>Скачать запись</a>';
              elem.innerHTML = html;
            }
          }
        }
      } else {
        console.log('Такого элемента на странице не существует');
      }
    });
  }
})

1. В файле /local/js/custom/audio.js во второй строке определен массив elements с css селекторами элементов HTML страницы, в которых содержатся ссылки на запись звонков. Желательно, чтобы это был тег div. Если на портале используется другой класс или элемент, то необходимо в массив elements добавить нужный селектор. div. указывать обязательно!

На новой версии портала взяли тег div.crm-timeline__editable-text_content:

На старой версии портала это тег div.crm-entity-stream-content-detail-description.