+
+
+
diff --git a/pandora/templates/mobile/index.html b/pandora/templates/mobile/index.html
new file mode 100644
index 000000000..5cda3d825
--- /dev/null
+++ b/pandora/templates/mobile/index.html
@@ -0,0 +1,45 @@
+{% load static sass_tags compress %}
+
+
+
+
+ {% if title %}
+
+
+ ${icon.play}
+
+
+ `
+ var toggleVideo = event => {
+ event.preventDefault()
+ event.stopPropagation()
+ if (that.paused) {
+ that.play()
+ } else {
+ that.pause()
+ }
+ }
+ async function toggleFullscreen(event) {
+ if (isIOS) {
+ return
+ }
+ event.preventDefault()
+ event.stopPropagation()
+ if (!document.fullscreenElement) {
+ that.classList.add('fullscreen')
+ if (that.webkitRequestFullscreen) {
+ await that.webkitRequestFullscreen()
+ } else {
+ await that.requestFullscreen()
+ }
+ console.log('entered fullscreen')
+ var failed = false
+ if (!screen.orientation.type.startsWith("landscape")) {
+ await screen.orientation.lock("landscape").catch(err => {
+ console.log('no luck with lock', err)
+ /*
+ document.querySelector('.error').innerHTML = '' + err
+ that.classList.remove('fullscreen')
+ document.exitFullscreen();
+ screen.orientation.unlock()
+ failed = true
+ */
+ })
+ }
+ if (that.paused && !failed) {
+ that.play()
+ }
+ } else {
+ that.classList.remove('fullscreen')
+ document.exitFullscreen();
+ screen.orientation.unlock()
+ }
+ }
+ var toggleSound = event => {
+ event.preventDefault()
+ event.stopPropagation()
+ if (that.muted()) {
+ that.muted(false)
+ } else {
+ that.muted(true)
+ }
+ }
+ var showControls
+ var toggleControls = event => {
+ if (self.controls.style.opacity == '0') {
+ event.preventDefault()
+ event.stopPropagation()
+ self.controls.style.opacity = '1'
+ showControls = setTimeout(() => {
+ self.controls.style.opacity = that.paused ? '1' : '0'
+ showControls = null
+ }, 3000)
+ } else {
+ self.controls.style.opacity = '0'
+ }
+ }
+ self.controls.addEventListener("mousemove", event => {
+ if (showControls) {
+ clearTimeout(showControls)
+ }
+ self.controls.style.opacity = '1'
+ showControls = setTimeout(() => {
+ self.controls.style.opacity = that.paused ? '1' : '0'
+ showControls = null
+ }, 3000)
+ })
+ self.controls.addEventListener("mouseleave", event => {
+ if (showControls) {
+ clearTimeout(showControls)
+ }
+ self.controls.style.opacity = that.paused ? '1' : '0'
+ showControls = null
+ })
+ self.controls.addEventListener("touchstart", toggleControls)
+ self.controls.querySelector('.toggle').addEventListener("click", toggleVideo)
+ self.controls.querySelector('.volume').addEventListener("click", toggleSound)
+ self.controls.querySelector('.fullscreen-btn').addEventListener("click", toggleFullscreen)
+ document.addEventListener('fullscreenchange', event => {
+ if (!document.fullscreenElement) {
+ screen.orientation.unlock()
+ that.classList.remove('fullscreen')
+ that.querySelector('.fullscreen-btn').innerHTML = icon.enterFullscreen
+ } else {
+ self.controls.querySelector('.fullscreen-btn').innerHTML = icon.exitFullscreen
+ }
+ })
+ that.append(self.controls)
+ }
+
+ function getVideoWidth() {
+ if (document.fullscreenElement) {
+ return ''
+ }
+ var av = that.querySelector('video.active')
+ return av ? av.getBoundingClientRect().width + 'px' : '100%'
+ }
+
+ var playOnLoad = false
+ var unblock = document.createElement("div")
+
+ that.addEventListener("requiresusergesture", event => {
+ unblock.style.position = "absolute"
+ unblock.style.width = '100%'
+ unblock.style.height = '100%'
+ unblock.style.backgroundImage = `url(${self.options.poster})`
+ unblock.style.zIndex = '1000'
+ unblock.style.backgroundPosition = "top left"
+ unblock.style.backgroundRepeat = "no-repeat"
+ unblock.style.backgroundSize = "cover"
+ unblock.style.display = 'flex'
+ unblock.classList.add('mx-controls')
+ unblock.classList.add('poster')
+ unblock.innerHTML = `
+
+ ${icon.mute}
+
+
+
+
+
+
+
+
+ ${isIOS || !self.options.aspectratio ? "" : icon.enterFullscreen}
+
+
+
+
+ `
+ self.controls.style.opacity = '0'
+ unblock.addEventListener("click", event => {
+ event.preventDefault()
+ event.stopPropagation()
+ playOnLoad = true
+ unblock.querySelector('.toggle').innerHTML = `
+ ${icon.play}
+ ${icon.loading}
+ `
+ }, {once: true})
+ that.append(unblock)
+ })
+ var loading = true
+ that.brightness(0)
+ that.addEventListener("loadedmetadata", event => {
+ //
+ })
+ that.addEventListener("seeked", event => {
+ if (loading) {
+ that.brightness(1)
+ loading = false
+ }
+ if (playOnLoad) {
+ playOnLoad = false
+ var toggle = self.controls.querySelector('.toggle')
+ toggle.title = 'Pause'
+ toggle.querySelector('div').innerHTML = icon.pause
+ self.controls.style.opacity = '0'
+ unblock.remove()
+ that.play()
+ }
+ })
+
+ var time = that.querySelector('.controls .time div'),
+ progress = that.querySelector('.controls .position .progress')
+ that.querySelector('.controls .position').addEventListener("click", event => {
+ var bar = event.target
+ while (bar && !bar.classList.contains('bar')) {
+ bar = bar.parentElement
+ }
+ if (bar && bar.classList.contains('bar')) {
+ event.preventDefault()
+ event.stopPropagation()
+ var rect = bar.getBoundingClientRect()
+ var x = event.clientX - rect.x
+ var percent = x / rect.width
+ var position = percent * self.options.duration
+ if (self.options.position) {
+ position += self.options.position
+ }
+ progress.style.width = (100 * percent) + '%'
+ that.currentTime(position)
+ }
+ })
+ that.addEventListener("timeupdate", event => {
+ var currentTime = that.currentTime(),
+ duration = self.options.duration
+ if (self.options.position) {
+ currentTime -= self.options.position
+ }
+ progress.style.width = (100 * currentTime / duration) + '%'
+ duration = formatDuration(duration)
+ currentTime = formatDuration(currentTime)
+ while (duration && duration.startsWith('00:')) {
+ duration = duration.slice(3)
+ }
+ currentTime = currentTime.slice(currentTime.length - duration.length)
+ time.innerText = `${currentTime} / ${duration}`
+
+ })
+
+ that.addEventListener("play", event => {
+ var toggle = self.controls.querySelector('.toggle')
+ toggle.title = 'Pause'
+ toggle.querySelector('div').innerHTML = icon.pause
+ self.controls.style.opacity = '0'
+ })
+ that.addEventListener("pause", event => {
+ var toggle = self.controls.querySelector('.toggle')
+ toggle.title = 'Play'
+ toggle.querySelector('div').innerHTML = icon.play
+ self.controls.style.opacity = '1'
+ })
+ that.addEventListener("ended", event => {
+ var toggle = self.controls.querySelector('.toggle')
+ toggle.title = 'Play'
+ toggle.querySelector('div').innerHTML = icon.play
+ self.controls.style.opacity = '1'
+ })
+ that.addEventListener("seeking", event => {
+ //console.log("seeking")
+
+ })
+ that.addEventListener("seeked", event => {
+ //console.log("seeked")
+ })
+ that.addEventListener("volumechange", event => {
+ var volume = self.controls.querySelector('.volume')
+ if (that.muted()) {
+ volume.innerHTML = icon.unmute
+ volume.title = "Unmute"
+ } else {
+ volume.innerHTML = icon.mute
+ volume.title = "Mute"
+ }
+ })
+ window.addEventListener('resize', event => {
+ //
+ })
+ return that
+};
+
+})();
diff --git a/static/mobile/js/api.js b/static/mobile/js/api.js
new file mode 100644
index 000000000..5e989597d
--- /dev/null
+++ b/static/mobile/js/api.js
@@ -0,0 +1,25 @@
+var pandora = {
+ format: getFormat(),
+ hostname: document.location.hostname || 'pad.ma'
+}
+
+var pandoraURL = document.location.hostname ? "" : `https://${pandora.hostname}`
+var cache = cache || {}
+
+async function pandoraAPI(action, data) {
+ var url = pandoraURL + '/api/'
+ var key = JSON.stringify([action, data])
+ if (!cache[key]) {
+ var response = await fetch(url, {
+ method: 'POST',
+ headers: {'Content-Type': 'application/json'},
+ body: JSON.stringify({
+ action: action,
+ data: data
+ })
+ })
+ cache[key] = await response.json()
+ }
+ return cache[key]
+}
+
diff --git a/static/mobile/js/documents.js b/static/mobile/js/documents.js
new file mode 100644
index 000000000..2d58b0ff5
--- /dev/null
+++ b/static/mobile/js/documents.js
@@ -0,0 +1,112 @@
+
+async function loadDocument(id, args) {
+ var data = window.data = {}
+ var parts = id.split('/')
+ data.id = parts.shift()
+ data.site = pandora.hostname
+
+ if (parts.length == 2) {
+ data.page = parts.shift()
+ }
+
+ if (parts.length == 1) {
+ var rect = parts[0].split(',')
+ if (rect.length == 1) {
+ data.page = parts[0]
+ } else {
+ data.crop = rect
+ }
+ } else if (parts.length == 2) {
+
+ }
+
+ var response = await pandoraAPI('getDocument', {
+ id: data.id,
+ keys: [
+ "id",
+ "title",
+ "extension",
+ "text",
+ ]
+ })
+ if (response.status.code != 200) {
+ return {
+ site: data.site,
+ error: response.status
+ }
+ }
+ data.document = response['data']
+ data.title = data.document.name
+ data.link = `${pandora.proto}://${data.site}/documents/${data.document.id}`
+ return data
+}
+
+async function renderDocument(data) {
+ if (data.error) {
+ return renderError(data)
+ }
+ div = document.createElement('div')
+ div.className = "content"
+ if (!data.document) {
+ div.innerHTML = `document not found
${data.document.title}
+
+ ${data.document.text}
+
+
+ `
+ div.querySelectorAll('.text a').forEach(a => {
+ a.addEventListener("click", clickLink)
+
+ })
+ } else if (data.document.extension == "pdf" && data.page && data.crop) {
+ var img = `${pandora.proto}://${data.site}/documents/${data.document.id}/1024p${data.page},${data.crop.join(',')}.jpg`
+ data.link = getLink(`documents/${data.document.id}/${data.page}`)
+ div.innerHTML = `
+ ${data.document.title}
+
+ 
+
+
+ Open pdf page
+
+ `
+ } else if (data.document.extension == "pdf") {
+ var page = data.page || 1,
+ file = encodeURIComponent(`/documents/${data.document.id}/${safeDocumentName(data.document.title)}.pdf`)
+ div.innerHTML = `
+ ${data.document.title}
+
+
+
+
+ `
+ } else if (data.document.extension == "jpg" || data.document.extension == "png") {
+ var img = `${pandora.proto}://${data.site}/documents/${data.document.id}/${safeDocumentName(data.document.title)}.${data.document.extension}`
+ var open_text = `Open on ${data.site}`
+ if (data.crop) {
+ img = `${pandora.proto}://${data.site}/documents/${data.document.id}/1024p${data.crop.join(',')}.jpg`
+ data.link = getLink(`documents/${data.document.id}`)
+ open_text = `Open image`
+ }
+ div.innerHTML = `
+ ${data.document.title}
+
+
+
+
+ ${open_text}
+
+ `
+
+ } else {
+ div.innerHTML = `unsupported document type`
+ }
+ document.querySelector(".content").replaceWith(div)
+}
diff --git a/static/mobile/js/edits.js b/static/mobile/js/edits.js
new file mode 100644
index 000000000..f23766ef4
--- /dev/null
+++ b/static/mobile/js/edits.js
@@ -0,0 +1,230 @@
+
+const getSortValue = function(value) {
+ var sortValue = value;
+ function trim(value) {
+ return value.replace(/^\W+(?=\w)/, '');
+ }
+ if (
+ isEmpty(value)
+ || isNull(value)
+ || isUndefined(value)
+ ) {
+ sortValue = null;
+ } else if (isString(value)) {
+ // make lowercase and remove leading non-word characters
+ sortValue = trim(value.toLowerCase());
+ // move leading articles to the end
+ // and remove leading non-word characters
+ ['a', 'an', 'the'].forEach(function(article) {
+ if (new RegExp('^' + article + ' ').test(sortValue)) {
+ sortValue = trim(sortValue.slice(article.length + 1))
+ + ', ' + sortValue.slice(0, article.length);
+ return false; // break
+ }
+ });
+ // remove thousand separators and pad numbers
+ sortValue = sortValue.replace(/(\d),(?=(\d{3}))/g, '$1')
+ .replace(/\d+/g, function(match) {
+ return match.padStart(64, '0')
+ });
+ }
+ return sortValue;
+};
+
+const sortByKey = function(array, by) {
+ return array.sort(function(a, b) {
+ var aValue, bValue, index = 0, key, ret = 0;
+ while (ret == 0 && index < by.length) {
+ key = by[index].key;
+ aValue = getSortValue(a[key])
+ bValue = getSortValue(b[key])
+ if ((aValue === null) != (bValue === null)) {
+ ret = aValue === null ? 1 : -1;
+ } else if (aValue < bValue) {
+ ret = by[index].operator == '+' ? -1 : 1;
+ } else if (aValue > bValue) {
+ ret = by[index].operator == '+' ? 1 : -1;
+ } else {
+ index++;
+ }
+ }
+ return ret;
+ });
+};
+
+async function sortClips(edit, sort) {
+ var key = sort.key, index;
+ if (key == 'position') {
+ key = 'in';
+ }
+ if ([
+ 'id', 'index', 'in', 'out', 'duration',
+ 'title', 'director', 'year', 'videoRatio'
+ ].indexOf(key) > -1) {
+ sortBy(sort);
+ index = 0;
+ edit.clips.forEach(function(clip) {
+ clip.sort = index++;
+ if (sort.operator == '-') {
+ clip.sort = -clip.sort;
+ }
+ });
+ } else {
+ var response = await pandoraAPI('sortClips', {
+ edit: edit.id,
+ sort: [sort]
+ })
+ edit.clips.forEach(function(clip) {
+ clip.sort = response.data.clips.indexOf(clip.id);
+ if (sort.operator == '-') {
+ clip.sort = -clip.sort;
+ }
+ });
+ sortBy({
+ key: 'sort',
+ operator: '+'
+ });
+ }
+ function sortBy(key) {
+ edit.clips = sortByKey(edit.clips, [key]);
+ }
+}
+
+async function loadEdit(id, args) {
+ var data = window.data = {}
+ data.id = id
+ data.site = pandora.hostname
+
+ var response = await pandoraAPI('getEdit', {
+ id: data.id,
+ keys: [
+ ]
+ })
+ if (response.status.code != 200) {
+ return {
+ site: data.site,
+ error: response.status
+ }
+ }
+ data.edit = response['data']
+ if (data.edit.status !== 'public') {
+ return {
+ site: data.site,
+ error: {
+ code: 403,
+ text: 'permission denied'
+ }
+ }
+ }
+ data.layers = {}
+ data.videos = []
+
+ if (args.sort) {
+ await sortClips(data.edit, args.sort)
+ }
+
+ data.edit.duration = 0;
+ data.edit.clips.forEach(function(clip) {
+ clip.position = data.edit.duration;
+ data.edit.duration += clip.duration;
+ });
+
+ data.edit.clips.forEach(clip => {
+ var start = clip['in'] || 0, end = clip.out, position = 0;
+ clip.durations.forEach((duration, idx) => {
+ if (!duration) {
+ return
+ }
+ if (position + duration <= start || position > end) {
+ // pass
+ } else {
+ var video = {}
+ var oshash = clip.streams[idx]
+ video.src = getVideoURL(clip.item, 480, idx+1, '', oshash)
+ /*
+ if (clip['in'] && clip.out) {
+ video.src += `#t=${clip['in']},${clip.out}`
+ }
+ */
+ if (isNumber(clip.volume)) {
+ video.volume = clip.volume;
+ }
+ if (
+ position <= start
+ && position + duration > start
+ ) {
+ video['in'] = start - position;
+ }
+ if (position + duration >= end) {
+ video.out = end - position;
+ }
+ if (video['in'] && video.out) {
+ video.duration = video.out - video['in']
+ } else if (video.out) {
+ video.duration = video.out;
+ } else if (!isUndefined(video['in'])) {
+ video.duration = duration - video['in'];
+ video.out = duration;
+ } else {
+ video.duration = duration;
+ video['in'] = 0;
+ video.out = video.duration;
+ }
+ data.videos.push(video)
+ }
+ position += duration
+ })
+ Object.keys(clip.layers).forEach(layer => {
+ data.layers[layer] = data.layers[layer] || []
+ clip.layers[layer].forEach(annotation => {
+ if (args.users && !args.users.includes(annotation.user)) {
+ return
+ }
+ if (args.layers && !args.layers.includes(layer)) {
+ return
+ }
+ var a = {...annotation}
+ a['id'] = clip['id'] + '/' + a['id'];
+ a['in'] = Math.max(
+ clip['position'],
+ a['in'] - clip['in'] + clip['position']
+ );
+ a.out = Math.min(
+ clip['position'] + clip['duration'],
+ a.out - clip['in'] + clip['position']
+ );
+ data.layers[layer].push(a)
+ })
+ })
+ })
+ var value = []
+ pandora.layerKeys.forEach(layer => {
+ if (!data.layers[layer]) {
+ return
+ }
+ var html = []
+ var layerData = getObjectById(pandora.site.layers, layer)
+ html.push(`+ ${icon.down} + ${layerData.title} +
`) + data.layers[layer].forEach(annotation => { + html.push(` +
+ ${annotation.value}
+
+ `)
+ })
+ value.push('' + html.join('\n') + '
')
+ })
+ data.value = value.join('\n')
+
+ data.title = data.edit.name
+ data.byline = data.edit.description
+ data.link = `${pandora.proto}://${data.site}/edits/${data.edit.id}`
+ data.poster = data.videos[0].src.split('/48')[0] + `/480p${data.videos[0].in}.jpg`
+ data.aspectratio = data.edit.clips[0].videoRatio
+ data.duration = data.edit.duration
+ return data
+
+}
diff --git a/static/mobile/js/icons.js b/static/mobile/js/icons.js
new file mode 100644
index 000000000..295a12fee
--- /dev/null
+++ b/static/mobile/js/icons.js
@@ -0,0 +1,182 @@
+var icon = {}
+icon.enterFullscreen = `
+
+`
+icon.exitFullscreen = `
+
+`
+
+icon.mute = `
+
+
+`
+
+icon.unmute = `
+
+
+`
+
+icon.play = `
+
+`
+icon.pause = `
+
+
+`
+icon.loading = `
+
+`
+
+icon.right = `
+
+`
+icon.left = `
+
+`
+icon.down = `
+
+`
diff --git a/static/mobile/js/item.js b/static/mobile/js/item.js
new file mode 100644
index 000000000..61463aa53
--- /dev/null
+++ b/static/mobile/js/item.js
@@ -0,0 +1,133 @@
+
+async function loadData(id, args) {
+ var data = window.data = {}
+ data.id = id
+ data.site = pandora.hostname
+
+ var response = await pandoraAPI('get', {
+ id: data.id.split('/')[0],
+ keys: [
+ "id",
+ "title",
+ "director",
+ "summary",
+ "streams",
+ "duration",
+ "durations",
+ "layers",
+ "rightslevel",
+ "videoRatio"
+ ]
+ })
+
+ if (response.status.code != 200) {
+ return {
+ site: data.site,
+ error: response.status
+ }
+ }
+ data.item = response['data']
+ if (data.item.rightslevel > pandora.site.capabilities.canPlayClips['guest']) {
+ return {
+ site: data.site,
+ error: {
+ code: 403,
+ text: 'permission denied'
+ }
+ }
+ }
+ if (id.split('/').length == 1 || id.split('/')[1] == 'info') {
+ data.view = 'info'
+ data.title = data.item.title
+ data.byline = data.item.director ? data.item.director.join(', ') : ''
+ data.link = `${pandora.proto}://${data.site}/${data.item.id}/info`
+ let poster = pandora.site.user.ui.icons == 'posters' ? 'poster' : 'icon'
+ data.icon = `${pandora.proto}://${data.site}/${data.item.id}/${poster}.jpg`
+ return data
+ }
+
+ if (id.includes('-') || id.includes(',')) {
+ var inout = id.split('/')[1].split(id.includes('-') ? '-' : ',').map(parseDuration)
+ data.out = inout.pop()
+ data['in'] = inout.pop()
+ } else if (args.full) {
+ data.out = data.item.duration
+ data['in'] = 0
+ } else {
+ var annotation = await pandoraAPI('getAnnotation', {
+ id: data.id,
+ })
+ if (annotation.status.code != 200) {
+ return {
+ site: data.site,
+ error: annotation.status
+ }
+ }
+ data.annotation = annotation['data']
+ data['in'] = data.annotation['in']
+ data.out = data.annotation['out']
+ }
+
+ data.layers = {}
+
+ pandora.layerKeys.forEach(layer => {
+ data.item.layers[layer].forEach(annot => {
+ if (data.annotation) {
+ if (annot.id == data.annotation.id) {
+ data.layers[layer] = data.layers[layer] || []
+ data["layers"][layer].push(annot)
+ }
+ } else if (annot['out'] > data['in'] && annot['in'] < data['out']) {
+ if (args.users && !args.users.includes(annot.user)) {
+ return
+ }
+ if (args.layers && !args.layers.includes(layer)) {
+ return
+ }
+ data.layers[layer] = data.layers[layer] || []
+ //annot['in'] = Math.max([annot['in'], data['in']])
+ //annot['out'] = Math.min([annot['out'], data['out']])
+ data["layers"][layer].push(annot)
+ }
+ })
+ })
+ data.videos = []
+ data.item.durations.forEach((duration, idx) => {
+ var oshash = data.item.streams[idx]
+ var url = getVideoURL(data.item.id, 480, idx+1, '', oshash)
+ data.videos.push({
+ src: url,
+ duration: duration
+ })
+ })
+ var value = []
+ Object.keys(data.layers).forEach(layer => {
+ var html = []
+ var layerData = getObjectById(pandora.site.layers, layer)
+ html.push(`+ ${icon.down} + ${layerData.title} +
`) + data.layers[layer].forEach(annotation => { + html.push(` +
+ ${annotation.value}
+
+ `)
+ })
+ value.push('' + html.join('\n') + '
')
+ })
+ data.value = value.join('\n')
+
+ data.title = data.item.title
+ data.byline = data.item.director ? data.item.director.join(', ') : ''
+ data.link = `${pandora.proto}://${data.site}/${data.item.id}/${data["in"]},${data.out}`
+ data.poster = `${pandora.proto}://${data.site}/${data.item.id}/480p${data["in"]}.jpg`
+ data.aspectratio = data.item.videoRatio
+ if (data['in'] == data['out']) {
+ data['out'] += 0.04
+ }
+ data.duration = data.out - data['in']
+ return data
+}
+
diff --git a/static/mobile/js/main.js b/static/mobile/js/main.js
new file mode 100644
index 000000000..c69a9f797
--- /dev/null
+++ b/static/mobile/js/main.js
@@ -0,0 +1,129 @@
+
+
+function parseURL() {
+ var fragment = document.location.hash.slice(1)
+ if (!fragment && document.location.pathname.startsWith('/m/')) {
+ var prefix = document.location.protocol + '//' + document.location.hostname + '/m/'
+ fragment = document.location.href.slice(prefix.length)
+ }
+ var args = fragment.split('?')
+ var id = args.shift()
+ if (args) {
+ args = args.join('?').split('&').map(arg => {
+ var kv = arg.split('=')
+ k = kv.shift()
+ v = kv.join('=')
+ if (['users', 'layers'].includes(k)) {
+ v = v.split(',')
+ }
+ return [k, v]
+ }).filter(kv => {
+ return kv[0].length
+ })
+ if (args) {
+ args = Object.fromEntries(args);
+ } else {
+ args = {}
+ }
+ } else {
+ args = {}
+ }
+ var type = "item"
+ if (id.startsWith('document')) {
+ id = id.split('/')
+ id.shift()
+ id = id.join('/')
+ type = "document"
+ } else if (id.startsWith('edits/')) {
+ var parts = id.split('/')
+ parts.shift()
+ id = parts.shift().replace(/_/g, ' ')
+ type = "edit"
+ if (parts.length >= 2) {
+ args.sort = parts[1]
+ if (args.sort[0] == '-') {
+ args.sort = {
+ key: args.sort.slice(1),
+ operator: '-'
+ }
+ } else if (args.sort[0] == '+') {
+ args.sort = {
+ key: args.sort.slice(1),
+ operator: '+'
+ }
+ } else {
+ args.sort = {
+ key: args.sort,
+ operator: '+'
+ }
+ }
+ }
+ args.parts = parts
+ } else {
+ if (id.endsWith('/player') || id.endsWith('/editor')) {
+ args.full = true
+ }
+ id = id.replace('/editor/', '/').replace('/player/', '/')
+ type = "item"
+ }
+ return [type, id, args]
+}
+
+function render() {
+ var type, id, args;
+ [type, id, args] = parseURL()
+ document.querySelector(".content").innerHTML = loadingScreen
+ if (type == "document") {
+ loadDocument(id, args).then(renderDocument)
+ } else if (type == "edit") {
+ loadEdit(id, args).then(renderItem)
+ } else {
+ loadData(id, args).then(renderItem)
+ }
+
+}
+var loadingScreen = `
+
+ ${icon.loading}
+`
+
+document.querySelector(".content").innerHTML = loadingScreen
+pandoraAPI("init").then(response => {
+ pandora = {
+ ...pandora,
+ ...response.data
+ }
+ pandora.proto = pandora.site.site.https ? 'https' : 'http'
+ if (pandora.site.site.videoprefix.startsWith('//')) {
+ pandora.site.site.videoprefix = pandora.proto + ':' + pandora.site.site.videoprefix
+ }
+ var layerKeys = []
+ var subtitleLayer = pandora.site.layers.filter(layer => {return layer.isSubtitles})[0]
+ if (subtitleLayer) {
+ layerKeys.push(subtitleLayer.id)
+ }
+ pandora.site.layers.map(layer => {
+ return layer.id
+ }).filter(layer => {
+ return !subtitleLayer || layer != subtitleLayer.id
+ }).forEach(layer => {
+ layerKeys.push(layer)
+ })
+ pandora.layerKeys = layerKeys
+ id = document.location.hash.slice(1)
+ window.addEventListener("hashchange", event => {
+ render()
+ })
+ window.addEventListener("popstate", event => {
+ console.log("popsatte")
+ render()
+ })
+ window.addEventListener('resize', event => {
+ })
+ render()
+})
diff --git a/static/mobile/js/render.js b/static/mobile/js/render.js
new file mode 100644
index 000000000..a7519342b
--- /dev/null
+++ b/static/mobile/js/render.js
@@ -0,0 +1,120 @@
+
+function renderItemInfo(data) {
+ div = document.createElement('div')
+ div.className = "content"
+ div.innerHTML = `
+ ${data.title}
+
+ ${data.title}
+
+
+
+
+ ${data.value}
+
+ `
+ var comments = `
+
+ Page not found
+ Open on ${data.site} +
+ `
+ document.querySelector(".content").replaceWith(div)
+}
diff --git a/static/mobile/js/utils.js b/static/mobile/js/utils.js
new file mode 100644
index 000000000..d77024f1a
--- /dev/null
+++ b/static/mobile/js/utils.js
@@ -0,0 +1,160 @@
+
+const parseDuration = function(string) {
+ return string.split(':').reverse().slice(0, 4).reduce(function(p, c, i) {
+ return p + (parseFloat(c) || 0) * (i == 3 ? 86400 : Math.pow(60, i));
+ }, 0);
+};
+
+const formatDuration = function(seconds) {
+ var parts = [
+ parseInt(seconds / 86400),
+ parseInt(seconds % 86400 / 3600),
+ parseInt(seconds % 3600 / 60),
+ s = parseInt(seconds % 60)
+ ]
+ return parts.map(p => { return p.toString().padStart(2, '0')}).join(':')
+}
+
+const typeOf = function(value) {
+ return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
+};
+const isUndefined = function(value) {
+ return typeOf(value) == 'undefined';
+}
+const isNumber = function(value) {
+ return typeOf(value) == 'number';
+};
+const isObject = function(value) {
+ return typeOf(value) == 'object';
+};
+const isNull = function(value) {
+ return typeOf(value) == 'null';
+};
+const isString = function(value) {
+ return typeOf(value) == 'string';
+};
+const isEmpty = function(value) {
+ var type = typeOf(value)
+ if (['arguments', 'array', 'nodelist', 'string'].includes(value)) {
+ return value.length == 0
+ }
+ if (['object', 'storage'].includes(type)) {
+ return Object.keys(value).length;
+ }
+ return false
+};
+const mod = function(number, by) {
+ return (number % by + by) % by;
+};
+
+const getObjectById = function(array, id) {
+ return array.filter(obj => { return obj.id == id})[0]
+}
+
+const debug = function() {
+ if (localStorage.debug) {
+ console.log.apply(null, arguments)
+ }
+};
+
+const canPlayMP4 = function() {
+ var video = document.createElement('video');
+ if (video.canPlayType && video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace('no', '')) {
+ return true
+ }
+ return false
+};
+
+const canPlayWebm = function() {
+ var video = document.createElement('video');
+ if (video.canPlayType && video.canPlayType('video/webm; codecs="vp8, vorbis"').replace('no', '')) {
+ return true
+ }
+ return false
+};
+
+const getFormat = function() {
+ //var format = canPlayWebm() ? "webm" : "mp4"
+ var format = canPlayMP4() ? "mp4" : "webm"
+ return format
+}
+
+const safeDocumentName = function(name) {
+ ['\\?', '#', '%', '/'].forEach(function(c) {
+ var r = new RegExp(c, 'g')
+ name = name.replace(r, '_');
+ })
+ return name;
+};
+
+const getVideoInfo = function() {
+ console.log("FIXME implement getvideoInfo")
+}
+
+const isIOS = /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
+
+
+const getLink = function(fragment) {
+ if (document.location.hash.length > 2) {
+ return '#' + fragment
+ } else {
+ return '/m/' + fragment
+ }
+}
+
+const clickLink = function(event) {
+ var a = event.target
+ while (a && a.tagName != 'A') {
+ a = a.parentElement
+ }
+ if (!a) {
+ return
+ }
+ var href = a.attributes.href.value
+ var prefix = document.location.protocol + '//' + document.location.hostname
+ if (href.startsWith(prefix)) {
+ href = href.slice(prefix.length)
+ }
+ if (href.startsWith('/')) {
+ event.preventDefault()
+ event.stopPropagation()
+ var link = href.split('#embed')[0]
+ if (document.location.hash.length > 2) {
+ if (link.startsWith('/m')) {
+ link = link.slice(2)
+ }
+ document.location.hash = '#' + link.slice(1)
+ } else {
+ if (!link.startsWith('/m')) {
+ link = '/m' + link
+ }
+ history.pushState({}, '', link);
+ render()
+ }
+ }
+}
+
+const getUid = (function() {
+ var uid = 0;
+ return function() {
+ return ++uid;
+ };
+}());
+
+
+const getVideoURLName = function(id, resolution, part, track, streamId) {
+ return id + '/' + resolution + 'p' + part + (track ? '.' + track : '')
+ + '.' + pandora.format + (streamId ? '?' + streamId : '');
+};
+
+const getVideoURL = function(id, resolution, part, track, streamId) {
+ var uid = getUid(),
+ prefix = pandora.site.site.videoprefix
+ .replace('{id}', id)
+ .replace('{part}', part)
+ .replace('{resolution}', resolution)
+ .replace('{uid}', uid)
+ .replace('{uid42}', uid % 42);
+ return prefix + '/' + getVideoURLName(id, resolution, part, track, streamId);
+};
+
diff --git a/update.py b/update.py
index 2cc118f69..5cf0dfcad 100755
--- a/update.py
+++ b/update.py
@@ -303,6 +303,8 @@ if __name__ == "__main__":
run('./bin/pip', 'install', 'yt-dlp>=2022.3.8.2')
if old < 6465:
run('./bin/pip', 'install', '-r', 'requirements.txt')
+ if old < 6507:
+ run('./bin/pip', 'install', '-r', 'requirements.txt')
else:
if len(sys.argv) == 1:
branch = get_branch()
+ Open on ${data.site} +
+