{"id":17702657,"url":"https://github.com/friendlymatthew/adsalonwmp","last_synced_at":"2025-03-31T03:24:19.189Z","repository":{"id":115587084,"uuid":"433247877","full_name":"friendlymatthew/adsalonwmp","owner":"friendlymatthew","description":"an internal video annotation web tool that crowdsources training data for machine learning algorithm","archived":false,"fork":false,"pushed_at":"2021-12-14T01:43:04.000Z","size":359,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-06T08:12:35.282Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/friendlymatthew.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-11-30T01:04:48.000Z","updated_at":"2023-12-15T16:45:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"1611c2c1-bcbf-44db-86ee-48e584199a6e","html_url":"https://github.com/friendlymatthew/adsalonwmp","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/friendlymatthew%2Fadsalonwmp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/friendlymatthew%2Fadsalonwmp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/friendlymatthew%2Fadsalonwmp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/friendlymatthew%2Fadsalonwmp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/friendlymatthew","download_url":"https://codeload.github.com/friendlymatthew/adsalonwmp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246409366,"owners_count":20772487,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-24T19:08:40.074Z","updated_at":"2025-03-31T03:24:19.171Z","avatar_url":"https://github.com/friendlymatthew.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# *WELCOME TO AD SALON*\n#### Written by Matthew Kim\n\n# About\n\n[`adsalonwmp`](https://adsalonwmp.vercel.app/?market=Portland\u0026station=WPFO\u0026title=DailyMailTV\u0026snippet=be+taking+to+make+the+risks+are+worth+their+rewards+medical+staff+housekeeping+and+that+of+course+--+jesse:+jay+jacobs+the+ceo+of+the+timberlake+family+of+camps+is+talking+about+what+it+takes+to+operate+a+summer+camp+in+the+time+of+covid-19+before+the+recently+announced+new+york+ban+jacobs+had+planned+to+open+some+of+his\u0026coder=eraab\u0026url=covid/xWPFO_20200619_1100PM.mp4\u0026id=4\u0026seek=1357) is an internal video annotation web tool that crowdsources data for the [Wesleyan Media Project](https://mediaproject.wesleyan.edu/).\n\n![release](https://img.shields.io/badge/release-v.0.0.2-blue)\n\nThis is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) and hosted on a [MongoDB](https://www.mongodb.com/) server.\n\n# Usage\n\nFor an extensive user guide, please check out the following document:\n\n- [User Guide](https://docs.google.com/document/d/1N5uHkGX4boBQyj82vzMRa_v3SJmHPs_KBj1AEabEao0/edit?usp=sharing)\n\n# Documentation\n\n### Packages\n\n| Package                                                        | NPM                                                                                      |\n| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |\n| [`material-ui`](https://mui.com)                               | ![NPM](https://img.shields.io/npm/l/@material-ui/core?label=material-ui%2Fcore\u0026logo=NPM) |\n| [`axios`](https://axios-http.com)                              | ![NPM](https://img.shields.io/npm/l/axios?label=axios\u0026logo=NPM)                          |\n| [`mongoose`](https://www.npmjs.com/package/mongoose)           | ![NPM](https://img.shields.io/npm/l/mongoose?label=mongoose\u0026logo=NPM)                    |\n| [`react-player`](https://www.npmjs.com/package/react-player)   | ![NPM](https://img.shields.io/npm/l/react-player?label=react-player\u0026logo=NPM)            |\n| [`typeface-lato`](https://www.npmjs.com/package/typeface-lato) | ![NPM](https://img.shields.io/npm/l/typeface-lato?label=typeface-lato\u0026logo=NPM)          |\n\n### Variables\n\n| Variable    | Description                                                                       |\n| ----------- | --------------------------------------------------------------------------------- |\n| `axios`     | call `axios.post()` to send data to server                                        |\n| `query`     | access query params passed through url                                            |\n| `reference` | call instance methods on [react-player](https://github.com/cookpete/react-player) |\n\n### States\n\n| State                         | Initial Value | Description                                                    |\n| ----------------------------- | ------------- | -------------------------------------------------------------- |\n| `start`, `setStart()`         | 00:00:00      | user marked start time in HH:MM:SS                             |\n| `startSec`, `setStartSec()`   | 0             | user marked start time in seconds                              |\n| `stop`, `setStop()`           | 00:00:00      | user marked stop time in HH:MM:SS                              |\n| `stopSec`, `setStopSec()`     | 0             | user marked stop time in seconds                               |\n| `pressed`, `setPressed()`     | false         | flag that turns true when user submits data                    |\n| `submitted`, `setSubmitted()` | false         | flag that turns true when post request to server is successful |\n| `error`, `setError()`         | false         | flag that turns true when server post request to server is bad |\n| `resCode`, `setResCode()`     | \"\"            | server response code                                           |\n| `resText, setResText()`       | \"\"            | server response message                                        |\n\n### Methods\n\n| Method            | Description                                                          |\n| ----------------- | -------------------------------------------------------------------- |\n| `createClip()`    | async function that posts ClipSchema to server                       |\n| `handleSeek()`    | event handler function that seeks to suggested time within video     |\n| `handleStart()`   | event handler function that updates `start` and `startSec` variables |\n| `handleStop()`    | event handler function that updates `stop` and `stop` variables      |\n| `handleSubmit(e)` | event handler function that verifies then calls `createClip()`       |\n\n# Getting Data\n\nWe pass in specific values through web parameters within the url. A sample url would be: https://adsalonwmp.vercel.app/?market=Portland\u0026station=WPFO\u0026title=DailyMailTV\u0026snippet=be+taking+to+make+the+risks+are+worth+their+rewards+medical+staff+housekeeping+and+that+of+course+--+jesse:+jay+jacobs+the+ceo+of+the+timberlake+family+of+camps+is+talking+about+what+it+takes+to+operate+a+summer+camp+in+the+time+of+covid-19+before+the+recently+announced+new+york+ban+jacobs+had+planned+to+open+some+of+his\u0026coder=eraab\u0026url=covid/xWPFO_20200619_1100PM.mp4\u0026id=4\u0026seek=1357\n\nObserve each query is organized in a key=value pairing like such:\n\n### Sample\n\n| Key     | Pair                                                   |\n| ------- | ------------------------------------------------------ |\n| market  | Portland                                               |\n| station | WPFO                                                   |\n| title   | DailyMailTV                                            |\n| snippet | be+taking+to+make+the+risks+are+worth+their+rewards... |\n| coder   | eraab                                                  |\n| url     | covid/WXPFO_20200619_1100PM.mp4                        |\n| id      | 4                                                      |\n| seek    | 1357                                                   |\n\nWe are able to store each value with our `query.KEY` variable.\n\n### Queries\n\n| Query Key | Variable Name   | Description                                                                                        |\n| --------- | --------------- | -------------------------------------------------------------------------------------------------- |\n| `market`  | {query.market}  | news market region of specific clip                                                                |\n| `station` | {query.station} | news station name airing specific clip                                                             |\n| `title`   | {query.title}   | video clip title                                                                                   |\n| `snippet` | {query.snippet} | the specific phrase users should be looking to match with video clip and mark start and stop times |\n| `coder`   | {query.coder}   | the username of the coder for that specific video assignment                                       |\n| `url`     | {query.url}     | video clip url                                                                                     |\n| `id`      | {query.id}      | unique video id                                                                                    |\n| `seek`    | {query.seek}    | the suggested start time in seconds of where the snippet is said within the video clip             |\n\n# Sending Data\n\nWhen a coder submits their video assignment, the contents of the submission is stored as a schema with the following variables:\n\n### Clip Schema\n\n| Schema Elements | Type   | Variable         | Source         |\n| --------------- | ------ | ---------------- | -------------- |\n| `market`        | String | `query.market`   | web url param  |\n| `station`       | String | `query.station`  | web url param  |\n| `title`         | String | `query.title`    | web url param  |\n| `snippet`       | String | `query.snippet`  | web url param  |\n| `coder`         | String | `query.coder`    | web url param  |\n| `seek`          | String | `query.seek`     | web url param  |\n| `dateSubmitted` | String | local variable   | user generated |\n| `start`         | Number | `startSec` state | user generated |\n| `stop`          | Number | `stopSec` state  | user generated |\n\n### Axios\n\n```javascript\naxios\n  .post(\"/api/clips\", {\n    videoSrc: `https://wesmedia.wesleyan.edu/${query.url}`,\n    market: query.market,\n    station: query.station,\n    title: query.title,\n    snippet: query.snippet,\n    coder: query.coder,\n    seek: query.seek,\n    start: startSec,\n    stop: stopSec,\n    dateSubmitted: dateplusTime,\n  })\n  .then(function (response) {\n    console.log(response);\n\n    setResCode(response.status);\n    setResText(response.statusText);\n\n    if (response.status === 201) {\n      console.log(\"Created!!!\");\n      setSubmitted(true);\n    }\n\n    setError(true);\n  });\n```\n\nWe call our `axios` variable to post a ClipSchema to our server. We update the `submitted` state if `response.status` is 201. We update the `error` state otherwise.\n\n# HTML Components\n\n### React Player\n\n#### React video player component\n\n#### Props Used\n| Prop | Value |\n| ---------- | -------------------- |\n| `ref` | `reference` variable |\n| `url` | `{query.url}` |\n| `playing` | true |\n| `controls` | true |\n\n```html\n\u003cReactPlayer ref={reference} url={`https://wesmedia.wesleyan.edu/${query.url}`}\nplaying controls /\u003e\n```\n\u003cbr /\u003e\n\n### Video Information\n\n#### Video description component\n\n#### Variables Used\n| Variable |\n| ---------- |\n| `{query.title}` |\n| `{query.station}` |\n| `{query.market}` |\n| `{query.id}` |\n| `{query.snippet}` |\n\n```html\n    \u003cdiv\u003e\n        \u003cTypography\n            variant=\"h6\"\n            style={{ color: \"#FFFFFF\", fontWeight: 600 }}\n        \u003e\n            From {query.title}, {query.station}, {query.market}\n        \u003c/Typography\u003e\n        \u003cTypography style={{ color: \"#FFFFFF\" }}\u003e\n            video_id: {query.id}\n        \u003c/Typography\u003e\n        \u003cPaper\n            style={{ marginTop: \"15px\", backgroundColor: \"#252526\", padding: \"15px\"}}\n            elevation={3}\n        \u003e\n            \u003cTypography\n            variant=\"h6\"\n            style={{ color: \"#FFFFFF\" }}\n            \u003e\n            {query.snippet}\n            \u003c/Typography\u003e\n        \u003c/Paper\u003e\n    \u003c/div\u003e\n```\n\u003cbr /\u003e\n\n### Coder Toolbar\n#### Toolbar for coder actions involving seeking and marking times\n\n#### Methods Used\n| Method |\n| ---------- |\n| `handleSeek()` |\n| `handleStart()` |\n| `handleStop()` |\n\n```html\n    \u003cdiv\n        style={{\n            padding: \"10px\",\n            justifyContent: \"space-between\",\n            maxWidth: \"500px\",\n            display: \"flex\",\n            marginTop: \"10px\",\n        }}\n        \u003e\n        \u003cspan\u003e\n            \u003cButton\n            style={{ backgroundColor: \"#04dbfb\" }}\n            onClick={handleSeek}\n            \u003e\n            \u003cVisibilityIcon style={{ marginRight: \"8px\" }} /\u003e\n            \u003cTypography\n                variant=\"h5\"\n                style={{ fontWeight: 600, color: \"#000000\" }}\n            \u003e\n                Seek\n            \u003c/Typography\u003e\n            \u003c/Button\u003e\n        \u003c/span\u003e\n\n        \u003cspan\u003e\n            \u003cButton\n            style={{ backgroundColor: \"#ee76da\" }}\n            onClick={handleStart}\n            \u003e\n            \u003cPlayArrowIcon style={{ marginRight: \"8px\" }} /\u003e\n            \u003cTypography\n                variant=\"h5\"\n                style={{ fontWeight: 600, color: \"#000000\" }}\n            \u003e\n                Mark Start\n            \u003c/Typography\u003e\n            \u003c/Button\u003e\n        \u003c/span\u003e\n\n        \u003cspan\u003e\n            \u003cButton\n            style={{ backgroundColor: \"#b88dfd\" }}\n            onClick={handleStop}\n            \u003e\n            \u003cStopIcon style={{ marginRight: \"8px\" }} /\u003e\n            \u003cTypography\n                variant=\"h5\"\n                style={{ fontWeight: 600, color: \"#000000\" }}\n            \u003e\n                Mark Stop\n            \u003c/Typography\u003e\n            \u003c/Button\u003e\n        \u003c/span\u003e\n    \u003c/div\u003e\n```\n\u003cbr /\u003e\n\n### Your Submission\n#### Submission card that presents marked times and submission button\n\n#### Variables Used\n| Variable | \n| -------- |\n| `submitted` | \n| `start` | \n| `stop` |\n\nMethods Used\n| Method |\n| ---------- |\n| `handleSeekStart()` |\n| `handleSeekStop()` |\n| `handleSubmit()` |\n\n```html\n    \u003cTypography\n    variant=\"h5\"\n    style={{\n        fontWeight: 600,\n        color: \"#FFFFFF\",\n        marginBottom: \"10px\",\n        textAlign: \"left\",\n    }}\n    \u003e\n    Your Submission\n    \u003c/Typography\u003e\n\n    \u003cdiv style={{ justifyContent: \"space-between\", display: \"flex\" }}\u003e\n        \u003cspan\u003e\n            \u003cButton\n            style={{\n                backgroundColor: \"#ee76da\",\n                padding: \"5px\",\n                marginBottom: \"8px\",\n                width: \"200px\",\n            }}\n            onClick={handleSeekStart}\n            \u003e\n            \u003cTypography variant=\"h5\" style={{ fontWeight: 600 }}\u003e\n                Start: {start}\n            \u003c/Typography\u003e\n            \u003c/Button\u003e\n        \u003c/span\u003e\n        \u003cspan\u003e\u003c/span\u003e\n        \u003c/div\u003e\n\n        \u003cdiv\n        style={{\n            justifyContent: \"space-between\",\n            display: \"flex\",\n            marginBottom: \"8px\",\n        }}\n        \u003e\n        \u003cspan\u003e\n            \u003cButton\n            style={{\n                width: \"200px\",\n                backgroundColor: \"#b88dfd\",\n                padding: \"5px\",\n            }}\n            onClick={handleSeekStop}\n            \u003e\n            \u003cTypography variant=\"h5\" style={{ fontWeight: 600 }}\u003e\n                Stop: {stop}\n            \u003c/Typography\u003e\n            \u003c/Button\u003e\n        \u003c/span\u003e\n        \u003cspan\u003e\n            \u003cdiv\u003e\n            {\" \"}\n            \u003cButton\n                style={{ backgroundColor: \"#fce2a1\" }}\n                onClick={handleSubmit}\n            \u003e\n                {submitted ? (\n                \u003cDoneIcon\n                    fontSize=\"large\"\n                    style={{ color: \"#000000\", marginRight: \"10px\" }}\n                /\u003e\n                ) : (\n                \u003cPostIcon\n                    fontSize=\"large\"\n                    style={{ color: \"#000000\", marginRight: \"10px\" }}\n                /\u003e\n                )}\n                \u003cTypography\n                variant=\"h5\"\n                style={{ color: \"#000000\", fontWeight: 600 }}\n                \u003e\n                {submitted ? \"Posted\" : \"Post\"}\n                \u003c/Typography\u003e\n            \u003c/Button\u003e\n            \u003c/div\u003e\n        \u003c/span\u003e\n    \u003c/div\u003e\n```\n\n\u003cbr /\u003e\n\n### Server Response\n#### Server response to coder submitting data\n\n#### Variables Used\n| Variable | \n| -------- |\n| `pressed` | \n| `submitted` | \n| `error` |\n| `resCode` |\n| `resText` | \n```html\n    {pressed ? (\n        \u003cdiv style={{ marginTop: \"60px\" }}\u003e\n            \u003cTypography\n            variant=\"h5\"\n            style={{\n                textAlign: \"left\",\n                color: \"#FFFFFF\",\n                fontWeight: 600,\n                marginBottom: \"10px\",\n            }}\n            \u003e\n            Server Response\n            \u003c/Typography\u003e\n\n            \u003cdiv\u003e\n            \u003cTypography\n                variant=\"h6\"\n                style={{\n                textAlign: \"left\",\n                color: submitted\n                    ? \"#00FF00\"\n                    : error\n                    ? \"#EE4B2B\"\n                    : \"#FFFFFF\",\n                }}\n            \u003e\n                \u003cdiv\u003eStatus Code: {resCode}\u003c/div\u003e\n            \u003c/Typography\u003e\n            \u003c/div\u003e\n\n            \u003cdiv\n            style={{\n                justifyContent: \"space-between\",\n                display: \"flex\",\n            }}\n            \u003e\n            \u003cspan\u003e\n                \u003cTypography\n                variant=\"h6\"\n                style={{\n                    textAlign: \"left\",\n                    color: submitted\n                    ? \"#00FF00\"\n                    : error\n                    ? \"#EE4B2B\"\n                    : \"#FFFFFF\",\n                }}\n                \u003e\n                \u003cdiv\u003eMessage: {resText}\u003c/div\u003e\n                \u003c/Typography\u003e\n            \u003c/span\u003e\n\n            \u003cspan\u003e\n                \u003cTypography variant=\"h6\" style={{ color: \"#FFFFFF\" }}\u003e\n                \u003ca\n                    href=\"https://forms.gle/RVMkHNG8uhqkTvZH6\"\n                    target=\"_blank\"\n                \u003e\n                    Report Issue\n                \u003c/a\u003e\n                \u003c/Typography\u003e\n            \u003c/span\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        ) : (\n        \"\"\n    )}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffriendlymatthew%2Fadsalonwmp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffriendlymatthew%2Fadsalonwmp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffriendlymatthew%2Fadsalonwmp/lists"}