Change edl from a property of the Timeline to it's own Model, for easier importing and better separations.

Add the new milestones action to this repo to auto generate release drafts from closed milesotones

Able to clone Alfred and Otto, when running ./al Dev had following error occur.

#16 [alfred_api stage-1  6/29] RUN wget https://www.imagemagick.org/download/ImageMagick.tar.gz
#16 0.742 --2022-06-26 21:36:46--  https://www.imagemagick.org/download/ImageMagick.tar.gz
#16 0.754 Resolving www.imagemagick.org (www.imagemagick.org)... 50.251.58.13
#16 0.838 Connecting to www.imagemagick.org (www.imagemagick.org)|50.251.58.13|:443... connected.
#16 1.064 HTTP request sent, awaiting response... 302 Found
#16 1.142 Location: https://download.imagemagick.org/archive/ImageMagick.tar.gz [following]
#16 1.142 --2022-06-26 21:36:46--  https://download.imagemagick.org/archive/ImageMagick.tar.gz
#16 1.142 Resolving download.imagemagick.org (download.imagemagick.org)... 50.251.58.13
#16 1.274 Connecting to download.imagemagick.org (download.imagemagick.org)|50.251.58.13|:443... connected.
#16 1.524 HTTP request sent, awaiting response... 404 Not Found
#16 1.644 2022-06-26 21:36:47 ERROR 404: Not Found.
#16 1.644
#16 ERROR: executor failed running [/bin/sh -c wget https://www.imagemagick.org/download/ImageMagick.tar.gz]: exit code: 8

#17 [alfred_worker builder 3/3] RUN git clone https://github.com/quaternionmedia/kburns-slideshow.git
#0 0.751 Cloning into 'kburns-slideshow'...
#17 CANCELED
------
 > [alfred_api stage-1  6/29] RUN wget https://www.imagemagick.org/download/ImageMagick.tar.gz:
