Skip to content

Commit 4abfd5e

Browse files
riyaddecoderriyaddecoder
authored
Merge pull request #10 from riyaddecoder/feat/new-doc
feat: new doc added
2 parents 27fb2be + 1333121 commit 4abfd5e

File tree

23 files changed

+850
-73
lines changed

23 files changed

+850
-73
lines changed

‎.github/workflows/gh-pages.yml‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
name: Deploy Documentation Page
2+
3+
on:
4+
push:
5+
branches:
6+
- doc-build
7+
8+
jobs:
9+
deploy:
10+
runs-on: ubuntu-latest
11+
12+
steps:
13+
- name: Checkout code
14+
uses: actions/checkout@v3
15+
16+
- name: Setup Node.js
17+
uses: actions/setup-node@v3
18+
with:
19+
node-version: '18'
20+
21+
- name: Install dependencies
22+
run: npm install
23+
working-directory: ./documentation
24+
25+
- name: Build site
26+
run: npm run docs:build
27+
working-directory: ./documentation
28+
29+
- name: Deploy to GitHub Pages
30+
uses: peaceiris/actions-gh-pages@v3
31+
with:
32+
github_token: ${{ secrets.GITHUB_TOKEN }}
33+
publish_dir: ./documentation/docs/.vitepress/dist

‎.gitignore‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,7 @@ node_modules
33
dist
44
yarn-error.log
55
.vscode
6-
.parcel-cache
6+
.parcel-cache
7+
8+
/documentation/docs/.vitepress/cache
9+
/documentation/docs/docs

‎documentation/docs/.vitepress/components/AudioPlayerWrapper.vue‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
<template>
2+
<div ref="el" />
3+
</template>
4+
5+
<script setup>
6+
import { createElement } from "react";
7+
import { createRoot } from "react-dom/client";
8+
import { ref, onMounted, defineProps } from "vue";
9+
import { AudioPlayer } from "react-audio-play";
10+
11+
const props = defineProps({
12+
className: {
13+
type: String,
14+
default: "",
15+
},
16+
src: {
17+
type: String,
18+
required: true,
19+
},
20+
autoPlay: {
21+
type: Boolean,
22+
default: false,
23+
},
24+
preload: {
25+
type: String,
26+
default: "auto",
27+
},
28+
loop: {
29+
type: Boolean,
30+
default: false,
31+
},
32+
volume: {
33+
type: Number,
34+
default: 100,
35+
},
36+
hasKeyBindings: {
37+
type: Boolean,
38+
default: true,
39+
},
40+
onPlay: {
41+
type: Function,
42+
default: () => {},
43+
},
44+
onPause: {
45+
type: Function,
46+
default: () => {},
47+
},
48+
onEnd: {
49+
type: Function,
50+
default: () => {},
51+
},
52+
onError: {
53+
type: Function,
54+
default: () => {},
55+
},
56+
backgroundColor: {
57+
type: String,
58+
default: undefined,
59+
},
60+
color: {
61+
type: String,
62+
default: undefined,
63+
},
64+
sliderColor: {
65+
type: String,
66+
default: undefined,
67+
},
68+
volumePlacement: {
69+
type: String,
70+
default: "top",
71+
},
72+
width: {
73+
type: String,
74+
default: "400px",
75+
},
76+
style: {
77+
type: Object,
78+
default: () => ({}),
79+
},
80+
});
81+
82+
const el = ref();
83+
84+
onMounted(() => {
85+
const root = createRoot(el.value);
86+
root.render(createElement(AudioPlayer, { ...props }));
87+
});
88+
</script>
89+
90+
<style>
91+
.custom-style1.rap-container {
92+
background-color: #000000;
93+
background-image: linear-gradient(147deg, #000000 0%, #04619f 74%);
94+
color: aliceblue;
95+
}
96+
97+
.custom-style1.rap-container .rap-pp-icon path,
98+
.custom-style1.rap-container .rap-volume-btn path {
99+
fill: white;
100+
}
101+
102+
.custom-style1.rap-container .rap-slider .rap-progress {
103+
background-color: #daecff;
104+
}
105+
106+
.custom-style1.rap-container .rap-volume .rap-volume-controls {
107+
background-color: #000000;
108+
background-image: linear-gradient(147deg, #000000 0%, #04619f 74%);
109+
}
110+
111+
.custom-style1.rap-container .rap-slider .rap-progress .rap-pin {
112+
background-color: #c3d5ff;
113+
box-shadow: 0 0 9px 7px #269eff52;
114+
}
115+
116+
.custom-style1.rap-container svg.rap-pp-icon:hover,
117+
.custom-style1.rap-container .rap-volume-btn svg:hover {
118+
filter: drop-shadow(0px 0px 6px rgba(255, 255, 255, 0.9));
119+
}
120+
121+
122+
123+
.custom-style2.rap-container {
124+
background-color: #e4e4e4;
125+
color: #566574;
126+
border-radius: 20px;
127+
}
128+
129+
.custom-style2.rap-container .rap-slider .rap-progress {
130+
background-color: #959595;
131+
}
132+
133+
.custom-style2.rap-container .rap-slider .rap-progress .rap-pin {
134+
background-color: #566574;
135+
height: 18px;
136+
width: 18px;
137+
border-radius: 10px;
138+
}
139+
140+
.custom-style2.rap-container .rap-controls .rap-slider .rap-progress .rap-pin {
141+
top: -5px;
142+
}
143+
144+
.custom-style2.rap-container .rap-controls .rap-slider {
145+
height: 8px;
146+
border-radius: 4px;
147+
}
148+
149+
.custom-style2.rap-container .rap-volume .rap-volume-btn.rap-volume-open path {
150+
fill: #000;
151+
}
152+
153+
.custom-style2.rap-container .rap-volume .rap-volume-controls {
154+
background-color: #e4e4e4;
155+
}
156+
157+
.custom-style2.rap-container .rap-volume .rap-volume-controls .rap-slider,
158+
.custom-style2.rap-container .rap-volume .rap-volume-controls .rap-slider .rap-progress {
159+
width: 8px;
160+
}
161+
162+
</style>

0 commit comments

Comments
 (0)