Skip to content

Commit

Permalink
Merge pull request #81 from quaternionmedia/RenderPage
Browse files Browse the repository at this point in the history 
🪄 Redesign Renders Page
  • Loading branch information
@mrharpo
mrharpo authored Aug 14, 2022
2 parents 6ee6db8 + 54d8fa1 commit e201fc7
Show file tree
Hide file tree
Showing 6 changed files with 339 additions and 131 deletions.
306 changes: 190 additions & 116 deletions website/src/Renders.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,88 +4,115 @@ import { auth } from './Login'
import { success, error, message, prompt } from 'alertifyjs'
import { downloadFile } from './Tools'
import '../node_modules/material-design-icons-iconfont/dist/material-design-icons.css'
var Stream = require("mithril/stream")
import './styles/renders.scss'
import './styles/tables.scss'

var Stream = require('mithril/stream')

function tsToDate(ts) {
let date = new Date(ts.substr(0,4), ts.substr(4,2) - 1, ts.substr(6, 2), ts.substr(9, 2), ts.substr(11, 2) , ts.substr(13, 2))
let date = new Date(
ts.substr(0, 4),
ts.substr(4, 2) - 1,
ts.substr(6, 2),
ts.substr(9, 2),
ts.substr(11, 2),
ts.substr(13, 2)
)
return date
}

function timeDelta(date) {
let now = new Date()
let delta = (now - date)/1000
let delta = (now - date) / 1000
let days = Math.floor(delta / 3600 / 24)
let hours = Math.floor(delta / 3600)
let minutes = String(Math.floor((delta % 3600) / 60)).padStart(2, '0')
let minutes = String(Math.floor((delta % 3600) / 60)).padStart(2, '0')
let seconds = String(Math.floor(delta % 60)).padStart(2, '0')
return days ? days + 'd' : hours + ':' + minutes + ':' + seconds
}

function shortTime(date) {
let now = new Date()
let delta = (now - date)/1000
let delta = (now - date) / 1000
let days = Math.floor(delta / 3600 / 24)
return days ? days + 'd' : date.toLocaleTimeString()
}

export const dateFromObjectId = function (objectId) {
return new Date(parseInt(objectId.substring(0, 8), 16) * 1000)
return new Date(parseInt(objectId.substring(0, 8), 16) * 1000)
}

export function RenderLink() {
var link = null
return {
view: vnode => {
return link ? m('.bar', {}, [
m('textarea', {
id: vnode.attrs.id
}, link),
m('i.material-icons', {
onclick: e => {
// console.log('copied ', e)
success('copied link to clipboard!', 3)
let txt = document.getElementById(vnode.attrs.id)
txt.select()
document.execCommand('copy')
}
}, 'content_copy')
]) : m('.tools',
m('i.material-icons', {
onclick: e => {
// console.log('getting render link', vnode.children)
auth('/render/' + vnode.attrs.id, {}).then(res => {
link = res
})
}}, 'link'))
}
return link
? m('.bar', {}, [
m(
'textarea',
{
id: vnode.attrs.id,
},
link
),
m(
'i.material-icons',
{
onclick: e => {
// console.log('copied ', e)
success('copied link to clipboard!', 3)
let txt = document.getElementById(vnode.attrs.id)
txt.select()
document.execCommand('copy')
},
},
'content_copy'
),
])
: m(
'.tools',
m(
'i.material-icons',
{
onclick: e => {
// console.log('getting render link', vnode.children)
auth('/render/' + vnode.attrs.id, {}).then(res => {
link = res
})
},
},
'link'
)
)
},
}
}
export function RenderPreview() {
return {
view: (vnode) => {
view: vnode => {
return m('video', {
width: '100%',
'object-fit': 'contain',
src: vnode.attrs.src,
controls: true,
autoplay: true,
volume: .2,
volume: 0.2,
})
}
},
}
}

