Giter Club home page Giter Club logo

capturio's People

Contributors

soumik-mukherjee avatar

Stargazers

 avatar  avatar

Watchers

 avatar

capturio's Issues

Add licensing

Describe the bug
Add a license.md file to the repo with some appropriate license

To Reproduce
NA

Expected behavior
The repo should display license requirements, liabilities and warranties as defined by the license

Screenshots
NA

Desktop (please complete the following information):
NA

Smartphone (please complete the following information):
NA

Additional context
None

OAuth integration for social id login

Is your feature request related to a problem? Please describe.
Support common social authN providers

Describe the solution you'd like
Must support the following for now

  • Google
  • LinkedIn
  • Github

Describe alternatives you've considered
NA

Additional context
Users will need to login to do a recording

Bug: The RecorderControls component should encapsulate their UI state

Right now the following behaviors are left open for the consuming component to implement:

  • In the initial state Stop and Download buttons should be disabled
  • When user clicks Record the button should be disabled, along with the source (i.e. Cam, Mic & Screen buttons) should also be disabled
  • When user clicks Record, Stop should be enabled

So on and so forth.

These behaviors should be encapsulated within RecorderControls, consuming components should not have to implement them.

Recordings should be saved in Indexed DB locally

Is your feature request related to a problem? Please describe.
ATM, the recording data is stored in the browser tab's memory (i.e. part of the DOM tree). This means the user must download and save the file locally before navigating away from the app. What happens is the tab is closed accidentally, or a link is clicked that takes the user away to another page? recordings that were made must not be inadvertently lost.

Describe the solution you'd like
The app must persist the recording without requiring the user to do anything explicitly, beyond the intent of concluding a recording. (i.e. clicks on the Stop button)

Describe alternatives you've considered
Blobs and files are ideally persisted in Indexed DB. Plus just storing is not the end of the line, user's will need a UI to browse through and retrieve the recordings. Indexed DB is the ideal candidate on all counts.
Accessing local file system, without explicit user consent (every time a recording concludes), is a no go. Asking for the consent each time, worsens the experience.

Additional context
Add any other context or screenshots about the feature request here.

Record Button doesn't bring up the share screen prompt

Describe the bug
In the current version, clicking the Record button starts recording a user selected screen/area. The selection is through a browser dialog prompting user to grant "screen share" access with the app, and along with it select which screen this permission applies to.
This prompt is no longer coming up, neither is the recording happening, as a consequence.

To Reproduce
Steps to reproduce the behavior:

  1. Open the storybook app
  2. Navigate to Recorder > With Default Layout, item in the stories menu panel (left panel)
  3. Click on Record button

Expected behavior
A dialog should open up asking the user to select a screen/area and permissions to share that with the app.

Screenshots
The missing prompt is this one below
image

Desktop (please complete the following information):

  • OS: Windows 10 Home 64-bit
  • Browser: Chrome
  • Version: 80.0.3987.163 (Official Build) (64-bit)

Smartphone (please complete the following information):
Smartphones and tablets not supported at the moment.

Additional context
This is prototype functionality and the Record button onClick behavior is expected to change substantially. But this fix is a tactical requirement, to restore basic working and enable testing of fixes for pending bugs.

Pipeline fails: Pipeline testing

Describe the bug
Umbrella issue to encapsulate all bugs in pipeline detected during testing

Summary of Problems

  • Problem 1: Pipeline fails in decrypt step with message,
ERROR: (gcloud.kms.decrypt) NOT_FOUND: CryptoKey <FULL_KEY_PATH> not found.
  • Problem 2: Pipeline fails in yarn (deps install) step
Step #1: yarn install v1.9.4
Step #1: [1/4] Resolving packages...
Step #1: [2/4] Fetching packages...
Step #1: error [email protected]: The engine "node" is incompatible with this module. Expected version ">=10".
Step #1: error Found incompatible module
Step #1: info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
...
ERROR
ERROR: build step 1 "gcr.io/cloud-builders/yarn" failed: step exited with non-zero status: 1
  • Problem 3: Pipeline fails in firebase deploy step
