diff --git a/components/lenta/index.css b/components/lenta/index.css index 029b51ae66..6e3f9e69d9 100644 --- a/components/lenta/index.css +++ b/components/lenta/index.css @@ -35,6 +35,9 @@ #lenta .shareinlenta.rendered .sharecnt { display: block; } +#lenta .adsCheckbox { + padding-right: 1em; +} #lenta .optimizationTip { height: 150px; display: flex; diff --git a/components/lenta/index.js b/components/lenta/index.js index 6d7558792f..0cadc08325 100644 --- a/components/lenta/index.js +++ b/components/lenta/index.js @@ -16,7 +16,7 @@ var lenta = (function(){ var mid = p.mid; var making = false, ovf = false; var w, essenseData, recomended = [], initialized, recommended, mestate, initedcommentes = {}, canloadprev = false, - video = false, isotopeinited = false, videosVolume = 0, fullscreenvideoShowing = null, loadedcachedHeight, lwidth = 0, bannerComment = null; + video = false, isotopeinited = false, videosVolume = 0, fullscreenvideoShowing = null, loadedcachedHeight, lwidth = 0; var loadertimeout = null var lastcache = null var subloaded = false @@ -906,7 +906,6 @@ var lenta = (function(){ $(this).closest('.jsPlayerLoading').addClass('loading') $(this).closest('.js-player-dummy').addClass('js-player-ini') - actions.initVideo(share, function(v){ if (players[share.txid]) @@ -925,18 +924,19 @@ var lenta = (function(){ button = null }, - initVideo : function(share, clbk, shadow){ + initVideo : function(share, clbk, shadow, ads){ if(!share || !share.txid || !el.share[share.txid]) return var pels = el.share[share.txid].find('.js-player-ini'); var vel = el.share[share.txid].find('.videoWrapper') + var ended = false; if (pels.closest('.shareTable').attr('stxid') != (share.txid || '')) return if(!vel.length) return - if (shadow && !players[share.txid]){ + if (shadow){ players[share.txid] = { shadow : true, @@ -1015,7 +1015,7 @@ var lenta = (function(){ var startTime = 0; - if (self.app.platform.sdk.videos.historyget && share.itisvideo()){ + if (self.app.platform.sdk.videos.historyget && share.itisvideo() && !ads){ var pr = self.app.platform.sdk.videos.historyget(share.txid) @@ -1060,6 +1060,7 @@ var lenta = (function(){ fullscreenchange : self.app.mobile.fullscreenmode, play : function(){ + videopaused = false self.app.actions.playingvideo(players[share.txid].p) @@ -1100,6 +1101,12 @@ var lenta = (function(){ self.app.platform.sdk.activity.adduser('video', share.address, 6 * position / duration, share) } + if (playbackState === 'ended' && ads && !ended){ + + ended = true; + clbk(true, true); + } + }, error : function(error){ @@ -1142,6 +1149,7 @@ var lenta = (function(){ s.logoType = self.app.meta.fullname s.app = self.app s.light = true + PlyrEx(pels[0], s, callback, readyCallback) } @@ -1575,11 +1583,7 @@ var lenta = (function(){ fullScreenVideo : function(id, clbk, auto){ - if (fullscreenvideoShowing) { return } - if (fullscreenvideoShowed) { return } - if (essenseData.openapi){ return } - - fullscreenvideoShowing = id + console.log('fullscreenvideo'); var _el = el.share[id] var share = self.app.platform.sdk.node.shares.getWithTemp(id) @@ -1597,88 +1601,198 @@ var lenta = (function(){ share.address = self.app.platform.sdk.address.pnet().address }*/ + var initVideoClbk = function(ads){ + if (fullscreenvideoShowing) { return } + if (fullscreenvideoShowed) { return } + if (essenseData.openapi){ return } - actions.initVideo(share, function(res){ + fullscreenvideoShowing = id + + actions.initVideo(share, function(res, next){ - fullscreenvideoShowing = null + if (next){ - if(!res){ - return - } - - if(!players[id]) return; + players[share.txid] = null; - self.app.actions.closepip() + actions.exitFullScreenVideo(id); - fullscreenvideoShowed = id; + renders.url(urlWrapper, share.url, share, function(){ - self.app.mobile.reload.destroyparallax() + renders.urlContent(share, function(){ + + if(!video) actions.initVideoLight(share, null, null, true); + + if(isotopeinited) el.shares.isotope() + + shareInitingMap[share.txid] = false; + + initVideoClbk(); + + }); + + }) - self.app.pseudofullscreenmode = true + return; + } - _el.addClass('fullScreenVideo') - - actions.videoPosition(id) + if (!res){ + return; + } - actions.fullScreenVideoParallax(_el, id) + fullscreenvideoShowing = null; - self.app.mobile.statusbar.gallerybackground() + if (ads){ - self.app.nav.api.history.addParameters({ - v : id - }) + videopaused = false; + + } else { - var player = players[id] + self.app.actions.closepip() - player.p.prepare().then(() => { + fullscreenvideoShowed = id; - if(!essenseData.openapi && !essenseData.second){ + self.app.mobile.reload.destroyparallax() - lastscroll = self.app.lastScrollTop - self.app.actions.offScroll() + self.app.pseudofullscreenmode = true + _el.addClass('fullScreenVideo') - if(!player.p.playing && !auto){ - player.p.play() - } + actions.videoPosition(id) + + actions.fullScreenVideoParallax(_el, id) + + self.app.mobile.statusbar.gallerybackground() + + self.app.nav.api.history.addParameters({ + v : id + }) - if (player.p.enableHotKeys) player.p.enableHotKeys() - - - actions.addRecommendationsFullScreenVideo(id) } + - actions.setVolume(players[id], videosVolume || 0.5) + var player = players[id] - if(!essenseData.comments && !share.temp && !share.relay){ + player.p.prepare().then(() => { - retry(function(){ - return initedcommentes[id] || !el.c - }, function(){ + if(!essenseData.openapi && !essenseData.second){ - if(el.c){ - if (initedcommentes[id]){ - initedcommentes[id].destroy() - initedcommentes[id] = null - } - - renders.comments(id, false, true) - } + lastscroll = self.app.lastScrollTop + + if (!ads){ + self.app.actions.offScroll(); + } + + + if(!player.p.playing && !auto){ + player.p.play() + } + + if (player.p.enableHotKeys) player.p.enableHotKeys() + + + actions.addRecommendationsFullScreenVideo(id) + } + + actions.setVolume(players[id], videosVolume || 0.5) + + if(!essenseData.comments && !share.temp && !share.relay){ + + retry(function(){ + return initedcommentes[id] || !el.c + }, function(){ + + if(el.c){ + if (initedcommentes[id]){ + initedcommentes[id].destroy() + initedcommentes[id] = null + } + + renders.comments(id, false, true) + } + + }) + } + + + + + if (clbk) + clbk() + + }) + + }, false, ads) + + } + + var adsDate = Number(localStorage.getItem('adsDate') || 0); + + var status = app.platform.sdk.localshares.status(share.txid); + + if (self.app.localization.key === 'ru' && status !== 'saved' && status !== 'saving' && status !== 'paused' && share.settings.ads && adsDate < new Date().getTime()){ + + const numWeeks = 3; + let weeks = new Date(); + weeks.setDate(weeks.getDate() + numWeeks * 7); + weeks = weeks.getTime(); + + localStorage.setItem('adsDate', weeks); + + players[share.txid] = null; + + var ads = share.settings.ads; + + var urlWrapper = el.share[share.txid].find('.url'); + + renders.url(urlWrapper, ads, share, function(){ + + renders.urlContent(share, function(){ + + if(!video) actions.initVideoLight(share, null, null, true); + + if(isotopeinited) el.shares.isotope() + + shareInitingMap[share.txid] = false; + + urlWrapper.find('.skip-ads').on('click', function(){ + + players[share.txid] = null; + + var id = el.share[share.txid].attr('id'); + + actions.exitFullScreenVideo(id); + + renders.url(urlWrapper, share.url, share, function(){ + + renders.urlContent(share, function(){ + + if(!video) actions.initVideoLight(share, null, null, true); + + if(isotopeinited) el.shares.isotope() + + shareInitingMap[share.txid] = false; + + initVideoClbk(); + + }); + + }) }) - - } + initVideoClbk(true); + }); + + }, ads) + } else { - if (clbk) - clbk() + initVideoClbk(); + } - }) - }) }, @@ -3254,7 +3368,6 @@ var lenta = (function(){ promises.push(new Promise((resolve, reject) => { - renders.url(p.el.find('.url'), share.url, share, function(){ renders.urlContent(share, function(){ @@ -3606,6 +3719,8 @@ var lenta = (function(){ shares : function(shares, clbk, p){ + console.log('shares', shares); + if(!p) p = {}; @@ -3954,7 +4069,12 @@ var lenta = (function(){ } }, - url : function(el, url, share, clbk){ + url : function(el, url, share, clbk, ads){ + + // debugger; + + // url = 'peertube://peertube6new.pocketnet.app/8acd9ab2-2159-476e-be14-a2ba4aaeb655'; + // share.url = 'peertube://peertube6new.pocketnet.app/8acd9ab2-2159-476e-be14-a2ba4aaeb655'; if (essenseData.nourlload){ @@ -3978,8 +4098,9 @@ var lenta = (function(){ el : el, mid : 'sharelenta', data : { - url : url, + url : ads || url, og : og, + ads: ads, share : share, video : video, preview : video ? true : false, @@ -3994,6 +4115,7 @@ var lenta = (function(){ }, function(_p){ + var images = _p.el.find('img'); self.app.nav.api.links(null, _p.el, function(event){ diff --git a/components/lenta/index.less b/components/lenta/index.less index ad19c3220f..9c41dd701e 100644 --- a/components/lenta/index.less +++ b/components/lenta/index.less @@ -36,6 +36,10 @@ } } + .adsCheckbox{ + padding-right: 1em; + } + .optimizationTip{ height: 150px; display: flex; diff --git a/components/lenta/templates/share.html b/components/lenta/templates/share.html index ac2fb0f8f8..839d09fbb7 100644 --- a/components/lenta/templates/share.html +++ b/components/lenta/templates/share.html @@ -47,6 +47,8 @@ var deletedaccount = typeof app.platform.sdk.user.deletedaccount != 'undefined' ? app.platform.sdk.user.deletedaccount(share.address) : false +if (typeof adv == undefined) var adv = ''; + var metadisplay = function(){ %> diff --git a/components/post/index.js b/components/post/index.js index f5aa473a61..9ef1a3b00e 100644 --- a/components/post/index.js +++ b/components/post/index.js @@ -13,7 +13,7 @@ var post = (function () { var primary = (p.history && !p.inWnd) || p.primary; - var el = {}, share, ed = {}, recommendationsenabled = false, inicomments, eid = '', _repost = null, level = 0, external = null, recommendations = null, bannerComment; + var el = {}, share, ed = {}, recommendationsenabled = false, inicomments, eid = '', _repost = null, level = 0, external = null, recommendations = null; var progressInterval; @@ -402,7 +402,7 @@ var post = (function () { }, - initVideoLight: function(clbk){ + initVideoLight: function(clbk, ads){ //js-player-dummy var button = el.c.find('.initvideoplayer'); @@ -430,23 +430,23 @@ var post = (function () { }) } else { - actions.initVideo(clbk) + actions.initVideo(clbk, ads) } button = null }, - initVideo: function (clbk) { - + initVideo: function (clbk, ads) { if(!el.c) return + var ended; + if (self.app.platform.sdk.usersettings.meta.embedvideo && ! self.app.platform.sdk.usersettings.meta.embedvideo.value) return var pels = el.c.find('.js-player-ini'); - var wa = !share.repost && !ed.repost && (((share.itisvideo() && isMobile() && !ed.openapi) || (ed.autoplay && pels.length <= 1))) ? true : false if (pels.length) { @@ -533,6 +533,11 @@ var post = (function () { if(playbackState == 'playing' && duration < 120 && position / duration > 0.2){ self.app.platform.sdk.activity.adduser('video', share.address, 6 * position / duration, share) } + + if (playbackState === 'ended' && ads && !ended){ + ended = true; + clbk(true, true); + } }, error : function(error){ @@ -569,6 +574,7 @@ var post = (function () { enableHotkeys : !p.pip }; + $.each(pels, function (key, el2) { var videoId = el2.getAttribute('data-plyr-video-id'); @@ -579,7 +585,6 @@ var post = (function () { PlyrEx(el2, options, (_player) => { - if(!el.c) { _player.destroy() return @@ -1430,105 +1435,151 @@ var post = (function () { if(!el.share) return - renders.mystars(function () { }); - renders.url(function () { + var adsDate = Number(localStorage.getItem('adsDate') || 0); - if(!el.share) return + var ads; + var status = app.platform.sdk.localshares.status(share.txid); + if (self.app.localization.key === 'ru' && status !== 'saved' && status !== 'saving' && status !== 'paused' && share.settings.ads && adsDate < new Date().getTime()){ - if(!el.share.find('.showMore').length) renders.repost(); + const numWeeks = 3; + let weeks = new Date(); + weeks.setDate(weeks.getDate() + numWeeks * 7); + weeks = weeks.getTime(); + + localStorage.setItem('adsDate', weeks); + + ads = share.settings.ads; - actions.position(); + } - renders.urlContent(function () { + player = null; + + var initVideoClbk = function(ads){ + + renders.url(function () { if(!el.share) return - actions.position(); + if(!el.share.find('.showMore').length) renders.repost(); - if(ed.repost){ - actions.initVideoLight(); - } - else{ - actions.initVideo(); - } + actions.position(); - renders.images(function () { + renders.urlContent(function () { if(!el.share) return + actions.position(); + + if(ed.repost){ + actions.initVideoLight(function(res, next){ - if (!ed.repost) { + if (next){ + initVideoClbk(); + } + - actions.position(); + }, true); + } + else{ + actions.initVideo(function(res, next){ - el.share.find('.complain').on('click', events.complain); + if (next){ + initVideoClbk(); + } - el.share.on( - 'click', - '.imagePostOpent', - events.openGallery, - ); - el.share.on('click', '.forrepost', events.repost); + }, true); + } - el.share.find('.shareSave').on('click', events.shareSave); - el.share.find('.piptest').on('click', function(){ - - - }); + renders.images(function () { - el.share.find('.toregistration').on('click', events.toregistration) + if(!el.share) return - el.share.find('.txid').on('click', events.getTransaction); - el.share.find('.donate').on('click', events.donate); - - el.share - .find('.asubscribe') - .on('click', events.subscribe); - el.share - .find('.aunsubscribe') - .on('click', events.unsubscribe); - el.share.find('.metmenu').on('click', events.metmenu); - - - el.share - .find('.notificationturn') - .on('click', events.subscribePrivate); - } - el.share.find('.sharesocial').on('click', events.sharesocial); + if (!ed.repost) { - el.share.find('.postscoresshow').on('click', events.postscores); + actions.position(); - el.share.find('.postcontent').on('click', function(){ - $(this).addClass('allshowed') - }) + el.share.find('.complain').on('click', events.complain); - el.share.find('.openetc').on('click', function(){ - + el.share.on( + 'click', + '.imagePostOpent', + events.openGallery, + ); + el.share.on('click', '.forrepost', events.repost); - self.closeContainer() + el.share.find('.shareSave').on('click', events.shareSave); - self.nav.api.load({ - open : true, - href : 'post?s=' + $(this).attr('share'), - inWnd : true, - history : true + el.share.find('.piptest').on('click', function(){ + + + }); + + el.share.find('.toregistration').on('click', events.toregistration) + + el.share.find('.txid').on('click', events.getTransaction); + el.share.find('.donate').on('click', events.donate); + + el.share + .find('.asubscribe') + .on('click', events.subscribe); + el.share + .find('.aunsubscribe') + .on('click', events.unsubscribe); + el.share.find('.metmenu').on('click', events.metmenu); + + + el.share + .find('.notificationturn') + .on('click', events.subscribePrivate); + } + + el.share.find('.sharesocial').on('click', events.sharesocial); + + el.share.find('.postscoresshow').on('click', events.postscores); + + el.share.find('.postcontent').on('click', function(){ + $(this).addClass('allshowed') }) - }) - el.share.closest('.wndcontent').on('click', events.clickOut); + el.share.find('.openetc').on('click', function(){ + + + self.closeContainer() + + self.nav.api.load({ + open : true, + href : 'post?s=' + $(this).attr('share'), + inWnd : true, + history : true + }) + }) + + el.share.closest('.wndcontent').on('click', events.clickOut); + + if (clbk) clbk(); + }); - if (clbk) clbk(); }); - - }); - }); + el.c.find('.skip-ads').on('click', function(){ + + initVideoClbk(); + + }); + + }, ads); + + } + + initVideoClbk(ads); + + }); if (share.itisarticle()){ @@ -1663,7 +1714,7 @@ var post = (function () { ); } }, - url: function (clbk) { + url: function (clbk, ads) { var url = share.url; var og = self.app.platform.sdk.remote.storage[url]; @@ -1675,7 +1726,8 @@ var post = (function () { name: 'url', el: el.c.find('.url'), data: { - url: url, + url: ads || url, + ads: ads, og: og, share: share, fullplayer : !ed.repost @@ -1845,7 +1897,6 @@ var post = (function () { var initEvents = function () { - self.app.platform.matrixchat.clbks.SHOWING.post = function(v){ if(v && player){ diff --git a/components/share/index.css b/components/share/index.css index a15b38fa2f..a4e6f68609 100644 --- a/components/share/index.css +++ b/components/share/index.css @@ -49,6 +49,9 @@ background: rgb(var(--background-main)); box-shadow: none; } +#share .settingsWrapper .advCheckbox label { + padding-right: 1em; +} #share .settingsWrapper .visibilityWrapper .vc_valuecustom { width: auto; /*font-size: 0.8em; @@ -251,6 +254,28 @@ min-height: 78px; border-radius: 6px; } +#share .adsCheckboxWrapper { + margin-bottom: 0.5em; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5em; +} +#share .adsCheckboxWrapper .peertube-server-hint { + bottom: auto; +} +#share .adsCheckboxWrapper .adsCheckboxLabel { + font-weight: 600; + padding-right: 0.5em; +} +#share .adsVideo { + display: none; + position: relative; + margin-bottom: 3em; +} +#share .adsVideo.active { + display: block; +} #share .wallpaperUpload { margin-bottom: 0.5em; padding: 1em 0; @@ -972,6 +997,9 @@ html.mobileview .wnd.wndsharepost .wndcontent #share .absolutetxwrapper { #share .iconWrapper { display: none; } + #share .adsWrapper .adsCheckboxLabel { + padding-left: 0.5em; + } #share .cntwrk { margin-left: 0; padding-left: 0; diff --git a/components/share/index.js b/components/share/index.js index c4d65acd79..634043b15b 100644 --- a/components/share/index.js +++ b/components/share/index.js @@ -20,6 +20,8 @@ var share = (function(){ var clickOnCreateHappened = false; + var defaultAds = "peertube://peertube33.pocketnet.app/0344af51-ed23-4de7-bb18-6d2794d74fb0" + var loadedimages = {} var loadingimages = {} var player = null @@ -1741,6 +1743,7 @@ var share = (function(){ p.el.find('.cancelediting').on('click', function(){ + self.closeContainer(); if(external && external.cancel){ @@ -1793,19 +1796,20 @@ var share = (function(){ }) + + self.shell({ name : 'settings', el : el.settings, data : { share : currentShare, essenseData : essenseData, - selector : selector + selector : selector, }, }, function(p){ - ParametersLive([selector], p.el) - + ParametersLive([selector], p.el); selector._onChange = function(){ @@ -1925,7 +1929,6 @@ var share = (function(){ renders.repost(); - }); @@ -1999,7 +2002,6 @@ var share = (function(){ url : function(clbk){ - destroyPlayer() var url = currentShare.url.v; @@ -2023,7 +2025,6 @@ var share = (function(){ }, function(p){ - if(currentShare.url.v && !og){ if (meta.type == 'youtube' || meta.type == 'vimeo' || meta.type == 'bitchute' || meta.type == 'peertube' || meta.type == 'ipfs') { @@ -2134,6 +2135,10 @@ var share = (function(){ p.el.find('.removelink').on('click', events.removelink) + if (self.app.localization.key === 'ru'){ + renders.ads(); + } + if (clbk) clbk(); }) @@ -2148,6 +2153,61 @@ var share = (function(){ }, + ads : function(clbk){ + + destroyPlayer(); + + var og = self.app.platform.sdk.remote.storage[defaultAds]; + + var meta = self.app.platform.parseUrl(defaultAds); + + var videoWrapper = el.adsVideo.find('.videoWrapper'); + console.log('videoWrapper!!!', videoWrapper, el.adsVideo, currentShare); + + self.shell({ + name : 'url', + inner : html, + el : el.adsVideo, + data : { + url : currentShare.url.v, + og : og, + remove : true, + fullplayer : true, + share : currentShare, + video : true, + ads : defaultAds, + adsPreview : true + + } + + }, function(p){ + + + if (meta.type == 'youtube' || meta.type == 'vimeo' || meta.type == 'bitchute' || meta.type == 'peertube' || meta.type == 'ipfs') { + + destroyPlayer() + + Plyr.setup('#' + self.map.id + ' .adsVideo .js-player', function(_player) { + + player = _player + + try{ + player.muted = false + }catch(e){} + + }, { + denyPeertubeAutoPlay: true, + app : self.app + }); + + + } + + if (clbk) + clbk(); + }) + }, + images : function(clbk){ self.shell({ @@ -2397,13 +2457,23 @@ var share = (function(){ }, - body : function(clbk){ + body : function(clbk){ + + var checkbox = new Parameter({ + type : "BOOLEAN", + name : "Ads", + id : 'adsCheckbox', + value: Boolean(currentShare.settings.ads) + }) + + self.shell({ name : 'body', el : el.body, data : { share : currentShare, - ed : essenseData + ed : essenseData, + checkbox : checkbox }, @@ -2414,6 +2484,7 @@ var share = (function(){ el.message = el.c.find('.message'); el.eMessage = el.c.find('#emjcontainer'); el.urlWrapper = el.c.find('.urlWrapper') + el.adsVideo = el.c.find('.adsVideo'); el.caption = el.c.find('.captionshare'); el.cpt = el.c.find('.cpt') el.images = el.c.find('.imagesWrapper') @@ -2421,6 +2492,7 @@ var share = (function(){ el.updateWallpaperInput = el.c.find('.wallpaperShareInput'); el.wallpaperStatusIcon = el.c.find('.wallpaperStatusIcon'); + el.eMessage.emojioneArea({ pickerPosition : 'bottom', @@ -2541,6 +2613,30 @@ var share = (function(){ el.caption.on('keyup', events.caption) + ParametersLive([checkbox], p.el); + + checkbox._onChange = function(value){ + + var ads = ''; + if (value) ads = defaultAds; + + currentShare.settings.ads = ads; + + if (ads && !el.adsVideo.hasClass('active')){ + + // renders.ads(); + + el.adsVideo.addClass('active'); + + } else { + + el.adsVideo.removeClass('active'); + + } + + state.save() + } + renders.makesortable() actions.autoFilled() @@ -2785,7 +2881,7 @@ var share = (function(){ }, init : function(p){ - + loadedimages = {} loadingimages = {} @@ -2857,8 +2953,7 @@ var share = (function(){ wnd : { close : function(){ - - + if (essenseData.close){ essenseData.close() } diff --git a/components/share/index.less b/components/share/index.less index 32c1d18ce2..fab1fbc436 100644 --- a/components/share/index.less +++ b/components/share/index.less @@ -65,6 +65,13 @@ } .settingsWrapper{ + + .advCheckbox{ + label{ + padding-right: @rhythm * 2; + } + } + .visibilityWrapper{ .vc_valuecustom{ width: auto; @@ -324,6 +331,33 @@ } } + .adsCheckboxWrapper{ + margin-bottom: @rhythm; + display: flex; + justify-content: space-between; + align-items: center; + padding: @rhythm; + + .peertube-server-hint{ + bottom: auto; + } + + .adsCheckboxLabel{ + font-weight: 600; + padding-right: @rhythm; + } + } + + .adsVideo{ + display: none; + position: relative; + margin-bottom: @rhythm * 6; + + &.active{ + display: block; + } + } + .wallpaperUpload { margin-bottom: @rhythm; @@ -1274,6 +1308,10 @@ html.mobileview{ display: none; } + .adsWrapper .adsCheckboxLabel{ + padding-left: @rhythm; + } + .cntwrk{ margin-left: 0; padding-left : 0; diff --git a/components/share/templates/body.html b/components/share/templates/body.html index eb10ca45a8..dfca3af4ee 100644 --- a/components/share/templates/body.html +++ b/components/share/templates/body.html @@ -13,6 +13,23 @@