export function Renders() {
var preview = Stream(null)
var renders = []

function getRenders() {
auth('/render').then(e => {
// console.log('renders init')
renders = e
})
}

return {
oncreate: vnode => {
function checkRenders() {
Expand All @@ -101,34 +128,28 @@ export function Renders() {
view: vnode => {
let now = new Date()
return [
m('.head', [
m('h1', 'Renders'),
m('.renderVideo', [
m(RenderPreview, {
src: preview()
})
src: preview(),
}),
]),
m('.flexwrap', {}, [
m('h3', 'Renders'),
m('.tools', [
m('i.material-icons', {
style: { 'margin-left': '2vw', },
onclick: vnode => { getRenders() }
}, 'refresh'),
]),
m('.break'),
m('table#renders.renders.project', {}, [
m('tr', [
m('th', 'project'),
m('th', 'description'),
m('th', 'duration'),
m('th', 'resolution'),
m('th', 'quality'),
m('th', 'start time'),
m('th', 'progress'),
m('th', 'preview'),
m('th', 'link'),
m('th', 'issue'),
m('th', 'delete'),
],),
m(
'table.rendTableHead',
m('th', 'Project'),
m('th', 'Description'),
m('th', 'Duration'),
m('th', 'Resolution'),
m('th', 'Quality'),
m('th', 'Start Time'),
m('th', 'Progress'),
m('th', 'Preview'),
m('th', 'Link'),
m('th', 'Issue'),
m('th', 'Delete')
),
m('table.rendTable', {}, [
renders.map(r => {
return m('tr', {}, [
m('td', {}, r['project']),
Expand All @@ -138,69 +159,122 @@ export function Renders() {
m('td', {}, r['quality']),
m('td.tooltip', {}, [
shortTime(dateFromObjectId(r['_id'])),
m('.tooltiptext', {}, dateFromObjectId(r['_id']).toLocaleString())
m(
'.tooltiptext',
{},
dateFromObjectId(r['_id']).toLocaleString()
),
]),
m('td', {}, [
m('progress', {
max: 100,
value: `${Number(r['progress']).toFixed(2)}`,
}, ),
m('p', `${Number(r['progress']).toFixed(2)}%`)
}),
m('p', `${Number(r['progress']).toFixed(2)}%`),
]),
m('td', r['progress'] >= 100 ?
m('.tools',
m('i.material-icons', {
onclick: e => {
auth('/render/' + r['_id']).then(res => {
// console.log('got signed link', res)
preview(res)
})
}}, 'missed_video_call')) : ''),
m('td', r['progress'] >= 100 ?
m(RenderLink, {id: r['_id']}) : ''),
m('td', {}, m('.tools', {}, m('i.material-icons', {
onclick: e => {
prompt('Report issue', "Please provide a detailed description of the issue", "There's a problem with...", (evt, issue) => {
console.log('reporting issue', evt, issue)
auth(`/render/${r['_id']}/report`, {
method: 'post',
body: issue
}).then(win => {
success("issue submitted! We'll check it out as soon as we can!")
}, lose => {
console.log('error reporting issue', lose)
error('Oops... something went wrong. Sorry!')
})
}, evt => {
console.log('cancelled issue')
})
}
}, 'report_problem'))),
m('td',
m('.tools',
m('i.material-icons', {
onclick: e => {
auth(`/render/${r['_id']}`, {
method: 'delete',
}).then(res => {
console.log('deleted', r['filename'])
message(`${r['filename']} removed`, 4)
getRenders()
}, err => {
console.log('error deleting', err)
if (err.status_code == 406) {
error('did not find that entry', 4)
} else {
error('error removing from db', 4)
}
}).catch()
},
}, 'delete'))),
])
}),
]),
m(
'td',
r['progress'] >= 100
? m(
'.tools',
m(
'i.material-icons',
{
onclick: e => {
auth('/render/' + r['_id']).then(res => {
// console.log('got signed link', res)
preview(res)
})
},
},
'missed_video_call'
)
)
: ''
),
m(
'td',
r['progress'] >= 100 ? m(RenderLink, { id: r['_id'] }) : ''
),
m(
'td',
{},
m(
'.tools',
{},
m(
'i.material-icons',
{
onclick: e => {
prompt(
'Report issue',
'Please provide a detailed description of the issue',
"There's a problem with...",
(evt, issue) => {
console.log('reporting issue', evt, issue)
auth(`/render/${r['_id']}/report`, {
method: 'post',
body: issue,
}).then(
win => {
success(
"issue submitted! We'll check it out as soon as we can!"
)
},
lose => {
console.log('error reporting issue', lose)
error('Oops... something went wrong. Sorry!')
}
)
},
evt => {
console.log('cancelled issue')
}
)
},
},
'report_problem'
)
)
),
m(
'td',
m(
'.tools',
m(
'i.material-icons',
{
onclick: e => {
auth(`/render/${r['_id']}`, {
method: 'delete',
})
.then(
res => {
console.log('deleted', r['filename'])
message(`${r['filename']} removed`, 4)
getRenders()
},
err => {
console.log('error deleting', err)
if (err.status_code == 406) {
error('did not find that entry', 4)
} else {
error('error removing from db', 4)
}
}
)
.catch()
},
},
'delete'
)
)
),
])
}),
]),
]),
]
}
}
]
},
}
}
5 changes: 5 additions & 0 deletions website/src/json.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
.json-tree div {
margin-left: 20px;
text-align: left;
}

h2, h3 {
text-align: left;
}

.json-tree button {
Expand Down
Loading

0 comments on commit e201fc7

Please sign in to comment.