@widgetic/editor 3.10.33 → 3.10.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widgetic/editor",
-  "version": "3.10.33",
+  "version": "3.10.38",
   "scripts": {
     "start": "webpack --config webpack.config.js --watch --progress",
     "build": "webpack --config webpack.config.js",
@@ -65,7 +65,8 @@
   },
   "dependencies": {
     "http-server": "^0.11.1",
-    "json-logic-js": "^1.2.2"
+    "json-logic-js": "^1.2.2",
+    "soundcloud": "^3.3.2"
   },
   "volta": {
     "node": "12.22.2"

package/src/browser/controller/index.coffee

@@ -48,10 +48,14 @@ class Browser extends Controller
 
 	constructor: ->
 		super
-
+		# console.log("Default Browser CTR:", @Service, @title, @options)
 		@service = new @Service @title, @options
 		@serviceTitle or= @service.title
-		@delay => @tab.count @content.length
+		
+		# show how many content items the user has selected on this source
+		@currentContent = []
+		# @delay => @tab.count @content.length
+		
 
 		@addNavBar()
 		@intent = $ Intent @service.options
@@ -86,10 +90,21 @@ class Browser extends Controller
 	Auth request and event handler
 	###
 	auth: (e) ->
+		# console.log("Default browser auth:", e)
 		return if String(@el.attr 'authenticated') is 'true'
 		@service.auth e?.type is 'click'
 
 	onAuth: (@authenticated) =>
+		# console.log("Default browser onAuth:", @authenticated)
+		# reset lists of content
+		@currentContent = []
+
+		# show currentSource count
+		if @authenticated then @updateCurrentCount() 
+		# clear current content count
+		else 
+			@tab.count 0
+
 		@el.attr {@authenticated}
 		@setFolder @service.root if @authenticated
 		@$trigger "editor:browser:auth", service: @Service.name, authenticated: (@authenticated is true)
@@ -120,30 +135,78 @@ class Browser extends Controller
 		@refreshing = true
 		@setFolder(@currentFolder) if @currentFolder
 
+	# update the current authenticated user's selected items count
+	updateCurrentCount: =>
+		# console.log("Update count:", @content, @currentContent)
+		@tab.count @content.filter((a) => @currentContent.some((b) => a.id == b.id)).length
+
 	onFolderRefresh: (children, opts = {}) =>
-		if opts.hard
-			@empty().$addClass 'loading'
+		# console.log("onFolderRefresh:", children, opts.root)
+
+		# on first root folder refresh: get entire list of content update selected items count
+		if opts.root
+			# console.log("onFolderRefresh update count:", children, opts.root, @service)
+
+			# reset lists of content
+			rootChildren = []
+			subfoldersChildren = []
+
+			# create the list of "root subfolders files" and the list of "root files"
+			children.map((child) =>
+				if child.type == "folder" then subfoldersChildren = subfoldersChildren.concat(child.children.map((subChild) => @service.newEntry('audio', subChild, child.id)))
+				else rootChildren.push(child)
+			)
+			# console.log("on Root refresh:", rootChildren, subfoldersChildren)
+
+			# if loading subfolders children for the first time
+			if subfoldersChildren.length && !@currentContent.length
+				# console.log("LOAD SUBFOLDERS FILES!")
+				@currentContent = @currentContent.concat(subfoldersChildren)
+
+			# if loading files children: filter those that are already in currentContent(that are subfoldersFiles)
+			if rootChildren.length
+				# console.log("LOAD ROOT FILES:", rootChildren)
+				children = rootChildren = rootChildren.filter((child) => !@currentContent.some((subChild) => subChild.id == child.id));
+				@currentContent = @currentContent.concat(rootChildren)
+
+			# console.log("on Root refresh:", @content, @currentContent);
+
+			# show currentSource count
+			@updateCurrentCount()
+
+		# clear empty children in current folder
+		if opts.hard then @empty().$addClass 'loading'
+		
+		# turn refreshing off
 		@refreshing = false
 
+		# hide loader
 		@$removeClass('loading')
+
+		# save the new children in current folder's array
 		@currentFolder.children = @currentFolder.children.concat children
 		# children = @children()
 
+		# show no item icon if no children
 		@el.toggleClass 'no-items', !children.length and !@children().length
-		# append the child when it isnt hidden
+
+		# append the new children when they are not hidden to the browser canvas
 		for item in children when not /^\.[^\.]/.test item.name
+			# prepare options
 			opts=
 				item        : item
 				getPreview  : (item) => @service.preview item
 				getURL      : (item, _c) => @service.getURL item, _c
 				count       : @getContentItemsInFolder(item) if isFolder = item.type is 'folder'
 				selected    : !!@content.filter((i)-> i.path is item.path).length unless isFolder
-
+			# create controller
 			controller = new Controllers[item.type] opts
 			@append controller
 			@listenTo controller, 'select', @setFolder if item.type is 'folder'
 
 		# children.forEach (child) -> child.release()
+
+		# update scroll and start lazy load
 		@scroll().update()
 		@lazyLoad()
 
@@ -189,17 +252,21 @@ class Browser extends Controller
 	addEntry: (item) ->
 		itm = it for it in @content when it.path is item.path
 		return if @content.indexOf(itm) isnt -1
-		@tab.count @content.push item
+		@content.push item
+		# show currentSource count
+		@updateCurrentCount()
 
 	removeEntry: (item) ->
 		itm = it for it in @content when it.path is item.path
 		@content.splice @content.indexOf(itm), 1
-		@tab.count @content.length
+		# show currentSource count
+		@updateCurrentCount()
 
 		for child in @children() when child.item.type in ['folder', 'button'] or child.isActive?()
 			child.update @getOptions child.item
 
 	recount: ->
+		# console.log("Default Browser recount:", @children())
 		child.update @getOptions child.item for child in @children()
 
 	getOptions: (item) =>

package/src/core/services/content.js

@@ -26,13 +26,18 @@ export default class ContentServiceWithEvents extends EventsMixin(Service) {
   }
 
   toggleItem(composition, service, id, value, extra = {}, metadata = {}) {
+    
     const item = this.getItemsByService(service)
       .filter(item => item.metadata.id === id)
       .pop();
+    // console.log("Content toggleItem:", id, item)
 
+    // remove item
     if (item) {
       item.destroy();
-    } else {
+    } 
+    // add item
+    else {
       this.addItem(
         composition,
         value,

package/src/core/services/uploads.js

@@ -30,7 +30,7 @@ export default class UploadService extends EventsMixin(Service) {
   constructor(user, token) {
     super();
     this.user = user.id;
-    this.maxFilesize = user.premium ? 100 : 25;
+    this.maxFilesize = user.premium ? 250 : 100;
     this.token = token;
 
     this.files = [];

package/src/editor/content/index.coffee

@@ -69,35 +69,44 @@ class Content extends Tabs
     @meta = @composition.contentMeta()
     @browserOptions = @meta.browser?.options
 
-
+    # add browser for the upload source
     @addBrowser UploadBrowser
 
+    # read other sources and filter the ones that don't work anymore
     sources = @meta.browser?.sources
-    # console.log("content editor:", sources);
+    # console.log('Editor Content sources:', sources);
     if sources
+      delete sources.facebook
       delete sources.websearch
       delete sources.blogvio
       delete sources.dropbox
       delete sources.flickr
       delete sources["google-drive"]
 
+    # add a browser(legacy) for all alternative source
     @legacyAddBrowser source, key for key, source of sources
 
+    # add a browser(legacy) for the direct-input source
     if @meta.input
       @append @input = new DirectInput {control:@meta.input, @composition}
       @browsers['input'] = @input
       @listenTo @input, 'canAdd', @contentCanAdd
+    
+    # console.log('Editor Content @browsers:', @browsers)
 
+    # add content listeners
     @listenTo ContentModel, 'destroy', @onItemDestroy
     @listenTo ContentModel, 'update', @_onItemUpdate
     @listenTo ContentModel, 'create', @_onItemCreate
     @listenTo ContentModel, 'change', => @el.toggleClass 'has-reached-max', @composition.maxContentReached()
 
+    # activate the first tab
     @children()[0].active()
 
     @trigger 'initialized'
 
   addBrowser: (Browser) =>
+    # console.log("addBrowser:", Browser)
     return unless Browser.isCompatible @browserOptions?.types
     browser = new Browser { filetypes: @browserOptions?.types }
 
@@ -140,6 +149,7 @@ class Content extends Tabs
     Service = window.require service.module or 'editor/content/service/default'
     content = @composition.getContent().filter((i)->i.metadata?.service is serviceName).map((i)->i.metadata)
     Browser = window.require service.browser or Service.browser
+    # console.log("legacyAddBrowser:", Browser, Service, content)
 
     @browsers[serviceName] = browser = new Browser
       content: content
@@ -186,7 +196,7 @@ class Content extends Tabs
   # TODO: use Content service
   ###
   contentAdd: (item) =>
-    # console.log("Editor Content Tab onContentAdded:", item);
+    # console.log('Editor Content Tab onContentAdded:', item);
     props= {}
     props[attr] = item[attr] for attr, opts of @meta.attributes when item[attr]?
     props.metadata = item
@@ -203,10 +213,13 @@ class Content extends Tabs
   TODO: use Content service
   ###
   contentRemove: (item) =>
+    
     @stopListening ContentModel, 'destroy', @onItemDestroy
     removedContent = ContentModel.all().filter((i) =>
-      i.metadata is item and i.composition_id is @composition.id
+      # console.log("contentRemove filter:", i)
+      i.metadata?.id is item.id and i.composition_id is @composition.id
     )
+    # console.log('Editor Content contentRemove:', item, ContentModel.all(), removedContent)
     removedContent[0]?.destroy()
     @listenTo ContentModel, 'destroy', @onItemDestroy
 

package/src/editor/content/service/instagram-social.coffee

@@ -38,6 +38,7 @@ class InstagramService extends Service
 
 	_auth: (interactive=true) ->
 		# console.log("Editor ISTG service _auth method:", interactive, api);
+		# if authenticated get user info to show it in the browser
 		if api.token?
 			@getUser(api.token)
 				.then (result) =>
@@ -48,6 +49,7 @@ class InstagramService extends Service
 					# console.log("Editor getUser error:", error)
 					@deauth()
 		# console.log("Editor INSTG service _auth method:", interactive, api);
+		# if not authenticated open popup
 		!@authenticated and interactive and @showAuthPopup()
 
 	showAuthPopup: ->

package/src/editor/content/service/instagram.coffee

@@ -45,6 +45,7 @@ class InstagramService extends Service
 
 	_auth: (interactive=true) ->
 		# console.log("Editor INSTG service _auth method:", interactive, api);
+		# if authenticated get user info to show it in the browser
 		if api.token?
 			@getUser(api.token)
 				.then (result) => 
@@ -57,6 +58,7 @@ class InstagramService extends Service
 					@deauth()
 		
 		# console.log("Editor INSTG service _auth method:", interactive, api);
+		# if not authenticated open popup
 		!@authenticated and interactive and @showAuthPopup()
 
 	showAuthPopup: ->

package/src/editor/content/service/soundcloud.coffee

@@ -1,49 +1,163 @@
 Service = require '../../../browser/model'
 Entry   = require '../../../browser/model/entry'
-SC      = require '../../../core/services/soundcloud'
+
+# SoundCloud config
+widgetic_backend_url = 'https://widgetic.com/wservices/soundcloud/'
+SC = require('soundcloud')
+config = {
+	api_url: 'https://api.soundcloud.com'
+	# for '/connect' endpoint
+	client_id :  'aed0aa63baf747a83ad0b6b246acddca'
+	# client_secret: '3173e3098379153d42084aba06fe3ec4',
+	redirect_uri: widgetic_backend_url + 'connect',
+	tracks_url:   widgetic_backend_url + 'tracks',
+	# response_type: 'code',
+
+	# for '/oauth2/token' endpoint
+	grant_type: 'refresh_token',
+}
+SC.initialize(config);
+
+# add local config options used in this file only
+SC.client_id = config.client_id
+SC.api_url = config.api_url
+SC.tracks_url = config.tracks_url
+try SC.auth_token = localStorage.getItem 'soundcloudAuthToken'
+try SC.userId = localStorage.getItem 'soundcloudUserId'
 
 class SoundCloudService extends Service
 	constructor: ->
 		super
-		@authenticated = false
+		# console.log('Soundcloud Service CTR:', @title, @options)
+	
+	SCGet: (path) ->
+		url = "#{SC.api_url}" + path
+		# console.log("SCGet path:", path, SC.auth_token)
+		$.ajax(url: url, type: 'GET', dataType: 'json', headers: {'Authorization': 'OAuth ' + SC.auth_token})
+
+	auth: (interactive) => 
+		# console.log("SoundCloud on auth:", SC.auth_token, SC.userId);
+
+		# show popup to authenticate
+		if !SC.userId and interactive then @showAuthPopup()
 
-	auth: (interactive) => SC.ready().then =>
-		SC.connect @checkAuth if interactive
-		@checkAuth()
+		# trigger auth event to show folders or connect button in browser
+		else @checkAuth()
+
+	showAuthPopup: ->
+		# console.log("SC showAuthPopup:", SC)
+		SC.connect()
+			.then((response) =>
+				# console.log("SC did connect:", response);
+				# get auth_token
+				SC.auth_token = response.oauth_token
+				try localStorage.setItem 'soundcloudAuthToken', SC.auth_token
+				# console.log("SC did connect:", SC);
+
+				# get user info
+				@SCGet("/me")
+					.then((response) => 
+						# console.log("SC getUser result:", response)
+						SC.userId = response.id
+						try localStorage.setItem 'soundcloudUserId', SC.userId
+						@checkAuth();
+					).catch (error) => 
+						console.log("Editor getUser error:", error)
+						@deauth()
+			).catch (error) =>
+				console.log 'SC Connect Error: ' + error.message
+				@deauth()
 
 	checkAuth: =>
-		@trigger 'auth', @authenticated = SC.isConnected()
+		# console.log 'checkAuth:', SC.userId
+		@trigger 'auth', SC.userId != null
+
+	deauth: ->
+		# remove auth_token
+		SC.auth_token = null
+		try localStorage.removeItem 'soundcloudAuthToken'
 
+		# remove user
+		SC.userId = null
+		try localStorage.removeItem 'soundcloudUserId'
+
+		# trigger auth event
+		@checkAuth();
+
+	# SoundCloud Files explorer methods
 	refresh: (@currentFolder) ->
-		@fetchPlaylists() if @currentFolder.root
-		@fetchTracks @currentFolder.id
+		# console.log("Soundcloud service refresh:", @currentFolder)
+		# if root folder: load subfolders(playlists) and then files
+		if @currentFolder.root then @fetchPlaylists()
+
+		# if subfolder: load files(tracks) inside
+		else @fetchTracks @currentFolder.id
 
 	fetchPlaylists: =>
-		SC.get '/me/playlists', (playlists) =>
-			@trigger 'refresh', playlists.map @newEntry.bind @, 'folder'
+		# console.log("fetchPlaylists!");
+		@SCGet("/users/#{SC.userId}/playlists")
+				.then((playlists) => 
+					# console.log("fetchPlaylists result:", playlists);
+
+					# trigger refresh event to show in browser the playlists folders
+					@trigger 'refresh', (playlists.map @newEntry.bind @, 'folder'), {root: true}
+
+					# load tracks of root folder
+					@fetchTracks @currentFolder.id
+				).catch (error) => 
+					console.log 'Fetch Playlist error: ' + error.message
 
-	fetchTracks: (id) =>
-		path = if id then "/playlists/#{id}" else '/me'
+	fetchTracks: (playlistId) =>
+		# console.log("fetchTracks for playlist:", playlistId)
+		# check if a playlist or entire list of tracks of the current user
+		path = if playlistId then "/playlists/#{playlistId}" else "/users/#{SC.userId}/tracks"
+		path += "?access=playable"
+		
 
-		SC.get path+'/tracks', (tracks) =>
-			@trigger 'refresh', tracks.map @newEntry.bind @, 'audio'
+		@SCGet(path)
+				.then((result) =>
+					# console.log("fetchTracks result:", result)
 
-	newEntry: (type, item) =>
-		path = @currentFolder.path
-		path += '/' unless @currentFolder.root
+					# if root then read directly the tracks
+					tracks = result
+
+					# if a playlist then get the tracks inside
+					if result.tracks then tracks = result.tracks
+
+					# trigger event to refresh in browser
+					@trigger 'refresh', (tracks.map((track) => @newEntry('audio', track))), {root: (if playlistId then false else true)}
+				).catch (error) => 
+					console.log 'Fetch Tracks error: ' + error.message
+
+	newEntry: (type, item, parentId) =>
+		# console.log("newEntry:", type, item, parentId)
+		if !parentId
+			path = @currentFolder.path
+			path += '/' unless @currentFolder.root
+		else path = parentId + '/'
 		path += item.id
+		# console.log("newEntry:", path, item.id, type)
+		if type == "folder" then children = item.tracks
 		{artwork_url, id, duration, title, stream_url} = item
 		new Entry $.extend {}, {
 			service: @
-			type, path, artwork_url, id, duration, title, stream_url
+			type, path, artwork_url, id, children, duration: duration/1000, title, stream_url
 			name: item.title
 		}
 
 	getURL: (entry, callback) ->
-		callback "#{entry.stream_url}?client_id=#{SC.clientId()}"
+		# old method
+		# callback "#{entry.stream_url}?client_id=#{SC.client_id}"
 
-	deauth: ->
-		SC.disconnect()
-		@trigger 'auth', @authenticated = SC.isConnected()
+		# new 2021 api track path through widgetic endpoint
+		callback "#{SC.tracks_url}?id=#{entry.id}&atoken=#{SC.auth_token}"
+		
+		# new 2021 api get method
+		# @SCGet("/tracks/#{entry.id}/streams")
+		# 		.done((streams) => 
+		# 			console.log("fetchTrackStreams result:", streams);
+		# 			# callback streams.http_mp3_128_url
+		# 		).fail (error) => 
+		# 			console.log 'Fetch Track Streams error: ' + error
 
 module.exports = SoundCloudService

package/src/core/services/soundcloud.coffee

@@ -1,34 +0,0 @@
-client_id     = 'aed0aa63baf747a83ad0b6b246acddca'
-redirect_uri  = "#{window.location.origin}/connect/soundcloud"
-response_type = 'code'
-
-lsAuthKey = 'wdtc-sc-at'
-loadSDK = -> $.getScript "//connect.soundcloud.com/sdk/sdk-3.2.2.js"
-
-initPromise = null
-initSDK = ->
-	console.log("SC initSDK");
-	initPromise or= loadSDK().then( -> 
-		console.log("SC loadSDK callback:", SC);
-		SC.initialize {client_id, redirect_uri, response_type}
-		).then ->
-			callSC = (method, args...) -> SC[method] args...
-			for own key, _ of SC when !sdk[key] and typeof SC[key] is 'function'
-				sdk[key] = callSC.bind SC, key
-			console.log("SC initialize callback:", localStorage.getItem lsAuthKey)
-
-			# SC.accessToken key if (key = localStorage.getItem lsAuthKey)?
-
-module.exports = sdk = 
-	ready: initSDK
-
-	connect: (callback) ->
-		SC.connect ->
-			# localStorage.setItem lsAuthKey, SC.accessToken()
-			callback()
-
-	disconnect: ->
-		SC.disconnect()
-		localStorage.removeItem lsAuthKey
-
-	clientId: -> client_id