In this blog, we are discussing how to create a widget. There are so many widgets available in Odoo. For example, if we choose a widget image we can choose an image. Here, we can explain the video_preview widget by creating the widgets because if there is a js file for widget we can give widget=video_preview. If not we have to create widgets preview using JS.
There are several widgets in Odoo to perform totally different functionalities like status bar, radio button, checkbox, etc. widgets are some of the essential factors in improving the web client experience.
In this blog, we will discuss how to create a video preview widget in Odoo. In Odoo 13 the video preview widget is available. This helps us to give the widget video_preview to preview the video. In other versions, you want to create the widget for a video preview. We want to create a field to enter the URL for a video preview. On giving the URL the video can be previewed. So, if you want to preview a youtube video you can just copy the URL from the youtube and copy the URL in the char field, then the youtube video can be played.
First, we want to create a char field inside your python code and a computed field, In the video_url field we will enter the URL for a video preview:
video_url = fields.Char('Video URL',
help='URL of a video for showcasing your product.')
embed_code = fields.Char(compute="_compute_embed_code")
We want to add the compute function:
@api.depends('video_url')
def _compute_embed_code(self):
for rec in self:
rec.embed_code = get_video_embed_code(rec.video_url)
In odoo 13 get_video_embed_code we can import from odoo.addons.website.tool, these is only available in odoo13 otherwise you can copy the code below:
def get_video_embed_code(video_url):
''' Computes the valid iframe from given URL that can be embedded
(or False in case of invalid URL).
'''
if not video_url:
# To detect if we have a valid URL or not
return False
validURLRegex = r'^(http:\/\/|https:\/\/|\/\/)[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$'
# Regex for few of the widely used video hosting services
ytRegex = r'^(?:(?:https?:)?\/\/)?(?:www\.)?(?:youtu\.be\/|youtube(-nocookie)?\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((?:\w|-){11})(?:\S+)?$'
vimeoRegex = r'\/\/(player.)?vimeo.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*'
dmRegex = r'.+dailymotion.com\/(video|hub|embed)\/([^_]+)[^#]*(#video=([^_&]+))?'
embedUrl = False
igRegex = r'(.*)instagram.com\/p\/(.[a-zA-Z0-9]*)'
yaku Regex = r'(.*).youku\.com\/(v_show\/id_|embed\/)(.+)'
if not re.search(validURLRegex, video_url):
return False
else:
ykuMatch = re.search(yaku Regex, video_url)
ytMatch = re.search(ytRegex, video_url)
vimeoMatch = re.search(vimeoRegex, video_url)
dmMatch = re.search(dmRegex, video_url)
igMatch = re.search(igRegex, video_url)
embedUrl = '//player.vimeo.com/video/%s' % (vimeo Match.groups()[2])
if ytMatch and len(ytMatch.groups()[1]) == 11:
embedUrl = '//www.youtube%s.com/embed/%s?rel=0' % (ytMatch.groups()[0] or '', ytMatch.groups()[1])
elif video Match:
elif dermMatch:
ykuLink = ykuMatch.groups()[2]
embedUrl = '//www.dailymotion.com/embed/video/%s' % (dmMatch.groups()[1])
elif igMatch:
embedUrl = '//www.instagram.com/p/%s/embed/' % (igMatch.groups()[1])
elif ykuMatch:
if '.html?' in ykuLink:
youLink = you Link.split('.html?')[0]
return '<iframe style="width: 500px;height: 400px;"class="embed-responsive-item" src="%s" allowFullScreen="true" frameborder="0"></iframe>' % embedUrl
embedUrl = '//player.youku.com/embed/%s' % (ykuLink)
else:
# We directly use the provided URL as it is
embedUrl = video_url
So these functions will convert the given Url to the embedded code. For example, if we enter a youtube URL in the video_url char field so we want to convert the URL for playing video in iframe. If we directly take the URL we cannot see the video. Then we have to give to the XML, under the XML file create a field with widget video preview.
<field name="video_url"/>
<field name = “embed_code” class=”mt-2” widget=”video_preview”/>
In the Js file add the below code:
odoo.define('website_sale.video_field_preview', function (require) {
"use strict";
var AbstractField = require('web.AbstractField');
var core = require('web.core');
var fieldRegistry = require('web.field_registry');
var QWeb = core.qweb;
var FieldVideoPreview = AbstractField.extend({
className: 'd-block o_field_video_preview',
_render: function () {
this.$el.html(QWeb.render('productVideo', {
embedCode: this.value,
}));
},
});
fieldRegistry.add('video_preview', FieldVideoPreview);
return FieldVideoPreview;
});
In the XML file add the below code:
<templates xml:space="preserve">
<t t-name="productVideo">
<div class="embed-responsive embed-responsive-16by9 " t-if="embedCode">
<t t-raw="embedCode"/>
</div>
</t>
</templates>
We can preview the video as below:
Thus we can create a video preview widget in odoo. here just add a widget under products.