tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Readme update, css fixes

Browse Source
This commit is contained in:
Tamius Han 2019-01-17 22:16:55 +01:00
parent 3ff00e629d
commit 3ed3eb8004
6 changed files with 132 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

@ -246,11 +246,18 @@ However, I do plan on implementing this feature. Hopefully by the end of the yea
### Installing the current, github version
Requirements: npm, yarn.
1. Clone this repo
2. run `yarn install`
3. run `npm run watch:dev`
TODO: see if #3 already loads the extension in FF
2. Open up Firefox
3. Go to `about:debugging`
4. Add temporary addon
5. Browse to wherever you saved it and select manifest.json
5. Select `${ultrawidify_folder}/dist/manifest.json`
# Edge-specific limitations (IMPORTANT!)
@ -266,6 +273,8 @@ As a result, you'll have to download the extension and install it manually. This
![Feast on dem popup](https://user-images.githubusercontent.com/12505802/46113923-d1693180-c1df-11e8-82f0-ad64cbc57558.png)
Unfortunate consequence of this is that you won't be able to enable this extension for sites other than Youtube and Netflix, but then again. Let's be honest. You're only using Edge for Netflix, so that's probably no big deal for you.
**It's also worth noting that I'm not actively maintaining the Edge fork, so it's a few versions behind.**
## Installing Ultrawidify in M$ Edge
1. Download the zip file from [here](https://github.com/xternal7/ultrawidify/tree/master/releases/edge)

11
src/common/components/shortcut-button.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="flex flex-column">
<div class="flex w100">
<div class="flex flex-column flex-center">
<div class="flex flex-self-center">
{{label}}
</div>
<div class="flex w100 dark">
<div class="flex dark flex-self-center">
<small>
{{shortcut ? `(${shortcut})` : ''}}
</small>
@ -20,7 +20,10 @@ export default {
}
</script>
<style>
<style scoped>
.center-text {
text-align: center;
}
.dark {
opacity: 50%;
}

147
src/popup/App.vue
View File

@ -1,77 +1,79 @@
<template>
<div>
<div class="popup">
<div class="header">
<span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small>
</div>
<!-- TABS/SIDEBAR -->
<div id="tablist" class="left-side">
<div class="menu-item"
:class="{'selected-tab': selectedTab === 'extension'}"
@click="selectTab('extension')"
>
<div class="">
Extension settings
<div class="flex flex-row">
<!-- TABS/SIDEBAR -->
<div id="tablist" class="flex flex-column flex-nogrow flex-noshrink">
<div class="menu-item"
:class="{'selected-tab': selectedTab === 'extension'}"
@click="selectTab('extension')"
>
<div class="">
Extension settings
</div>
<div class="">
</div>
</div>
<div class="">
<div class="menu-item"
:class="{'selected-tab': selectedTab === 'site'}"
@click="selectTab('site')"
>
<div class="">
Site settings
</div>
<div class="">
</div>
</div>
</div>
<div class="menu-item"
:class="{'selected-tab': selectedTab === 'site'}"
@click="selectTab('site')"
>
<div class="">
Site settings
<div class="menu-item"
:class="{'selected-tab': selectedTab === 'video'}"
@click="selectTab('video')"
>
<div class="">
Video settings
</div>
<div class="">
</div>
<div class="">
<div v-for="frame of activeFrames">
</div>
</div>
</div>
<div class="menu-item"
:class="{'selected-tab': selectedTab === 'about'}"
@click="selectTab('about')"
>
<div class="">
About
</div>
<div class="">
</div>
</div>
</div>
<div class="menu-item"
:class="{'selected-tab': selectedTab === 'video'}"
@click="selectTab('video')"
>
<div class="">
Video settings
</div>
<div class="">
</div>
<div class="">
<div v-for="frame of activeFrames">
<div class="menu-item"
:class="{'selected-tab': selectedTab === 'beggathon'}"
@click="selectTab('beggathon')"
>
<div class="">
Donate
</div>
<div class="">
</div>
</div>
</div>
<div class="menu-item"
:class="{'selected-tab': selectedTab === 'about'}"
@click="selectTab('about')"
>
<div class="">
About
</div>
<div class="">
</div>
</div>
<div class="menu-item"
:class="{'selected-tab': selectedTab === 'beggathon'}"
@click="selectTab('beggathon')"
>
<div class="">
Donate
</div>
<div class="">
</div>
</div>
</div>
<!-- PANELS/CONTENT -->
<div id="tab-content" class="right-side">
<VideoPanel v-if="settings && settings.active && selectedTab === 'video'"
class=""
:settings="settings"
:frame="selectedFrame"
:zoom="currentZoom"
@zoom-change="updateZoom($event)"
>
</VideoPanel>
<!-- PANELS/CONTENT -->
<div id="tab-content" class="flex-grow" style="max-width: 480px !important;">
<VideoPanel v-if="settings && settings.active && selectedTab === 'video'"
class=""
:settings="settings"
:frame="selectedFrame"
:zoom="currentZoom"
@zoom-change="updateZoom($event)"
>
</VideoPanel>
</div>
</div>
</div>
</template>
@ -82,13 +84,13 @@ import BrowserDetect from '../ext/conf/BrowserDetect';
import Comms from '../ext/lib/comms/Comms';
import VideoPanel from './panels/VideoPanel';
import Settings from '../ext/lib/Settings';
import ExecAction from './js/ExecAction.js';
export default {
data () {
return {
selectedTab: 'video',
selectedFrame: '__all',
settings: {},
activeFrames: [],
port: BrowserDetect.firefox ? browser.runtime.connect({name: 'popup-port'}) : chrome.runtime.connect({name: 'popup-port'}),
comms: new Comms(),
@ -96,13 +98,14 @@ export default {
frameStoreCount: 0,
site: null,
currentZoom: 1,
execAction: new ExecAction(),
settings: new Settings(undefined, () => this.updateConfig()),
}
},
async created() {
const ns = new Settings(undefined, () => this.updateConfig());
await ns.init();
this.settings = ns;
this.settings.init();
this.port.onMessage.addListener( (m,p) => this.processReceivedMessage(m,p));
this.execAction.setSettings(this.settings);
},
components: {
VideoPanel,
@ -113,6 +116,9 @@ export default {
},
selectFrame(frame) {
this.selectedFrame = frame;
},
async updateConfig() {
},
processReceivedMessage(message, port) {
if (Debug.debug) {
@ -156,13 +162,18 @@ export default {
<style lang="scss" scoped>
html, body {
width: 780px !important;
width: 800px !important;
max-width: 800px !important;
padding: 0px;
margin: 0px;
}
#tablist {
min-width: 275px;
}
.header {
overflow: hidden;
background-color: #7f1416;
color: #fff;
margin: 0px;
@ -247,4 +258,10 @@ html, body {
content: "</>";
padding-left: 0.33em;
}
.popup {
max-width: 780px;
// width: 800px;
height: 600px;
}
</style>

18
src/popup/panels/VideoPanel.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<div v-if="true">
<div class="w100">
<div v-if="true" class="w100">
<div class="label">Cropping mode:</div>
<div class="flex flex-row flex-wrap">
<template v-for="action of settings.active.actions">
@ -15,14 +15,16 @@
</div>
</div>
<div v-if="true">
<div v-if="true" class="w100">
<div class="label">Zooming and panning</div>
<div class="row">
<div class="row w100"
>
<!--
min, max and value need to be implemented in js as this slider
should use logarithmic scale
-->
<input id="_input_zoom_slider" class="w100"
<input id="_input_zoom_slider"
class="w100"
type="range"
step="any"
min="-1"
@ -30,11 +32,11 @@
:value="logarithmicZoom"
@input="changeZoom($event.target.value)"
/>
<div style="overflow: auto">
<div class="inline-block float-left medium-small x-pad-1em">
<div style="overflow: auto" class="flex flex-row">
<div class="flex flex-grow medium-small x-pad-1em">
Zoom: {{(zoom * 100).toFixed()}}%
</div>
<div class="inline-block float-right medium-small">
<div class="flex flex-nogrow flex-noshrink medium-small">
<a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
</div>
</div>

2
src/popup/popup.html
View File

@ -8,7 +8,7 @@
<!-- Load some resources only in development environment -->
<% } %>
</head>
<body>
<body style="width: 800px; height: 600px; overflow-x: hidden">
<div id="app">
</div>

22
src/res/css/flex.css
View File

@ -17,7 +17,29 @@
.flex-grow {
flex-grow: 1;
}
.flex-nogrow {
flex-grow: 0;
}
.flex-shrink {
flex-shrink: 1;
}
.flex-noshrink {
flex-shrink: 0;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-center {
align-content: center;
}
.flex-cross-center {
justify-content: center;
}
.flex-self-center {
align-self: center;
}