Comedy
The tale of an extraordinary family, the Madrigals, who live hidden in the mountains of Colombia, in a magical house, in a vibrant town, in a wondrous, charmed place called an Encanto. The magic of the Encanto has blessed every child in the family with a unique gift from super strength to the power to heal—every child except one, Mirabel. But when she discovers that the magic surrounding the Encanto is in danger, Mirabel decides that she, the only ordinary Madrigal, might just be her exceptional family’s last hope.
Duration : 2m Maturity Level : all
{{ displayDate(video.date_added) }}
{{ video.year }}
{{ video.price_tag }}
{{ maturityText(video.maturity_level) }}
{{ video.duration }}
LIVE
{{ video.mpaa_rating }}
More Like This
About
Maturity Level :
{{ maturityText(video.maturity_level) }}
Recommended for every age group
Recommended for {{ maturityText(video.maturity_level) }} audience
`;
Vue.component('video-detail-block',{
template:_videoBlockDetail,
data: function(){
return {
artistsArr:[],
relatedVideos:[],
isMobile:false,
baseUrl:`https://demo.vodlix.com`,
videoid:``,
trailer:{},
emebedTrailer:'',
playerMute:false,
artistsAjax:{},
relatedAjax:{},
trailerPlayer:null,
moviePlayerOptions: {
sprite : null,
}
}
},
props:{
video:{
type:Object
},
logintowatch:{
type:Boolean,
default:false
},
error:{
type:Object
},
modal:{
type:Boolean,
default:false
}
},
computed:{
maturityText(){
return ( text ) => {
return getFormattedMaturityLevel(text);
}
},
percantageWidth(){
return ( percantage ) => {
//console.log( hover )
return { 'width': `${percantage}%` }
}
},
resumeWatchTime(){
return this.video.watch_url + `?last_watch_time=${this.video.last_watch_time}` || `/watch/${this.video.videoid}?last_watch_time=${this.video.last_watch_time}`
},
playUrl(){
return this.video.watch_url || `/watch/${this.video.videoid}`
},
trailerUrl(){
return `/watch/${this.video.trailers.trailer_id}`
},
portraitThumb(){
if( this.video.portrait_thumbs && ( this.video.portrait_thumbs['320x480'] || this.video.portrait_thumbs['480x720'] ) )
return this.video.portrait_thumbs['320x480'] || this.video.portrait_thumbs['480x720'] || this.video.portrait_thumbs.original
else
return false;
},
hasMedia() {
return this.trailer._media && this.trailer._media.length > 0;
},
poster() {
return this.video.thumbs && (this.video.thumbs.original || this.video.thumbs['1280x720']);
},
emebedIframe(){
return this.emebedTrailer
},
volumeIcon(){
return this.playerMute ? 'mdi-volume-high' : 'mdi-volume-variant-off'
},
playPauseClasses(){
return this.modal ? 'playPauseModal' : 'playPausePage'
}
},
methods:{
displayDate(date) {
if (date && !Number.isInteger(date)) {
date = Date.parse(date);
}
const displayDateFormat = 'Y-m-d';
if (displayDateFormat) {
return this.formatDateCustom(date, displayDateFormat);
}
return this.formatDateCustom(date, "Y-m-d");
},
formatDateCustom(date, format) {
const d = new Date(date);
const year = d.getFullYear();
const month = String(d.getMonth() + 1).padStart(2, "0");
const day = String(d.getDate()).padStart(2, "0");
return format.replace("Y", year).replace("m", month).replace("d", day);
},
getArtists(){
let _this = this
// if ( !_.isEmpty(this.artistsAjax) )
// this.artistsAjax.abort();
this.artistsAjax = window.vodlix.api.get(`/content_artists?content_id=${this.video.videoid}&content_type=1&info=true`);
let artistsPromise = this.artistsAjax.then(res=>{
//console.log('res',res )
this.$set(this, 'artistsArr', res.data )
}).catch(err=>{
console.log('err', err)
}).always(always=>{
_this.artistsAjax = {}
});
},
getRelatedVideos(){
let _this = this
var apiURL = `/related/content/${this.video.videoid}/${this.video.content_type}`;
// if ( !_.isEmpty(this.relatedAjax) )
// this.relatedAjax.abort();
this.relatedAjax = window.vodlix.api.get(apiURL);
let relatedPromise = this.relatedAjax.then(res=>{
this.$set(this, 'relatedVideos', res.data)
if ( this.relatedVideos.length == 0){
let videoCategories = this.video.categories[0].category_id;
window.vodlix.api.get(`/videos/list/?categories=${videoCategories}&exclude_video=${this.video.videoid}`).then(res=>{
this.relatedVideos = res.videos.category_videos[videoCategories];
this.$set(this, 'relatedVideos', res.videos.category_videos[videoCategories] )
}).catch(err=>{
console.log('err', err)
})
}
}).catch(err=>{
console.log('err', err)
}).always(always=>{
_this.relatedAjax = {}
});
},
getMobileDevice(){
let isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if ( window.innerWidth < 767 || isMobile )
this.isMobile = true
else
this.isMobile = false
},
loginWatch(){
$('#username').focus();
},
trailerVideo(){
window.vodlix.api.post(`/v2/videos/${this.video.trailers.trailer_id}/playable`).then(res=>{
// console.log('res',res )
this.$set(this, 'trailer', res.data[0] )
this.$set(this, 'emebedTrailer', res.data[0].content.embed_code )
}).catch(err=>{
console.log('err', err)
})
},
init( refs, options ){
this.$nextTick(() => {
this.trailerPlayer = BeeExPlayer(refs, options);
const modalBox_trailer_muted = '1';
if( modalBox_trailer_muted == 0 || modalBox_trailer_muted == '0' ) {
this.trailerPlayer.muted(false);
if( this.trailerPlayer.muted() == false ) {
this.playerMute = true
$(".playPauseModal").addClass("active");
} else {
this.playerMute = false
$(".playPauseModal").removeClass("active");
}
}
})
}
},
beforeDestroy() {
if ( this.trailerPlayer && typeof this.trailerPlayer.dispose === 'function')
this.trailerPlayer.dispose();
},
mounted(){
let _this = this
$('.videoDetailModal').on('shown.bs.modal', function (event) {
if ( _this.video.trailers != undefined)
_this.trailerVideo();
_this.getArtists()
_this.getRelatedVideos()
$("body").tooltip({ selector: '[data-toggle=tooltip]' });
})
$('.videoDetailModal').on('hidden.bs.modal', function (event) {
if ( !_.isEmpty(_this.artistsAjax) )
_this.artistsAjax.abort();
if ( !_.isEmpty(_this.relatedAjax) )
_this.relatedAjax.abort();
window.apps.modalvideo.video = {}
_this.artistsArr = []
_this.relatedVideos = []
_this.trailer = {},
_this.emebedTrailer = ''
_this.playerMute = false
_this.trailerPlayer = {}
if ( !_.isEmpty(_this.trailerPlayer) && _this.trailerPlayer)
_this.trailerPlayer.muted(true)
$('.detailsThumb').find('iframe').remove();
$('.detailsThumb').find('.video-js').remove();
$('.iframePlayPause').remove('active');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
})
if ( _this.modal != true && !_.isEmpty(_this.video) )
{
this.getArtists()
this.getRelatedVideos()
if ( this.video.trailers != undefined){
this.trailerVideo()
}
}
$(document).ready(function(){
$("body").tooltip({ selector: '[data-toggle=tooltip]' });
var clipboard = new Clipboard('.copyButton');
$(document.body).on('click', '.playPauseModal, .playPausePage' ,function(){
$(this).toggleClass('active')
if ( $(this).hasClass('active') ){
_this.trailerPlayer.muted(false)
_this.playerMute = true
}
else{
_this.trailerPlayer.muted(true)
_this.playerMute = false
}
});
clipboard.on('success', function(e) {
console.log(e);
window.vodlix.success.toast({
html: `Copied`
});
});
clipboard.on('error', function(e) {
console.log(e);
});
})
this.getMobileDevice()
window.addEventListener("resize", this.getMobileDevice );
},
watch: {
trailer: function (newValue, oldValue) {
// console.log('newValue', newValue )
// console.log('oldValue', oldValue )
//this.trailer = newValue
this.init(this.$refs.moviePlayer, this.moviePlayerOptions);
},
}
})
-->
{{ series.year }}
{{ startReleasedDate }}
{{ series.price_tag }}
{{ maturityText(series.maturity_level) }}
{{ allSeasons(series.season_count) }}
{{ series.mpaa_rating }}
More Like This
About
Maturity Level :
{{ maturityText(series.maturity_level) }}
Recommended for every age group
Recommended for {{ maturityText(series.maturity_level) }} audience
`;
Vue.component('series-detail-block',{
template:_seriesBlockDetail,
data: function(){
return {
artistsArr:[],
relatedSeries: [],
episodes:[],
seasons:[],
selectedSeasonId:'',
comingSoonMessage:false,
firstSeason:{},
message:'testing for you',
page:1,
lastPage:'',
baseUrl:`https://demo.vodlix.com`,
isMobile:false,
artistsAjax:{},
relatedAjax:{},
seasonsAjax:{},
episodesAjax:{},
trailer:{},
emebedTrailer:'',
vplayer:null,
playerMute:false,
playerConfigurations: {
sprite : null,
}
}
},
props:{
series:{
type:Object
},
logintowatch:{
type:Boolean,
default:false
},
modal:{
type:false,
default:false
}
},
computed:{
startReleasedDate(){
//console.log( 'this.series.start_released_date asd', this.series.start_released_date )
if ( this.series.start_released_date != undefined ){
let fullDate = this.series.start_released_date
let year = fullDate.split('-')
return year[0]
}
},
maturityText(){
return ( text ) => {
return getFormattedMaturityLevel(text);
}
},
allSeasons(){
return (seasons) => {
if ( seasons != undefined && seasons != '' && seasons != null ){
if (seasons == 1)
return seasons + ' ' + `Season`
else
return seasons + ' ' + `Seasons`
}
}
},
seriesThumb() {
return this.series.thumbs["632x395"] || this.series.thumbs["416x260"] || this.series.thumb;
},
seriesName(){
return this.series.series_name
},
seriesId(){
return this.id = `media-${this.series.series_id}`
},
percantageWidth(){
return ( percantage ) => {
//console.log( hover )
return { 'width': `${percantage}%` }
}
},
resumeWatchTime(){
return `/watch/${this.series.first_episode_id}?type=series&series_id=${this.series.series_id}&season_id=${this.series.last_watch_episode_id}&last_watch_time=${this.series.last_watch_time}`
},
playUrl(){
return `/watch/${this.series.first_episode_id}?type=series&series_id=${this.series.series_id}&season_id=${this.series.first_season_id}`
},
trailerUrl(){
return `/watch/${this.series.trailer.trailer_id}`
},
portraitThumb(){
if( this.series.portrait_thumbs && ( this.series.portrait_thumbs['480x720'] || this.series.portrait_thumbs['320x480'] ) )
return this.series.portrait_thumbs['320x480'] || this.series.portrait_thumbs['480x720'] || this.series.portrait_thumbs.original
else
return false;
},
hasMedia() {
return this.trailer._media && this.trailer._media.length > 0;
},
poster() {
return this.series.thumbs && (this.series.thumbs.original || this.series.thumbs['1280x720']);
},
emebedIframe(){
return this.emebedTrailer
},
volumeIcon(){
return this.playerMute ? 'mdi-volume-high' : 'mdi-volume-variant-off'
},
},
methods:{
getArtists(){
let _this = this
this.artistsAjax = window.vodlix.api.get(`/content_artists?content_id=${this.series.series_id}&content_type=2&info=true`);
let artistsPromise = this.artistsAjax.then(res=>{
//console.log('res',res )
this.$set(this, 'artistsArr', res.data )
}).catch(err=>{
//console.log('err', err)
}).always(always=>{
_this.artistsAjax = {}
});
},
seasonChange(val){
this.selectedSeasonId = val
//console.log( val )
this.$set(this, "page", 1);
this.getSeasonEpisodes(val)
},
getSeasonList( load_more = false ){
let _this = this
this.seasonsAjax = window.vodlix.api.get(`/season/list/${this.series.series_id}`);
let seasonsPromise = this.seasonsAjax.then(res=>{
let seasonsArray = res.data.seasons
let appendText = seasonsArray.map(item => {
let text = 'Season' + ' ' + item.sequence
item.sequence = text
return item
})
this.seasons = appendText;
if( load_more == true ) {
if( this.selectedSeasonId == '' || this.selectedSeasonId == undefined || this.selectedSeasonId == false ) {
this.selectedSeasonId = this.seasons[0].season_id;
}
this.getSeasonEpisodes(this.selectedSeasonId)
} else {
this.getSeasonEpisodes(this.seasons[0].season_id)
}
//console.log( 'this.seasons', this.seasons )
}).catch(err=>{
//console.log('err', err)
}).always(always=>{
_this.seasonsAjax = {}
});
},
getSeasonEpisodes(obj){
let _this = this
this.episodesAjax = window.vodlix.api.get(`/season/data?series_id=${this.series.series_id}&season_id=${obj}&page=${this.page}&paginate=1`);
let episodesPromise = this.episodesAjax.then(res=>{
//console.log( 'res s',res )
if(this.page === 1) {
this.episodes = res.data.data
}
else {
this.episodes.push(...res.data.data)
}
this.page = res.data.current_page
this.lastPage = res.data.last_page
if ( this.episodes.length <= 0 )
this.comingSoonMessage = true
else
this.comingSoonMessage = false
}).then(()=>{
this.getContinueWatch()
})
.catch(err=>{
//console.log('err ', err)
}).always(always=>{
_this.episodesAjax = {}
});
},
getContinueWatch(){
let _this = this
this.continueWatchAjax = window.vodlix.api.get(`/v2/continueWatchTime?series_id=${this.series.series_id}`);
let continueWatchPromise = this.continueWatchAjax.then(res=>{
if (res.data && Array.isArray(res.data) && res.data.length > 0 && res.data[0].watched_episodes) {
this.episodes = this.episodes.map(episode => {
const watchData = res.data[0].watched_episodes.find(item => item.videoid === episode.videoid);
if (watchData) {
return {
...episode,
last_watch_time: watchData.last_watch_time,
last_watch_time_percentage: watchData.last_watch_time_percentage
};
}
return episode;
});
}
}).catch(err=>{
console.log('err', err);
});
},
getRelatedSeries(){
let _this = this
var apiURL = `/related/content/${this.series.series_id}/2`;
this.relatedAjax = window.vodlix.api.get(apiURL);
let relatedPromise = this.relatedAjax.then(res=>{
//console.log( 'res dsf',res.series.related_series )
this.$set(this, 'relatedSeries', res.data)
if ( this.relatedSeries.length == 0 && this.series.categories[0] !== null && this.series.categories[0] !== undefined ){
let seriesCategories = this.series.categories[0].category_id;
window.vodlix.api.get(`/series/list/?categories=${seriesCategories}&exclude_video=${this.series.series_id}`).then(res=>{
//console.log('dasd', res )
this.$set(this, 'relatedSeries', res.series.category_series[seriesCategories] )
}).catch(err=>{
//console.log('err', err)
})
}
}).catch(err=>{
//console.log('err', err)
}).always(always=>{
_this.relatedAjax = {}
});
},
loadMoreEpisode(){
if ( this.page < this.lastPage ){
this.page++
this.getSeasonList( true );
}
},
getMobileDevice(){
let isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if ( window.innerWidth < 767 || isMobile )
this.isMobile = true
else
this.isMobile = false
},
getFirstSeasonEpisodes(series, resumeTime){
//console.log( 'series', series )
let data ={
'data': {
'series_id':series.series_id
}
}
window.vodlix.api.get(`/series/firstdata`,data).then(res => {
let firstEdpisodeId = res.data.episode.videoid
let firstSeasonId = res.data.episode.season_id
let watch_url = res.data.episode.watch_url
if ( resumeTime == true )
window.location.href = `https://demo.vodlix.com${watch_url}?type=series&series_id=${series.series_id}&season_id=${series.last_watch_episode_id}&last_watch_time=${series.last_watch_time}`
else
window.location.href = `https://demo.vodlix.com${watch_url}?type=series&series_id=${series.series_id}&season_id=${firstSeasonId}`
}).catch(err => {
console.log('err', err)
})
},
playContinueWatchEpisode(series){
window.location.href = `https://demo.vodlix.com/watch/${series.videoid}?type=series&series_id=${series.series_id}&season_id=${series.season_id}&last_watch_time=${series.last_watch_time}`
},
trailerVideo(){
window.vodlix.api.post(`/v2/videos/${this.series.trailer.trailer_id}/playable`).then(res=>{
// console.log('res',res )
this.$set(this, 'trailer', res.data[0] )
this.$set(this, 'emebedTrailer', res.data[0].content.embed_code )
}).catch(err=>{
console.log('err', err)
})
},
init( refs, options ){
this.$nextTick(() => {
this.vplayer = BeeExPlayer(refs, options);
const modalBox_trailer_muted = '1';
if( modalBox_trailer_muted == 0 || modalBox_trailer_muted == '0' ) {
this.vplayer.muted(false);
if( this.vplayer.muted() == false ) {
this.playerMute = true
$(".iframePlayPauseSeries").addClass("active");
} else {
this.playerMute = false
$(".iframePlayPauseSeries").removeClass("active");
}
}
})
}
},
beforeDestroy() {
if ( this.vplayer)
this.vplayer.dispose();
},
mounted(){
let _this = this
$('.seriesDetailModal').on('shown.bs.modal', function (event) {
if ( _this.series.trailer != undefined)
_this.trailerVideo();
_this.getArtists()
_this.getSeasonList()
_this.getRelatedSeries();
$("body").tooltip({ selector: '[data-toggle=tooltip]' });
})
$('.seriesDetailModal').on('hidden.bs.modal', function (event) {
_this.page = 1;
_this.selectedSeasonId = ''
if ( !_.isEmpty(_this.artistsAjax) )
_this.artistsAjax.abort();
if ( !_.isEmpty(_this.relatedAjax) )
_this.relatedAjax.abort();
if ( !_.isEmpty(_this.seasonsAjax) )
_this.seasonsAjax.abort();
if (!_.isEmpty(_this.episodesAjax))
_this.episodesAjax.abort();
_this.artistsArr = []
_this.relatedSeries = []
_this.episodes = []
_this.seasons = []
_this.trailer = {},
_this.emebedTrailer = ''
_this.vplayer = {}
_this.playerMute = false
if ( !_.isEmpty(_this.vplayer) && _this.vplayer)
_this.vplayer.muted(true)
$('.detailsThumb').find('iframe').remove();
$('.iframePlayPause').remove('active');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
})
if ( this.modal != true ){
this.getArtists()
this.getSeasonList()
this.getRelatedSeries()
if ( this.series.trailer != undefined)
this.trailerVideo();
}
$(document).ready(function(){
var clipboard = new Clipboard('.copyButton');
clipboard.on('success', function(e) {
console.log(e);
window.vodlix.success.toast({
html: `Copied`
});
});
clipboard.on('error', function(e) {
console.log(e);
});
$(document.body).on('click', '.iframePlayPauseSeries' ,function(){
$(this).toggleClass('active')
if ( $(this).hasClass('active') ){
_this.vplayer.muted(false)
_this.playerMute = true
}
else{
_this.vplayer.muted(true)
_this.playerMute = false
}
});
});
this.getMobileDevice()
window.addEventListener("resize", this.getMobileDevice );
},
watch: {
trailer: function (newValue, oldValue) {
this.init(this.$refs.seriesPlayer, this.playerConfigurations);
}
},
})
-->
Login
Connect through
{{ network.name }}
`;
Vue.component('login-form',{
template:_loginTemplate,
data:function(){
return {
usernameVal:'',
msg:[],
passwordVal:'',
isLoading: false,
loading: "",
showPassword:false,
minUsername:`1`,
socialNetworks: JSON.parse('null'),
loginWithOTP: `0`,
disableCaptcha:`1`,
successReq:window.vodlix.loginSuccess,
showLoginNote: "0",
loginNoteInHtml: ``
}
},
props:{
lasturl:{
type:String,
default:''
}
},
computed: {
hasSocialNetworks() {
return this.socialNetworks && this.socialNetworks.length > 0;
},
disabledCaptcha() {
return this.disableCaptcha != "1";
},
btnDisable(){
// return this.usernameVal.length < this.minUsername || this.passwordVal.length < 1
return this.usernameVal.length < 1 || this.passwordVal.length < 1
}
},
methods:{
userNameRules(){
if ( this.usernameVal == '' )
this.msg['usernameVal'] = `Username is required`
else
this.msg['usernameVal'] = ''
// else if ( this.usernameVal.length < this.minUsername )
// this.msg['usernameVal'] = `Username must contain atleast ${this.minUsername} characters`
},
passwordRules(){
if ( this.passwordVal == '' )
this.msg['passwordVal'] = `Password is required`
else
this.msg['passwordVal'] = ''
// else if ( this.passwordVal.length < 3 )
// this.msg['passwordVal'] = `Password must be alphanumeric`
},
getLogin(){
var button_text = 'Logging In...'
$(".submitBtn").attr('disabled',true)
$(".submitBtn").html(button_text)
window.vodlix.auth.loginUser({
username: this.usernameVal,
password: this.passwordVal
},this.lasturl);
},
requestAuthUrl(network) {
this.$set(this, "isLoading", true);
this.$set(this, "loading", network.network);
window.vodlix.api.get(`/v2/auth/social/${ network.network }`)
.then(response => {
const { data } = response;
if (data.auth_url !== undefined) {
return window.location.href = data.auth_url;
} else {
window.vodlix.error.toast({
html: `No oauth url returned for ${ network.name }. Please contact our support .`
});
this.$set(this, "isLoading", false);
this.$set(this, "loading", "");
}
}).catch(err => {
const { responseJSON: response } = err;
window.vodlix.error.toast({
text: response.message
});
this.$set(this, "isLoading", false);
this.$set(this, "loading", "");
})
}
},
mounted(){
//console.log('sdf', window.awl.baseUrl)
},
})
-->
