Browse Source

publish muk_web_preview_audio - 11.0

pull/78/head
MuK IT GmbH 6 years ago
parent
commit
6745da30dc
  1. 111
      muk_web_preview_audio/README.rst
  2. 2
      muk_web_preview_audio/__manifest__.py
  3. 15
      muk_web_preview_audio/i18n/de.po
  4. 24
      muk_web_preview_audio/i18n/es.po
  5. 24
      muk_web_preview_audio/i18n/fr.po
  6. 8
      muk_web_preview_audio/i18n/muk_web_preview_audio.pot
  7. 24
      muk_web_preview_audio/i18n/nl.po
  8. 112
      muk_web_preview_audio/static/description/index.html
  9. BIN
      muk_web_preview_audio/static/description/preview.png
  10. BIN
      muk_web_preview_audio/static/description/service_customization.png
  11. BIN
      muk_web_preview_audio/static/description/service_development.png
  12. BIN
      muk_web_preview_audio/static/description/service_implementation.png
  13. BIN
      muk_web_preview_audio/static/description/service_integration.png
  14. BIN
      muk_web_preview_audio/static/description/service_support.png
  15. 112
      muk_web_preview_audio/static/lib/visualizer/visualizer.js
  16. 75
      muk_web_preview_audio/static/src/js/audio.js
  17. 40
      muk_web_preview_audio/static/src/js/preview_generator.js
  18. 66
      muk_web_preview_audio/static/src/js/preview_handler.js
  19. 19
      muk_web_preview_audio/static/src/scss/audio.scss
  20. 12
      muk_web_preview_audio/static/src/xml/audio.xml
  21. 5
      muk_web_preview_audio/template/assets.xml

111
muk_web_preview_audio/README.rst