50.251.58.13
#16 0.838 Connecting to www.imagemagick.org (www.imagemagick.org)|50.251.58.13|:443... connected.
50.251.58.13
#16 1.274 Connecting to download.imagemagick.org (download.imagemagick.org)|50.251.58.13|:443... connected.
#16 1.524 HTTP request sent, awaiting response... 404 Not Found
#16 1.644 2022-06-26 21:36:47 ERROR 404: Not Found.
#16 1.644
------
failed to solve: executor failed running [/bin/sh -c wget https://www.imagemagick.org/download/ImageMagick.tar.gz]: exit code: 8

Descriptions on clips should have tag contenteditable, and update the Edl when changed.

Implement sortablejs MultiDrag functionality

Adds .selected class to highlight selected clips, colored according to style guide.

Create button in timeline view which renders the current edl.

api.py

@app.get('/render/{edl})
def render(edl: str):
    # turn edl into ffmpeg concat script
    # run ffmpeg
    # return result

./alfred demo
returns error
Usage: wget [OPTION]... [URL]...
Can't timestamp and not clobber old files at the same time

ubuntu 18.0.4 4LTS

When video is playing, the slider component should update it's value attribute (or vnode.state) with the currentTime value from the timeupdate event.

Currently, changes in the Slider component update the Monitor, but not the other way around.

website

• Create a Bin component to list the available media.
• Make items draggable into timeline
• Display thumbnail
• Set inpoint and outpoint of source media
• Open (preview) media

api

• Add a /videos path to return a list of available media
  • For now, return os.listdir('videos')
  • Eventually, return db results

On android, S8, scale is too small to be useful. I suggest using CSS to swipe between menus/panels/components.

Create a toolbar in the timeline, and make two selectable tools:

pointer - regular cursor, for resizing edges and drag resorting.
razor - razor cursor, for splitting clips.

Clip.js

onclick: (vnode) => {
  if (vnode.style.cursor == 'razor') {
    // split clip at mouse point
  }
}

Getting error "_Video.Edl.edl is undefined" when accessing the car demo project

When sorting Clips from a touch event, item is duplicated in the edl, and consequently added to the dom.

Create a Marker component.

Each marker will have a time property and an editable text description.

class Marker() {
  constructor(vnode) {
    this.time = vnode.attrs.time
    this.text = vnode.attrs.text
  }
  view(vnode) {
    return m('.marker', {time: this.time}, [
      m('.marker_text', this.text)
    ])
  }
}

Markers will be instantiated on clips.
src/Clip.js

m.request('/markers/' + this.filename).then( (m) => {
  this.markers = m
}

marker information, is pulled from api:

@app.get('/markers/{filename}')
def get_markers(filename: str):
    # get list of markers
    return markers

Make a slider bar below the timeline to change the scale of the timeline view.

Scale values should be in pixels per second (px/s) of video.

New feature:

• import/upload/attach new videos to working directory.
• Ideally this will be a passthrough to a users choice of cloud provider.
• uploads to cloud and stores locally (if cloud isn't available)

Create basic play/pause icon, which reacts to the current playing state.

Menu Nav stays showing even if window has been dragged to larger size.

• add listener to check window size and hide nav bar.

• Add title to website
• Change logo to be Home link
• Add Menu Bar that remains on top of window
• Create function to see which page is active and set link in menu bar as such
• Move MenuItem class name to menu bar links rather than link itself
• Add NavButton that hides based on window size
• Create NavLinks with special class to design separately in css
• Update logo

Add Document page to list user documents

• Create the Documents Page
• Update the links in Menu and Index
• Style the documents page

Current behavior

When the Slider changes value, it seeks to that time in the current video.

Desired behavior

Slider should seek to that time in the Edl.

We need a Monitor.seekEdl(t) function which finds the index of the clip number we need to seek to, and jumps to the appropriate file and time.

Fix the current time indicator on Clips to display only when:

(Clip.pos == Edl.current) &&
(Clip.inpoint < Video.time < Clip.outpoint)

Adds Footer for general information always present

• Create Footer file
• Create Footer scss file for design
• Updates Components Layout with footer

Step 1 run dev server
Step 2 open instance of site and login
Step 3 open a second instance of site and login

Step 3 fails
Error in inspect console:
request.js:197 POST http://localhost:8000/auth/jwt/login 400 (Bad Request)

When resizing a Clip from a touch event, sorting should be disabled.

Sorting is currently disabled when cursor == 'ew-resize', i.e. when a mouse hovers within a few pixels of the left or right edges of a Clip, but this does not apply to mobile devices and touch events.

a612e37#commitcomment-40191376

Redesign Home page to match website style

• Add content for home page
• Style home page to match website style

Currently, download fails under any of the following conditions:

• the url does not contain it's proper extension (i.e. .mp4, .jpg, .png etc.)
• if unsafe characters appear in the url, they will be stored in the filename.
• If two files are downloaded with the same name, they will overwrite each other.

Possible solutions:

• use Content-Disposition to identify file types
• save filenames as a url hash

When adjusting a clip duration by dragging the beginning time later, the graphics make it seem like it is shortening from the end.

Possible solution to freeze position while updating, and only redraw the entire timeline after update.

Possible graphical feature added to distinguish dragging from beginning of one rather than end of the other.

Because

As a user, I should be able to easily copy the project data object with a button.

Done when

• I can click on a button that copies a project to the clipboard.

When interacting with Clips, currently, the onmousedown event will seek to the appropriate place in the video, unless the cursor is an ew-resize, or the event is within 25px of an edge (for mobile clients, see #3).

How do we discriminate between a click (or touch) meant to resize a clip, vs clicking somewhere on that clip to jump to a time in the Monitor?

Similarly, how do we discriminate between a jump action, vs a drag re-sort?

Redesign Renders Page to match the rest of the website

• Rename html components
• Design to match the rest of website

@mrharpo For the examples provided, do we need to have a script to fetch those locally, or should we change to have those facing public links?

api_1 | RuntimeError: File at path /app/videos/ATripToTheMoon.mp4 does not exist.

Because

When rendering with a worker attached to the production instance (run via docker), the progress bar stays at 0%, even though the render completes sucessfully.

Done when

• Render progress updates results

What do we think about adding a bit of logic that just tries the next port?

Move from single app to multiple routes.

/ - Home - display links to components
/timeline - Timeline component with Monitor, etc.
/projects - Projects compo

Add a sidebar nav menu with the same links.

Poetry

• Switch to using poetry and pyproject.toml
• Remove older setup.py
• Configure dev dependencies
• Configure test dependencies
• Change workflows to use new qm/.github/.github/workflows

Redesign Projects page to match website

• Rename html components in projects for designing
• Design project page elements to match website

Seek not working on S8 galaxy. Non responsive.