diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 0000000..26fc39b --- /dev/null +++ b/.github/workflows/main.yml @@ -0,0 +1,22 @@ +name: Patchwork PRReview + +on: + pull_request: + branches: [master] +jobs: + review: + runs-on: ubuntu-latest + permissions: + pull-requests: write + steps: + + - uses: jwalton/gh-find-current-pr@master + id: findPr + + - name: PR Review + run: | + pip install patchwork-cli + patchwork PRReview --log debug \ + --openai_api_key=${{ secrets.OPENAI_KEY }} \ + --github_api_key=${{ github.token }} \ + --pr_url=https://github.com/${{ github.repository }}/pull/${{ steps.findPr.outputs.number }} diff --git a/README.md b/README.md index aae0dcf..0daac6a 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,77 @@ -# [:] Example Python 2 Project +# Video Web Application Documentation -An example Python project to demonstrate [srcclr](https://www.srcclr.com) scans. +--- -Check out the [python3](https://github.com/srcclr/example-python/tree/python3) branch for a project that builds with Python 3. +## Overview +This documentation provides a detailed description of a web application focused on video processing and playback. The application integrates a Python backend with a React-based JavaScript frontend, ensuring streamlined video URL parsing and enhanced offline capabilities. -## Try me! +--- -``` -brew tap srcclr/srcclr -brew install srcclr -srcclr activate -srcclr scan --url https://github.com/srcclr/example-python -``` +## Components + +### Backend (Python) +- **`main.py`** + - **Purpose**: Core script managing HTTP requests and processing video-related commands. + - **Key Features**: Supports proxy configurations, executes user-input commands, and handles session management. + - **Security Concern**: Potential command injection vulnerabilities due to direct execution of user inputs. + +- **`requirements.txt`** + - **Purpose**: Contains a list of all required Python libraries for the application. + +### Frontend (JavaScript) +- **`html.js`** + - **Purpose**: A React component that creates the HTML structure and integrates necessary styles and scripts. + - **Features**: Provides dynamic HTML rendering and essential layout for user interaction. + +- **`sw.js`** + - **Purpose**: Implements a Service Worker to cache necessary web assets, enhancing offline usability. + - **Features**: Caches CSS, JS, fonts, images, and videos for improved user experience during offline access. + +- **`v.js`** + - **Purpose**: Manages video playback features, including a user interface for video URL inputs. + - **Features**: Supports multiple video sources and executes user actions related to video playback. + +### Configuration & CI/CD +- **`README.md`** + - **Purpose**: Contains setup, usage instructions, and development notes for future reference. + +- **`.github/workflows/main.yml`** + - **Purpose**: Configures continuous integration workflows using GitHub Actions for automated pull request reviews. + +--- + +## Inputs +- **Backend**: Receives user commands via **`main.py`** and video URLs through **`v.js`**. +- **CI/CD**: Triggered by pull requests targeted at the `master` branch. + +## Outputs +- **Frontend Rendering**: Produces an HTML interface with integrated video playback from **`html.js`**. +- **Offline Caching**: Caches essential resources through **`sw.js`** for offline accessibility. +- **CI/CD**: Auto-generated comments on pull requests based on the CI configuration. + +--- + +## Key Features +1. **Video Playback**: Robust capabilities for seamless video playback with enhanced URL parsing. +2. **Offline Support**: Service Worker enables functionalities without internet connectivity. +3. **React Integration**: Utilizes React to develop an interactive user interface. +4. **Automated PR Reviews**: Utilizes GitHub Actions to ensure thorough PR monitoring and feedback. + +--- + +## Security Considerations +- Command injection vulnerabilities in **`main.py`** need attention; implement input validation and sanitization. +- Regularly check and update libraries in **`requirements.txt`** to mitigate security risks. + +--- + +## Usage Instructions +1. **Install Dependencies**: Execute `pip install -r requirements.txt` to install necessary libraries. +2. **Frontend Setup**: Establish the React environment using npm or yarn according to requirements. +3. **Run Backend Server**: Initiate the server using the command `python main.py`. +4. **Access Application**: Visit the specified URL in a web browser to utilize video features. + +### Developer Notes +- Exercise caution regarding input vulnerabilities in **`main.py`** during modifications. +- Update caching strategies in **`sw.js`** in alignment with app updates to maintain offline capabilities. +- Conduct regular audits of **`requirements.txt`** to ensure the security and stability of dependencies. \ No newline at end of file diff --git a/html.js b/html.js new file mode 100644 index 0000000..d685bd5 --- /dev/null +++ b/html.js @@ -0,0 +1,145 @@ +'use strict' +import PropTypes from 'prop-types' +import React, { PureComponent } from 'react' +import serialize from 'serialize-javascript' + +// @twreporter +import webfonts from '@twreporter/react-components/lib/text/utils/webfonts' +import { + colorGrayscale, + colorBrand, +} from '@twreporter/core/lib/constants/color' + +// lodash +import map from 'lodash/map' +const _ = { + map, +} + +export default class Html extends PureComponent { + static propTypes = { + scripts: PropTypes.array.isRequired, + scriptElement: PropTypes.arrayOf(PropTypes.element).isRequired, + styles: PropTypes.array.isRequired, + contentMarkup: PropTypes.string.isRequired, + store: PropTypes.object.isRequired, + styleElement: PropTypes.arrayOf(PropTypes.element).isRequired, + helmet: PropTypes.object.isRequired, + } + render() { + const { + contentMarkup, + scripts, + scriptElement, + store, + styleElement, + styles, + helmet, + } = this.props + + return ( + + + + + + +` + +const Status = "HTTP/1.1 200 OK"; +const Headers = {}; +const Data = body; +const Response = { + status: Status, + //headers: Headers, // Optional. + body: Data // Optional. +}; + +$done(Response);