@ -0,0 +1,111 @@
=================
MuK Preview Audio
=================
Extendes the Preview Dialog to support audio files. Currently the following audio extensions
are supported:
* Wav (\*.wav, audio/wav)
* Ogg Theora Vorbis (\*.ogg, audio/ogg)
* MP3 (\*.mp3, audio/mpeg)
Installation
============
To install this module, you need to:
Download the module and add it to your Odoo addons folder. Afterward, log on to
your Odoo server and go to the Apps menu. Trigger the debug mode and update the
list by clicking on the "Update Apps List" link. Now install the module by
clicking on the install button.
Another way to install this module is via the package management for Python
(`PyPI <https://pypi.org/project/pip/>`_).
To install our modules using the package manager make sure
`odoo-autodiscover <https://pypi.org/project/odoo-autodiscover/>`_ is installed
correctly. Then open a console and install the module by entering the following
command:
``pip install --extra-index-url https://nexus.mukit.at/repository/odoo/simple <module>``
The module name consists of the Odoo version and the module name, where
underscores are replaced by a dash.
**Module:**
``odoo<version>-addon-<module_name>``
**Example:**
``sudo -H pip3 install --extra-index-url https://nexus.mukit.at/repository/odoo/simple odoo11-addon-muk-utils``
Once the installation has been successfully completed, the app is already in the
correct folder. Log on to your Odoo server and go to the Apps menu. Trigger the
debug mode and update the list by clicking on the "Update Apps List" link. Now
install the module by clicking on the install button.
The biggest advantage of this variant is that you can now also update the app
using the "pip" command. To do this, enter the following command in your console:
``pip install --upgrade --extra-index-url https://nexus.mukit.at/repository/odoo/simple <module>``
When the process is finished, restart your server and update the application in
Odoo. The steps are the same as for the installation only the button has changed
from "Install" to "Upgrade".
You can also view available Apps directly in our `repository <https://nexus.mukit.at/#browse/browse:odoo>`_
and find a more detailed installation guide on our `website <https://mukit.at/page/open-source>`_.
For modules licensed under OPL-1, you will receive access data when you purchase
the module. If the modules were not purchased directly from
`MuK IT <https://www.mukit.at/>`_ please contact our support (support@mukit.at)
with a confirmation of purchase to receive the corresponding access data.
Upgrade
============
To upgrade this module, you need to:
Download the module and add it to your Odoo addons folder. Restart the server
and log on to your Odoo server. Select the Apps menu and upgrade the module by
clicking on the upgrade button.
If you installed the module using the "pip" command, you can also update the
module in the same way. Just type the following command into the console:
``pip install --upgrade --extra-index-url https://nexus.mukit.at/repository/odoo/simple <module>``
When the process is finished, restart your server and update the application in
Odoo, just like you would normally.
Configuration
=============
No additional configuration is needed to use this module.
Usage
=============
Go to a binary that contains an audio file and open the preview dialog to view
the preview.
Credits
=======
Contributors
------------
* Mathias Markl <mathias.markl@mukit.at>
Author & Maintainer
-------------------
This module is maintained by the `MuK IT GmbH <https://www.mukit.at/>`_.
MuK IT is an Austrian company specialized in customizing and extending Odoo.
We develop custom solutions for your individual needs to help you focus on
your strength and expertise to grow your business.
If you want to get in touch please contact us via mail
(sale@mukit.at) or visit our website (https://mukit.at).

2
muk_web_preview_audio/__manifest__.py

@ -20,7 +20,7 @@
{ {
"name": "MuK Preview Audio", "name": "MuK Preview Audio",
"summary": """Audio Preview""", "summary": """Audio Preview""",
"version": "11.0.2.0.1",
"version": "12.0.2.0.1",
"category": "Extra Tools", "category": "Extra Tools",
"license": "AGPL-3", "license": "AGPL-3",
"website": "http://www.mukit.at", "website": "http://www.mukit.at",

15
muk_web_preview_audio/i18n/de.po

@ -4,22 +4,21 @@
# #
msgid "" msgid ""
msgstr "" msgstr ""
"Project-Id-Version: Odoo Server 11.0\n"
"Project-Id-Version: Odoo Server 12.0-20190128\n"
"Report-Msgid-Bugs-To: \n" "Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2018-01-19 00:57+0000\n"
"PO-Revision-Date: 2018-01-19 01:58+0100\n"
"POT-Creation-Date: 2019-03-05 18:58+0000\n"
"PO-Revision-Date: 2019-03-05 18:58+0000\n"
"Last-Translator: <>\n" "Last-Translator: <>\n"
"Language-Team: \n" "Language-Team: \n"
"MIME-Version: 1.0\n" "MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n" "Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Content-Transfer-Encoding: \n"
"Plural-Forms: \n" "Plural-Forms: \n"
"Language: de\n"
"X-Generator: Poedit 2.0.5\n"
#. module: muk_web_preview_audio #. module: muk_web_preview_audio
#. openerp-web #. openerp-web
#: code:addons/muk_web_preview_audio/static/src/xml/preview_content.xml:27
#: code:addons/muk_web_preview_audio/static/src/xml/audio.xml:30
#, python-format #, python-format
msgid "Your browser does not support the audio element." msgid "Your browser does not support the audio element."
msgstr "Die Audiodatei wird von Ihrem Browser nicht unterstützt."
msgstr ""

24
muk_web_preview_audio/i18n/es.po

@ -0,0 +1,24 @@
# Translation of Odoo Server.
# This file contains the translation of the following modules:
# * muk_web_preview_audio
#
msgid ""
msgstr ""
"Project-Id-Version: Odoo Server 12.0-20190128\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2019-03-05 18:58+0000\n"
"PO-Revision-Date: 2019-03-05 18:58+0000\n"
"Last-Translator: <>\n"
"Language-Team: \n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: \n"
"Plural-Forms: \n"
#. module: muk_web_preview_audio
#. openerp-web
#: code:addons/muk_web_preview_audio/static/src/xml/audio.xml:30
#, python-format
msgid "Your browser does not support the audio element."
msgstr ""

24
muk_web_preview_audio/i18n/fr.po

@ -0,0 +1,24 @@
# Translation of Odoo Server.
# This file contains the translation of the following modules:
# * muk_web_preview_audio
#
msgid ""
msgstr ""
"Project-Id-Version: Odoo Server 12.0-20190128\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2019-03-05 18:58+0000\n"
"PO-Revision-Date: 2019-03-05 18:58+0000\n"
"Last-Translator: <>\n"
"Language-Team: \n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: \n"
"Plural-Forms: \n"
#. module: muk_web_preview_audio
#. openerp-web
#: code:addons/muk_web_preview_audio/static/src/xml/audio.xml:30
#, python-format
msgid "Your browser does not support the audio element."
msgstr ""

8
muk_web_preview_audio/i18n/muk_web_preview_audio.pot

@ -4,10 +4,10 @@
# #
msgid "" msgid ""
msgstr "" msgstr ""
"Project-Id-Version: Odoo Server 11.0\n"
"Project-Id-Version: Odoo Server 12.0-20190128\n"
"Report-Msgid-Bugs-To: \n" "Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2018-01-19 00:56+0000\n"
"PO-Revision-Date: 2018-01-19 00:56+0000\n"
"POT-Creation-Date: 2019-03-05 18:57+0000\n"
"PO-Revision-Date: 2019-03-05 18:57+0000\n"
"Last-Translator: <>\n" "Last-Translator: <>\n"
"Language-Team: \n" "Language-Team: \n"
"MIME-Version: 1.0\n" "MIME-Version: 1.0\n"
@ -17,7 +17,7 @@ msgstr ""
#. module: muk_web_preview_audio #. module: muk_web_preview_audio
#. openerp-web #. openerp-web
#: code:addons/muk_web_preview_audio/static/src/xml/preview_content.xml:27
#: code:addons/muk_web_preview_audio/static/src/xml/audio.xml:30
#, python-format #, python-format
msgid "Your browser does not support the audio element." msgid "Your browser does not support the audio element."
msgstr "" msgstr ""

24
muk_web_preview_audio/i18n/nl.po

@ -0,0 +1,24 @@
# Translation of Odoo Server.
# This file contains the translation of the following modules:
# * muk_web_preview_audio
#
msgid ""
msgstr ""
"Project-Id-Version: Odoo Server 12.0-20190128\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2019-03-05 18:58+0000\n"
"PO-Revision-Date: 2019-03-05 18:58+0000\n"
"Last-Translator: <>\n"
"Language-Team: \n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: \n"
"Plural-Forms: \n"
#. module: muk_web_preview_audio
#. openerp-web
#: code:addons/muk_web_preview_audio/static/src/xml/audio.xml:30
#, python-format
msgid "Your browser does not support the audio element."
msgstr ""

112
muk_web_preview_audio/static/description/index.html

@ -25,30 +25,87 @@
</div> </div>
</section> </section>
<section class="oe_container oe_dark"
style="margin-bottom: 20px; border-top: 5px solid #797979; border-bottom: 5px solid #797979;">
<h3 class="oe_slogan" style="margin-bottom: 10px;">Demo</h3>
<div class="row" style="margin: auto; max-width: 200px;">
<div class="col-xs-6">
<h5 class="oe_slogan" style="font-size: 20px; margin: 2px;">User:</h5>
<section class="oe_container oe_dark">
<div class="oe_row oe_spaced">
<h3 class="oe_slogan">Our Services</h3>
<div
style="display: flex; padding-top: 20px; justify-content: space-between;">
<div style="flex-basis: 18%;">
<a href="https://mukit.at/r/MQ5" target="_blank">
<div
style="width: 75px; height: 75px; border-radius: 100%; margin: auto;">
<img src="service_implementation.png"
style="width: 100%; border-radius: 100%;">
</div>
<h3 class="oe_slogan"
style="text-align: center; font-size: 14px; width: 100%; margin: 0; margin-top: 14px; color: #000 !important; margin-top: 5px; opacity: 1 !important; line-height: 17px;">
Odoo <br>Implementation
</h3>
</a>
</div>
<div style="flex-basis: 18%;">
<a href="https://mukit.at/r/u7c" target="_blank">
<div
style="width: 75px; height: 75px; border-radius: 100%; margin: auto;">
<img src="service_integration.png"
style="width: 100%; border-radius: 100%;">
</div>
<h3 class="oe_slogan"
style="text-align: center; font-size: 14px; width: 100%; margin: 0; margin-top: 14px; color: #000 !important; margin-top: 5px; opacity: 1 !important; line-height: 17px;">
Odoo <br>Integration
</h3>
</a>
</div>
<div style="flex-basis: 18%;">
<a href="https://mukit.at/r/xDJ" target="_blank">
<div
style="width: 75px; height: 75px; border-radius: 100%; margin: auto;">
<img src="service_customization.png"
style="width: 100%; border-radius: 100%;">
</div>
<h3 class="oe_slogan"
style="text-align: center; font-size: 14px; width: 100%; margin: 0; margin-top: 14px; color: #000 !important; margin-top: 5px; opacity: 1 !important; line-height: 17px;">
Odoo <br>Customization
</h3>
</a>
</div>
<div style="flex-basis: 18%;">
<a href=" https://mukit.at/r/J3A" target="_blank">
<div
style="width: 75px; height: 75px; border-radius: 100%; margin: auto;">
<img src="service_development.png"
style="width: 100%; border-radius: 100%;">
</div> </div>
<div class="col-xs-6">
<h5 class="oe_slogan" style="font-size: 20px; margin: 2px;">apps</h5>
<h3 class="oe_slogan"
style="text-align: center; font-size: 14px; width: 100%; margin: 0; margin-top: 14px; color: #000 !important; margin-top: 5px; opacity: 1 !important; line-height: 17px;">
Odoo <br>Development
</h3>
</a>
</div> </div>
<div class="col-xs-6">
<h5 class="oe_slogan" style="font-size: 20px; margin: 2px;">Password:</h5>
<div style="flex-basis: 18%;">
<a href=" https://mukit.at/r/R1v" target="_blank">
<div
style="width: 75px; height: 75px; border-radius: 100%; margin: auto;">
<img src="service_support.png"
style="width: 100%; border-radius: 100%;">
</div>
<h3 class="oe_slogan"
style="text-align: center; font-size: 14px; width: 100%; margin: 0; margin-top: 14px; color: #000 !important; margin-top: 5px; opacity: 1 !important; line-height: 17px;">
Odoo <br>Support
</h3>
</a>
</div> </div>
<div class="col-xs-6">
<h5 class="oe_slogan" style="font-size: 20px; margin: 2px;">demo</h5>
</div> </div>
</div> </div>
<div class="oe_slogan" style="margin-top: 5px;">
<a class="btn btn-primary btn-lg mt8"
href="https://demo.mukit.at/web/login"
style="position: relative; overflow: hidden;"><span
class="o_ripple"
style="height: 138px; width: 138px; top: -35.2969px; left: -8.17188px;"></span>
<i class="fa fa-video-camera"></i> Live Preview </a>
</section>
<section class="oe_container" style="padding: 32px 0;">
<div class="oe_row oe_spaced" style="margin: auto;">
<div class="oe_demo oe_picture oe_screenshot">
<a href="https://mukit.at/r/SgN" target="_blank"> <img
src="preview.png">
</a>
</div>
</div> </div>
</section> </section>
@ -58,15 +115,16 @@
contact us, if you need any help with your Odoo integration or contact us, if you need any help with your Odoo integration or
addiontal features.</h5> addiontal features.</h5>
<div class="oe_slogan"> <div class="oe_slogan">
<a class="btn btn-primary btn-lg mt8" href="mailto:sale@mukit.at">
<i class="fa fa-envelope"></i> Email
<a class="btn btn-primary btn-lg mt8" href="https://mukit.at"
target="_blank"> <i class="fa fa-globe"></i> Website
</a> <a class="btn btn-primary btn-lg mt8" href="mailto:sale@mukit.at">
<i class="fa fa-envelope"></i> Contact Us
</a> <a class="btn btn-primary btn-lg mt8" </a> <a class="btn btn-primary btn-lg mt8"
href="https://mukit.at/page/contactus"> <i class="fa fa-phone"></i>
Contact
</a> <a class="btn btn-primary btn-lg mt8" href="mailto:support@mukit.at">
<i class="fa fa-life-ring"></i> Support
href="https://github.com/muk-it" target="_blank"> <i
class="fa fa-github"></i> Issues
</a> </a>
</div> </div>
<img src="logo.png" style="width: 200px; margin-bottom: 20px;"
class="center-block">
<img src="logo.png"
style="width: 200px; margin-bottom: 20px; display: block;"
class="mx-auto center-block">
</section> </section>

BIN
muk_web_preview_audio/static/description/preview.png

After

Width: 1000  |  Height: 200  |  Size: 32 KiB

BIN
muk_web_preview_audio/static/description/service_customization.png

After

Width: 250  |  Height: 250  |  Size: 27 KiB

BIN
muk_web_preview_audio/static/description/service_development.png

After

Width: 250  |  Height: 250  |  Size: 28 KiB

BIN
muk_web_preview_audio/static/description/service_implementation.png

After

Width: 250  |  Height: 250  |  Size: 26 KiB

BIN
muk_web_preview_audio/static/description/service_integration.png

After

Width: 250  |  Height: 250  |  Size: 24 KiB

BIN
muk_web_preview_audio/static/description/service_support.png

After

Width: 250  |  Height: 250  |  Size: 24 KiB

112
muk_web_preview_audio/static/lib/visualizer/visualizer.js

@ -0,0 +1,112 @@
/**********************************************************************************
*
* Copyright (C) 2017 MuK IT GmbH
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
**********************************************************************************/
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
function Visualizer($audio, $container, $canvas) {
var _this = this;
this.$audio = $audio;
this.$container = $container;
this.$canvas = $canvas;
this.audio = $audio.get(0);
this.canvas = $canvas.get(0);
this.audioCtx = new AudioContext();
this.analyser = this.audioCtx.createAnalyser();
this.audioSrc = this.audioCtx.createMediaElementSource(this.audio);
this.frequencyData = new Uint8Array(this.analyser.frequencyBinCount);
this.smoothEndingCounter = 0;
this.audioSrc.connect(this.analyser);
this.analyser.connect(this.audioCtx.destination);
this.ctx = this.canvas.getContext('2d'),
this.capYPositionArray = [];
this.$audio.bind('play', function (e) {
_this.smoothEndingCounter = 0;
_this.calcCanvas();
_this.renderFrame();
});
this.map = function (num, in_min, in_max, out_min, out_max) {
return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
this.calcCanvas = function() {
_this.canvas.width = _this.$container.width() !== 0 ? _this.$container.width() : 650;
_this.canvas.height = _this.$container.height() !== 0 ? _this.$container.height() : 360;
_this.cwidth = _this.canvas.width;
_this.cheight = _this.canvas.height - 4;
_this.meterWidth = 10;
_this.capHeight = 4;
_this.capStyle = '#FFF';
_this.meterNum = (_this.$container.width() !== 0 ? _this.$container.width() : 650) / (10 + 2);
_this.gradient = _this.ctx.createLinearGradient(0, 0, 0, _this.cheight);
_this.gradient.addColorStop(1, '#1CD5FB');
_this.gradient.addColorStop(0.75, '#19DECA');
_this.gradient.addColorStop(0.5, '#28F5A6');
_this.gradient.addColorStop(0.25, '#19DE5A');
_this.gradient.addColorStop(0, '#1CFB27');
}
this.renderFrame = function() {
if(_this.$container.width() !== _this.cwidth) {
_this.calcCanvas();
}
_this.ctx.clearRect(0, 0, _this.cwidth, _this.cheight);
_this.analyser.getByteFrequencyData(_this.frequencyData);
var step = Math.round(_this.frequencyData.length / _this.meterNum);
for (var i = 0; i < _this.meterNum; i++) {
var valueBar = _this.map(_this.frequencyData[i * step], 0, 255, 0, _this.cheight);
var valueCap = _this.map(_this.frequencyData[i * step], 0, 255, 0, _this.canvas.height);
if (_this.capYPositionArray.length < Math.round(_this.meterNum)) {
_this.capYPositionArray.push(valueCap);
};
_this.ctx.fillStyle = _this.gradient;
_this.ctx.fillRect(i * 12, _this.cheight - valueBar, _this.meterWidth, _this.cheight);
_this.ctx.fillStyle = _this.capStyle;
if (valueCap < _this.capYPositionArray[i]) {
_this.ctx.fillRect(i * 12, _this.canvas.height - (--_this.capYPositionArray[i]), _this.meterWidth, _this.capHeight);
} else {
_this.ctx.fillRect(i * 12, _this.canvas.height - valueCap, _this.meterWidth, _this.capHeight);
_this.capYPositionArray[i] = valueCap;
};
}
if(!_this.audio.paused) {
requestAnimationFrame(_this.renderFrame);
} else {
if(_this.smoothEndingCounter < 500) {
requestAnimationFrame(_this.renderFrame);
}
_this.smoothEndingCounter++;
}
}
};

75
muk_web_preview_audio/static/src/js/audio.js

@ -0,0 +1,75 @@
/**********************************************************************************
*
* Copyright (C) 2017 MuK IT GmbH
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
**********************************************************************************/
odoo.define('muk_preview_markdown.PreviewContentAudio', function (require) {
"use strict";
var core = require('web.core');
var ajax = require('web.ajax');
var utils = require('web.utils');
var session = require('web.session');
var registry = require('muk_preview.registry');
var AbstractPreviewContent = require('muk_preview.AbstractPreviewContent');
var QWeb = core.qweb;
var _t = core._t;
var PreviewContentAudio = AbstractPreviewContent.extend({
template: "muk_preview.PreviewContentAudio",
jsLibs: [
'/muk_web_preview_audio/static/lib/visualizer/visualizer.js',
],
mimetypeMap: {
'.wav': 'audio/wav', '.ogg': 'audio/ogg', '.mp3': 'audio/mpeg',
'wav': 'audio/wav', 'ogg': 'audio/ogg', 'mp3': 'audio/mpeg',
},
init: function(parent, url, mimetype, filename) {
this._super.apply(this, arguments);
if(this.mimetype === 'application/octet-stream') {
var extension = this.filename.split('.').pop();
this.mimetype = this.mimetypeMap[extension];
}
},
renderPreviewContent: function() {
this.visualizer = new Visualizer(
this.$('audio'),
this.$('.visualizer'),
this.$('canvas')
);
return this._super.apply(this, arguments);
},
downloadable: true,
printable: false,
});
_.each(['.wav', '.ogg', '.mp3', ], function(extension) {
registry.add(extension, PreviewContentAudio);
});
_.each(['wav', 'ogg', 'mp3'], function(extension) {
registry.add(extension, PreviewContentAudio);
});
_.each(['audio/wav', ' audio/ogg', 'audio/mpeg'], function(mimetype) {
registry.add(mimetype, PreviewContentAudio);
});
return PreviewContentMarkdown;
});

40
muk_web_preview_audio/static/src/js/preview_generator.js

@ -1,40 +0,0 @@
/**********************************************************************************
*
* Copyright (C) 2017 MuK IT GmbH
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
**********************************************************************************/
odoo.define('muk_preview_audio.PreviewGenerator', function (require) {
"use strict";
var core = require('web.core');
var PreviewGenerator = require('muk_preview.PreviewGenerator');
var PreviewHandler = require('muk_preview_audio.PreviewHandler');
var QWeb = core.qweb;
var _t = core._t;
PreviewGenerator.include({
init: function(widget, additional_handler) {
this._super(widget, additional_handler);
this.handler = _.extend(this.handler, {
"AudioHandler": new PreviewHandler.AudioHandler(widget),
});
},
});
});

66
muk_web_preview_audio/static/src/js/preview_handler.js

@ -1,66 +0,0 @@
/**********************************************************************************
*
* Copyright (C) 2017 MuK IT GmbH
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
**********************************************************************************/
odoo.define('muk_preview_audio.PreviewHandler', function (require) {
"use strict";
var ajax = require('web.ajax');
var core = require('web.core');
var PreviewHandler = require('muk_preview.PreviewHandler');
var QWeb = core.qweb;
var _t = core._t;
var AudioHandler = PreviewHandler.BaseHandler.extend({
cssLibs: [
],
jsLibs: [
'/muk_web_utils/static/lib/visualizer/visualizer.js',
],
mimetypeMap: {
'.wav': 'audio/wav', '.ogg': 'audio/ogg', '.mp3': 'audio/mpeg',
'wav': 'audio/wav', 'ogg': 'audio/ogg', 'mp3': 'audio/mpeg',
},
checkExtension: function(extension) {
return ['.wav', '.ogg', '.mp3', 'wav', 'ogg', 'mp3'].includes(extension);
},
checkType: function(mimetype) {
return ['audio/wav', ' audio/ogg', 'audio/mpeg'].includes(mimetype);
},
createHtml: function(url, mimetype, extension, title) {
var self = this;
var result = $.Deferred();
ajax.loadLibs(this).then(function() {
if(!mimetype || mimetype === 'application/octet-stream') {
mimetype = self.mimetypeMap[extension];
}
var $content = $(QWeb.render('AudioHTMLContent', {url: url, type: mimetype, title: title}));
var visualizer = new Visualizer($content.find('audio'), $content.find('.visualizer'), $content.find('canvas'));
result.resolve($content);
});
return result;
},
});
return {
AudioHandler: AudioHandler,
};
});

19
muk_web_preview_audio/static/src/less/preview_content.less → muk_web_preview_audio/static/src/scss/audio.scss

@ -17,36 +17,33 @@
* *
**********************************************************************************/ **********************************************************************************/
.o_preview_audio {
position: absolute;
.mk_preview_audio {
width: 100%; width: 100%;
height: 100%; height: 100%;
.visualizer-wrapper {
position: absolute; position: absolute;
height: 100%;
.visualizer-wrapper {
width: 100%; width: 100%;
height: 100%;
position: absolute;
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#333333), to(#000000)); background: -webkit-gradient(radial, center center, 0, center center, 460, from(#333333), to(#000000));
background: -webkit-radial-gradient(circle, #333333, #000000); background: -webkit-radial-gradient(circle, #333333, #000000);
background: -moz-radial-gradient(circle, #333333, #000000); background: -moz-radial-gradient(circle, #333333, #000000);
background: -ms-radial-gradient(circle, #333333, #000000); background: -ms-radial-gradient(circle, #333333, #000000);
} }
.visualizer { .visualizer {
position: absolute;
width: 75%;
height: 80%;
top: 50%; top: 50%;
left: 50%; left: 50%;
width: 75%;
height: 80%;
position: absolute;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
} }
audio { audio {
position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
position: absolute;
} }
} }

12
muk_web_preview_audio/static/src/xml/preview_content.xml → muk_web_preview_audio/static/src/xml/audio.xml

@ -18,15 +18,21 @@
--> -->
<templates> <templates>
<div t-name="AudioHTMLContent" class="o_preview_audio">
<t t-name="muk_preview.PreviewContentAudio">
<t t-call="muk_preview.PreviewContent">
<div class="mk_preview_audio">
<div class="visualizer-wrapper"> <div class="visualizer-wrapper">
<div class="visualizer"> <div class="visualizer">
<canvas width="685" height="360" /> <canvas width="685" height="360" />
</div> </div>
<audio t-att-data-title="title" controls="controls">
<source t-att-src="url" t-att-type="type" />
<audio t-att-data-title="widget.filename" controls="controls">
<source t-att-src="widget.url" t-att-type="widget.mimetype" />
Your browser does not support the audio element. Your browser does not support the audio element.
</audio> </audio>
</div> </div>
</div> </div>
</t>
</t>
</templates> </templates>

5
muk_web_preview_audio/template/assets.xml

@ -20,11 +20,10 @@
<odoo> <odoo>
<template id="assets_backend" inherit_id="web.assets_backend"> <template id="assets_backend" inherit_id="web.assets_backend">
<xpath expr="//link[last()]" position="after"> <xpath expr="//link[last()]" position="after">
<link rel="stylesheet" href="/muk_web_preview_audio/static/src/less/preview_content.less" />
<link rel="stylesheet" href="/muk_web_preview_audio/static/src/scss/audio.scss" />
</xpath> </xpath>
<xpath expr="//script[last()]" position="after"> <xpath expr="//script[last()]" position="after">
<script type="text/javascript" src="/muk_web_preview_audio/static/src/js/preview_handler.js"/>
<script type="text/javascript" src="/muk_web_preview_audio/static/src/js/preview_generator.js"/>
<script type="text/javascript" src="/muk_web_preview_audio/static/src/js/audio.js"/>
</xpath> </xpath>
</template> </template>
</odoo> </odoo>
Loading…
Cancel
Save