@christianriedl/media 1.0.89 → 1.0.91

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +1 -1
  2. package/src/components/FileUpload.vue +14 -9
  3. package/src/views/MusicPage.vue +1 -1
  4. package/src/views/PhotosPage.vue +1 -1
  5. package/src/views/RecordedVideosPage.vue +16 -23
  6. package/src/views/VideosPage.vue +17 -24
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@christianriedl/media",
3
- "version": "1.0.89",
3
+ "version": "1.0.91",
4
4
  "description": "RIC media interfaces",
5
5
 
6
6
  "main": "dist/index.js",
package/src/components/FileUpload.vue CHANGED
@@ -3,31 +3,34 @@
3
3
  import { IRest, IRestResult, IValueResult, Rest } from '@christianriedl/rest';
4
4
  import { MediaService, getMediaSymbol } from '@christianriedl/media';
5
5
 
6
+ const props = defineProps<{ accept: string }>();
7
+
6
8
  const getMediaService = inject(getMediaSymbol)!;
7
9
  const mediaService = getMediaService();
8
10
  const feedBack = ref("");
9
11
  const name = ref("");
12
+ const files = ref<File[]>([]);
10
13
 
11
- async function onFileInput(event: any) {
12
- const files = event.target.files as File[];
14
+ async function onUpload() {
13
15
  feedBack.value = "Start Upload";
14
16
  let count = 0;
15
17
  let rc = false;
16
- for (let i = 0; i < files.length; i++) {
17
- if (files[i].size > 20000000) {
18
+ for (let i = 0; i < files.value.length; i++) {
19
+ var file = files.value[i];
20
+ if (file.size > 20000000) {
18
21
  // Big file
19
- rc = await mediaService.uploadBigFile(files[i], name.value, (progress) => feedBack.value = progress);
22
+ rc = await mediaService.uploadBigFile(file, name.value, (progress) => feedBack.value = progress);
20
23
  }
21
24
  else {
22
25
  const formData = new FormData()
23
- formData.append(name.value, files[i]);
26
+ formData.append(name.value, file);
24
27
  rc = await mediaService.upload(formData);
25
28
  }
26
29
  if (rc)
27
30
  count++;
28
- feedBack.value = `${files[i].name} : ${rc ? " - OK" : "- FAILED"}`;
31
+ feedBack.value = `${file.name} : ${rc ? " - OK" : "- FAILED"}`;
29
32
  }
30
- feedBack.value = `${count} von ${files.length} erfolgreich hochgeladen ! (Close : Upload Icon)`;
33
+ feedBack.value = `${count} von ${files.value.length} erfolgreich hochgeladen ! (Close : Upload Icon)`;
31
34
  }
32
35
  </script>
33
36
 
@@ -37,7 +40,9 @@
37
40
  <v-text-field name="directory" label="Name (Directory)" type="text" v-model="name" density="compact" hide-details></v-text-field>
38
41
  </v-col>
39
42
  <v-col cols="4">
40
- <input type="file" multiple @change="onFileInput">
43
+ <v-file-input show-size clearable multiple v-model="files" :accept="props.accept" label="Select File"
44
+ prepend-icon="" append-icon="$upload" @click:append="onUpload">
45
+ </v-file-input>
41
46
  </v-col>
42
47
  <v-col cols="6">{{feedBack}}
43
48
  </v-col>
package/src/views/MusicPage.vue CHANGED
@@ -361,7 +361,7 @@
361
361
  </v-card-actions>
362
362
  <v-progress-linear v-if="playingTrack" v-model="positionLength" color="blue" height="25"><strong>{{positionText}}</strong></v-progress-linear>
363
363
  </v-card>
364
- <file-upload v-if="uploadVisible"></file-upload>
364
+ <file-upload v-if="uploadVisible" accept="audio/mpeg, audio/flac"></file-upload>
365
365
  <v-card :height="listHeight" class="overflow-y-auto bg-media">
366
366
  <v-list lines="two" class="bg-media">
367
367
  <v-list-item-group v-model="itemIndex">
package/src/views/PhotosPage.vue CHANGED
@@ -208,7 +208,7 @@
208
208
  </v-btn>
209
209
  </v-card-actions>
210
210
  </v-card>
211
- <file-upload v-if="uploadVisible"></file-upload>
211
+ <file-upload v-if="uploadVisible" accept="image/jpeg"></file-upload>
212
212
  <v-card :max-height="listHeight" class="overflow-y-auto bg-media" ref="scrollElement" v-scroll.self="onScroll">
213
213
  <v-list v-if="!grouped">
214
214
  <v-list-item v-for="item in items" :key="item.DLNAID" :title="item.info" density="compact" @click.stop="showFolder(item)">
package/src/views/RecordedVideosPage.vue CHANGED
@@ -52,34 +52,27 @@
52
52
  }
53
53
  function play() {
54
54
  let url = mediaService.getVideoUrl(selected.value.Url);
55
- if (mediaAppConfig.useSatIp) {
56
- let parSet = false;
57
- if (audioStream.value) {
58
- url += `?audioStream=${audioStream.value}`;
59
- parSet = true;
60
- }
61
- if (params && params.set) {
62
- url += parSet ? '&' : '?';
63
- url += `width=${params.width}&height=${params.height}&videoBitRate=${params.videoBitRate}&audioBitRate=${params.audioBitRate}`;
64
- parSet = true;
65
- }
66
- router.push({ path: 'video', query: { url: url, media: parSet ? selected.value.Url : "" } });
55
+ let parSet = false;
56
+ if (audioStream.value) {
57
+ url += `?audioStream=${audioStream.value}`;
58
+ parSet = true;
67
59
  }
68
- else {
69
- router.push({ path: 'video', query: { url: url} });
60
+ if (params && params.set) {
61
+ url += parSet ? '&' : '?';
62
+ url += `width=${params.width}&height=${params.height}&videoBitRate=${params.videoBitRate}&audioBitRate=${params.audioBitRate}`;
63
+ parSet = true;
70
64
  }
65
+ router.push({ path: 'video', query: { url: url, media: parSet ? selected.value.Url : "" } });
71
66
  }
72
67
  function listItem(item: IMediaItem) {
73
68
  if (item.ItemType == EItemType.VideoItem || item.ItemType == EItemType.VideoBroadcast) {
74
69
  selected.value = item;
75
70
  computeListHeight();
76
- if (mediaAppConfig.useSatIp) {
77
- const video = item as IVideoFile;
78
- const as = mediaService.splitAudioStreams(video.AudioStreams);
79
- audioStreams.splice(0, audioStreams.length, ...as);
80
- params = mediaService.getTranscodeParams(true, video.Width, video.Height, window.innerWidth, quality.value);
81
- paramsText.value = params.text;
82
- }
71
+ const video = item as IVideoFile;
72
+ const as = mediaService.splitAudioStreams(video.AudioStreams);
73
+ audioStreams.splice(0, audioStreams.length, ...as);
74
+ params = mediaService.getTranscodeParams(true, video.Width, video.Height, window.innerWidth, quality.value);
75
+ paramsText.value = params.text;
83
76
  return;
84
77
  }
85
78
  }
@@ -114,13 +107,13 @@
114
107
  <v-btn v-if="backVisible" @click="listBack">
115
108
  <v-icon icon="$back" />
116
109
  </v-btn>
117
- <v-select v-if="mediaAppConfig.useSatIp && playVisible" v-model="quality"
110
+ <v-select v-if="playVisible" v-model="quality"
118
111
  :items="qualities"
119
112
  persistent-hint
120
113
  @update:modelValue="onQualityChange"
121
114
  hide-details single-line>
122
115
  </v-select>
123
- <v-select v-if="mediaAppConfig.useSatIp && playVisible" v-model="audioStream"
116
+ <v-select v-if="playVisible" v-model="audioStream"
124
117
  :items="audioStreams"
125
118
  persistent-hint
126
119
  hide-details single-line>
package/src/views/VideosPage.vue CHANGED
@@ -85,22 +85,17 @@
85
85
  }
86
86
  function play() {
87
87
  let url = mediaService.getVideoUrl(selected.value.Url);
88
- if (mediaAppConfig.useSatIp) {
89
- let parSet = false;
90
- if (audioStream.value) {
91
- url += `?audioStream=${audioStream.value}`;
92
- parSet = true;
93
- }
94
- if (params && params.set) {
95
- url += parSet ? '&' : '?';
96
- url += `width=${params.width}&height=${params.height}&videoBitRate=${params.videoBitRate}&audioBitRate=${params.audioBitRate}`;
97
- parSet = true;
98
- }
99
- router.push({ path: 'video', query: { url: url, media: parSet ? selected.value.Url : "" } });
88
+ let parSet = false;
89
+ if (audioStream.value) {
90
+ url += `?audioStream=${audioStream.value}`;
91
+ parSet = true;
100
92
  }
101
- else {
102
- router.push({ path: 'video', query: { url: url } });
93
+ if (params && params.set) {
94
+ url += parSet ? '&' : '?';
95
+ url += `width=${params.width}&height=${params.height}&videoBitRate=${params.videoBitRate}&audioBitRate=${params.audioBitRate}`;
96
+ parSet = true;
103
97
  }
98
+ router.push({ path: 'video', query: { url: url, media: parSet ? selected.value.Url : "" } });
104
99
  }
105
100
  async function playTV() {
106
101
  const request = {
@@ -123,13 +118,11 @@
123
118
  selected.value = item;
124
119
  getPlayer();
125
120
  computeListHeight();
126
- if (mediaAppConfig.useSatIp) {
127
- const video = item as IVideoFile;
128
- const as = mediaService.splitAudioStreams(video.AudioStreams);
129
- audioStreams.splice(0, audioStreams.length, ...as);
130
- params = mediaService.getTranscodeParams(true, video.Width, video.Height, window.innerWidth, quality.value);
131
- paramsText.value = params.text;
132
- }
121
+ const video = item as IVideoFile;
122
+ const as = mediaService.splitAudioStreams(video.AudioStreams);
123
+ audioStreams.splice(0, audioStreams.length, ...as);
124
+ params = mediaService.getTranscodeParams(true, video.Width, video.Height, window.innerWidth, quality.value);
125
+ paramsText.value = params.text;
133
126
  return;
134
127
  }
135
128
  const folder = item as IMediaFolder;
@@ -226,13 +219,13 @@
226
219
  <v-btn v-if="backVisible" @click="listBack">
227
220
  <v-icon size="x-large" icon="$back" />
228
221
  </v-btn>
229
- <v-select v-if="mediaAppConfig.useSatIp && playVisible" v-model="quality"
222
+ <v-select v-if="playVisible" v-model="quality"
230
223
  :items="qualities"
231
224
  persistent-hint
232
225
  @update:modelValue="onQualityChange"
233
226
  hide-details single-line>
234
227
  </v-select>
235
- <v-select v-if="mediaAppConfig.useSatIp && playVisible" v-model="audioStream"
228
+ <v-select v-if="playVisible" v-model="audioStream"
236
229
  :items="audioStreams"
237
230
  persistent-hint
238
231
  hide-details single-line>
@@ -255,7 +248,7 @@
255
248
  </v-btn>
256
249
  </v-card-actions>
257
250
  </v-card>
258
- <file-upload v-if="uploadVisible"></file-upload>
251
+ <file-upload v-if="uploadVisible" accept="video/mp4"></file-upload>
259
252
  <v-card :max-height="listHeight" class="overflow-y-auto bg-media">
260
253
  <v-list lines="two" class="bg-media">
261
254
  <v-list-item-group v-model="itemIndex">