Step #3: $ firebase deploy --token "$FIREBASE_TOKEN"
Step #3: 
Step #3: Error: No project active, but project aliases are available.
Step #3: 
Step #3: Run firebase use <alias> with one of these options:
Step #3: 
Step #3:   default ()
Step #3: error Command failed with exit code 1.
Step #3: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Finished Step #3
ERROR
ERROR: build step 3 "node:12.16.2" failed: step exited with non-zero status: 1

To Reproduce
Below for each problem,

  • Problem 1
    • Restart the build from cloud build console
  • Problem 2
    • Trigger a new build from cloud build console
  • Problem 3
    • Commit to branch bug/32_pipeline_defects

Expected behavior
Below for each problem,

  • Problem 1
    • Build step for decrypt should succeed
  • Problem 2
    • Build step for yarn should succeed
  • Problem 3
    • Build step for yarn deploy should refresh the app with new title (see PR #31)

Screenshots
NA

Desktop (please complete the following information):
NA

Smartphone (please complete the following information):
NA

Additional context
NA

Add basic documentation

Stuff that are necessary at the moment but missing

  • A project level Readme, covering atleast,
    • An explanation of the project folder structure
    • Contributions guide: Tools pre-requisite
    • Contributions guide: Running the code in a dev environment
    • Contributions guide: Branching and PR
    • Contributions guide: Code-reviews, documentation, code formatting etc.
  • Templates for PRs and Issues

Create release pipeline - v1

Is your feature request related to a problem? Please describe.
The release pipeline should automate the process of build and release (using Google Cloud Build) on the creation of a release tag.

Describe the solution you'd like
The gatsby webapp should be build and its public be deployed to the chosen target runtime. At the moment, I am leaning towards a cloud CDN with a blob storage origin for the hosting. However hosting architecture is a complete different issue in itself (may be link back here?)

Describe alternatives you've considered
None. Gitlab CICD is quite potent, but its futile using Gitlab only for CICD. Have a long standing relationship with GCP and will stick to it (commercially more viable)

Additional context
None

UX change to allow user selection of media sources

UX will change:

  1. Need a new RecorderControl to allow user to select sources. This should be a multi-select, with options like,

    • Screen

    • Audio (with available audio input devices listed, only one can be selected)

    • Camera is an ideal candidate but will keep this out of scope for now.

  2. Currently, the RecorderControls component has a Start Capture button, which does both things at the same time

    • Selects the source, i.e. screen media as of now

    • Starts recording the source

  3. The Start Capture button should only start recording, all the user selected streams

  4. The new Select Sources button should be the one to define sources, i.e. take this functionality out of the button state handler

Originally posted by @soumik-mukherjee in #1 (comment)

Bug: Media players cannot "seek" to a particular time on the recorded webm video

Describe the bug
Once you've recorded and download the file, and the open it offline, you are not able to "seek" to a particular time instant in the video, using the controls.

This is irrespective of the player used to open the file offline, tried,

  1. Chrome browser
  2. Win 10 media player
  3. Win 10 movies and TV app

To Reproduce
Steps to reproduce the behavior:

  1. Click on 'Download' and save the recording locally
  2. Double click to open on default app, or right click and choose open with
  3. Player loads the file and plays it fine but seek on the time control does not work

Expected behavior
Users should be able to seek to a particular instant

Screenshots
NA

Desktop (please complete the following information):

  • OS: Win 10 64 bit
  • Browser : Chrome v81.0

Additional context
See related stuff on the internet:

  1. A related stackoverflow discussion
  2. A related issue in another GH project
  3. Another related GH repo issue

Add scripts for build

Describe the bug
package.json currently only supports local development scripts. Add a production build script.

To Reproduce
N/A

Expected behavior
Devs should be able to run a prod build using yarn

Screenshots
N/A

Desktop (please complete the following information):
N/A

Smartphone (please complete the following information):
N/A

Additional context
None

Login UI component

Is your feature request related to a problem? Please describe.
Users will have to login. We need a UI to ask the user to use one of the following social id for login,

  • Google
  • LinkedIn
  • Facebook

Describe the solution you'd like
A simple & clear UI, providing navigation to respective providers.

Describe alternatives you've considered
NA

Additional context
NA

Implement library UI

Is your feature request related to a problem? Please describe.
The library UI is for users to browse through recordings they have created using the tool. The backend for library should be the browser's persisted storage.

Describe the solution you'd like
LibraryListView should show recordings sorted by,

  • latest first and otherwise
  • name(is this of any use at all?)

The same view must also enable filters by

  • recording date range
  • topic/subject tags
  • folders

Each RecordingItem in the list, should show

  • thumbnail with quickplay
  • name
  • subject tags
  • recorded on
  • download action
  • cloud sync status, disabled is also a status

Item can also be a folder in which case it will have a name, apply topic/subject tags, item count, sync enabled, sync status.

Describe alternatives you've considered
None

Additional context
None

App Crash: On selecting cancel from Share Screen promt

Steps to replicate

  1. Open App
  2. Click on Record button

image

  1. Click on Cancel in the ensuing prompt.

image

Error Message

TypeError: Cannot read property 'stop' of null
..... capturio/packages/ui-components/src/Recorder/index.jsx:103
100 | case REC_STATUS_ON:
101 | break
102 | case REC_STATUS_OFF_REQUESTED:
103 | mediaRecorder.stop()
104 | let tracks = mediaStream.getTracks()
105 | tracks.forEach(track => track.stop())
106 | player.srcObject = null

Bug: Donwload button not working

Steps to reproduce

  1. Click on Record button, select a screen to share. Recording starts
  2. Click on Stop button. Download of recording should be ready.
  3. Click on Download button. Nothing happens

Expected Behavior

Step 3 above should have opened a file Save As prompt to allow saving the recorded file, locally in the computer.

Root Cause

Unknown, needs investigation.

Note

This functionality was working before. Some recent changes would have broken it.

Add user profile viewer menu

Is your feature request related to a problem? Please describe.
Logged in users will need to access their profiles.
The following are not exactly in scope for this item, but they provide important justifications for the profile to exist

  • A user should be able to see their linked social account
  • A user should be able to see their active & preferred cloud storage service
  • A user should be able to see activity statistics (app usage). Exact scope of analytics TBD
  • A user should be able to see their avataar, i.e. simple way to say "you are logged in"

Describe the solution you'd like
A familiar top-level menu trigger experience, as seen with most web apps, occupying extreme right, top corner of the topbar.

Describe alternatives you've considered
Mostly experience/design alternatives

  • Do not want a cluttered interface with too much "feedback", i.e. no need to say "Welcome user" or layout elaborate menu "opener" indicators (i.e. giant drawer open close buttons)
  • Settings for "library" management will be necessary later, we need a menu anyway. Best option is to start with a menu and keep adding to it. I like Github's minimalist approach.

Additional context
None

Basic project information needs to be updated

Describe the bug
There are multiple package.json in the repo (and other places too) where project details (owner, license etc.) need to be updated.

To Reproduce
NA

Expected behavior
package.json (at minimum) must reflect project details.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):
NA

Smartphone (please complete the following information):
NA

Additional context
None

Basics for a focussed branding

Is your feature request related to a problem? Please describe.
The UI branding (i.e. app title etc.) is still generic and has no alignment to the product.
This change should also serve as a means of testing the pipeline

Describe the solution you'd like
Changes to title and other basic branding assets. No logo yet

Describe alternatives you've considered
NA

Additional context
This will form the basis of a release version 0.1.0 and testing the cloud build cicd integration

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.