Skip to content

Commit 5464f6f

Browse files
gitbrentgitbrent
authored
Merge pull request #1039 from gitbrent/pr-1024
[PERF] Only add media files once (reduces file size, generation time); add cover art and file extension props
2 parents 37492ea + 8986192 commit 5464f6f

22 files changed

+327
-14269
lines changed

‎demos/browser/js/pptxgen.bundle.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/browser/js/pptxgen.bundle.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/common/images/cover_audio.png‎

736 KB
Loading

‎demos/common/images/cover_video_16x9.png‎

682 KB
Loading

‎demos/common/media/earth-big.mp4‎

17 MB
Binary file not shown.

‎demos/modules/demo_media.mjs‎

Lines changed: 73 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -8,35 +8,38 @@
88
*/
99

1010
import { IMAGE_PATHS, BASE_TABLE_OPTS, BASE_TEXT_OPTS_L, BASE_TEXT_OPTS_R } from "./enums.mjs";
11+
import { COVER_AUDIO, COVER_VIDEO_16X9 } from "./media.mjs";
1112

1213
export function genSlides_Media(pptx) {
1314
pptx.addSection({ title: "Media" });
1415

1516
genSlide01(pptx);
1617
genSlide02(pptx);
18+
//if (window && window.location.href.indexOf("localhost:8000") > -1) genSlide03(pptx);
1719
}
1820

1921
/**
2022
* SLIDE 1: Video and YouTube
2123
* @param {PptxGenJS} pptx
2224
*/
2325
function genSlide01(pptx) {
24-
let slide1 = pptx.addSlide({ sectionTitle: "Media" });
25-
slide1.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-media.html");
26-
slide1.addTable([[{ text: "Media: Misc Video Formats; YouTube", options: BASE_TEXT_OPTS_L }, BASE_TEXT_OPTS_R]], BASE_TABLE_OPTS);
26+
let slide = pptx.addSlide({ sectionTitle: "Media" });
27+
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-media.html");
28+
slide.addTable([[{ text: "Media: Misc Video Formats; YouTube", options: BASE_TEXT_OPTS_L }, BASE_TEXT_OPTS_R]], BASE_TABLE_OPTS);
2729

28-
slide1.addText("Video: m4v", { x: 0.5, y: 0.6, w: 4.0, h: 0.4, color: "0088CC" });
29-
slide1.addMedia({
30+
slide.addText("Video: m4v", { x: 0.5, y: 0.6, w: 4.0, h: 0.4, color: "0088CC" });
31+
slide.addMedia({
3032
x: 0.5,
3133
y: 1.0,
3234
w: 4.0,
3335
h: 2.27,
3436
type: "video",
3537
path: IMAGE_PATHS.sample_m4v.path,
38+
cover: COVER_VIDEO_16X9,
3639
});
3740

38-
slide1.addText("Video: mpg", { x: 5.5, y: 0.6, w: 3.0, h: 0.4, color: "0088CC" });
39-
slide1.addMedia({
41+
slide.addText("Video: mpg", { x: 5.5, y: 0.6, w: 3.0, h: 0.4, color: "0088CC" });
42+
slide.addMedia({
4043
x: 5.5,
4144
y: 1.0,
4245
w: 3.0,
@@ -45,8 +48,8 @@ function genSlide01(pptx) {
4548
path: IMAGE_PATHS.sample_mpg.path,
4649
});
4750

48-
slide1.addText("Video: mov", { x: 9.4, y: 0.6, w: 3.0, h: 0.4, color: "0088CC" });
49-
slide1.addMedia({
51+
slide.addText("Video: mov", { x: 9.4, y: 0.6, w: 3.0, h: 0.4, color: "0088CC" });
52+
slide.addMedia({
5053
x: 9.4,
5154
y: 1.0,
5255
w: 3.0,
@@ -55,8 +58,8 @@ function genSlide01(pptx) {
5558
path: IMAGE_PATHS.sample_mov.path,
5659
});
5760

58-
slide1.addText("Video: mp4", { x: 0.5, y: 3.6, w: 4.0, h: 0.4, color: "0088CC" });
59-
slide1.addMedia({
61+
slide.addText("Video: mp4", { x: 0.5, y: 3.6, w: 4.0, h: 0.4, color: "0088CC" });
62+
slide.addMedia({
6063
x: 0.5,
6164
y: 4.0,
6265
w: 4.0,
@@ -65,8 +68,8 @@ function genSlide01(pptx) {
6568
path: IMAGE_PATHS.sample_mp4.path,
6669
});
6770

68-
slide1.addText("Video: avi", { x: 5.5, y: 3.6, w: 3.0, h: 0.4, color: "0088CC" });
69-
slide1.addMedia({
71+
slide.addText("Video: avi", { x: 5.5, y: 3.6, w: 3.0, h: 0.4, color: "0088CC" });
72+
slide.addMedia({
7073
x: 5.5,
7174
y: 4.0,
7275
w: 3.0,
@@ -77,11 +80,11 @@ function genSlide01(pptx) {
7780

7881
// NOTE: Only generated on Node as I dont want everyone who downloads and runs this to be greated with an error!
7982
if (typeof window !== "undefined" && $ && $("#chkYoutube").prop("checked")) {
80-
slide1.addText("Online: YouTube", { x: 9.4, y: 3.6, w: 3.0, h: 0.4, color: "0088CC" });
83+
slide.addText("Online: YouTube", { x: 9.4, y: 3.6, w: 3.0, h: 0.4, color: "0088CC" });
8184
// Provide the usual options (locations and size), then pass the embed code from YouTube (it's on every video page)
82-
slide1.addMedia({ x: 9.4, y: 4.0, w: 3.0, h: 2.25, type: "online", link: "https://www.youtube.com/embed/Dph6ynRVyUc" });
85+
slide.addMedia({ x: 9.4, y: 4.0, w: 3.0, h: 2.25, type: "online", link: "https://www.youtube.com/embed/Dph6ynRVyUc" });
8386

84-
slide1.addText("**NOTE** YouTube videos will issue a content warning in older desktop PPT (they only work in PPT Online/Desktop v16+)", {
87+
slide.addText("**NOTE** YouTube videos will issue a content warning in older desktop PPT (they only work in PPT Online/Desktop v16+)", {
8588
shape: pptx.shapes.RECTANGLE,
8689
x: 0.0,
8790
y: 7.0,
@@ -99,33 +102,74 @@ function genSlide01(pptx) {
99102
* @param {PptxGenJS} pptx
100103
*/
101104
function genSlide02(pptx) {
102-
let slide2 = pptx.addSlide({ sectionTitle: "Media" });
103-
slide2.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-media.html");
104-
slide2.addTable([[{ text: "Media: Misc Audio Formats", options: BASE_TEXT_OPTS_L }, BASE_TEXT_OPTS_R]], BASE_TABLE_OPTS);
105+
let slide = pptx.addSlide({ sectionTitle: "Media" });
106+
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-media.html");
107+
slide.addTable([[{ text: "Media: Misc Audio Formats", options: BASE_TEXT_OPTS_L }, BASE_TEXT_OPTS_R]], BASE_TABLE_OPTS);
105108

106-
slide2.addText("Audio: mp3", { x: 0.5, y: 0.6, w: 4.0, h: 0.4, color: "0088CC" });
107-
slide2.addMedia({
109+
slide.addText("Audio: mp3", { x: 0.5, y: 0.6, w: 4.0, h: 0.4, color: "0088CC" });
110+
slide.addMedia({
108111
x: 0.5,
109112
y: 1.0,
110113
w: 4.0,
111-
h: 0.3,
114+
h: 4.0,
112115
type: "audio",
113116
path: IMAGE_PATHS.sample_mp3.path,
117+
cover: COVER_AUDIO,
114118
});
115119

116-
slide2.addText("Audio: wav", { x: 0.5, y: 2.6, w: 4.0, h: 0.4, color: "0088CC" });
117-
slide2.addMedia({
118-
x: 0.5,
119-
y: 3.0,
120+
slide.addText("Audio: wav", { x: 6.7, y: 0.6, w: 4.0, h: 0.4, color: "0088CC" });
121+
slide.addMedia({
122+
x: 6.7,
123+
y: 1.0,
120124
w: 4.0,
121-
h: 0.3,
125+
h: 4.0,
122126
type: "audio",
123127
path: IMAGE_PATHS.sample_wav.path,
124128
});
125129

126130
if (typeof window !== "undefined" && window.location.href.indexOf("gitbrent") > 0) {
127131
// TEST USING LOCAL FILES (OFFICE.COM)
128-
slide2.addText('Audio: MP3 (path:"../media")', { x: 0.5, y: 4.6, w: 4.0, h: 0.4, color: "0088CC" });
129-
slide2.addMedia({ x: 0.5, y: 5.0, w: 4.0, h: 0.3, type: "audio", path: "media/sample.mp3" });
132+
slide.addText('Audio: MP3 (path:"../media")', { x: 0.5, y: 4.6, w: 4.0, h: 0.4, color: "0088CC" });
133+
slide.addMedia({ x: 0.5, y: 5.0, w: 4.0, h: 0.3, type: "audio", path: "media/sample.mp3" });
130134
}
131135
}
136+
137+
/**
138+
* SLIDE 3: Test large files are only added to export once
139+
* - filesize s/b ~24mb, the size of a single big-earth.mp4 file (17MB) plus other media files
140+
* @param {PptxGenJS} pptx
141+
*/
142+
function genSlide03(pptx) {
143+
let slide = pptx.addSlide({ sectionTitle: "Media" });
144+
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-media.html");
145+
slide.addTable([[{ text: "Media: Test: Large Files Only Added Once", options: BASE_TEXT_OPTS_L }, BASE_TEXT_OPTS_R]], BASE_TABLE_OPTS);
146+
147+
slide.addText([{ text: IMAGE_PATHS.big_earth_mp4.path }], {
148+
x: 0.5,
149+
y: 0.5,
150+
w: 12.2,
151+
h: 1,
152+
fill: { color: "EEEEEE" },
153+
margin: 0,
154+
color: "000000",
155+
});
156+
157+
slide.addMedia({
158+
x: 0.5,
159+
y: 2.0,
160+
w: 6,
161+
h: 3.38,
162+
type: "video",
163+
path: `${typeof window === "undefined" ? ".." : ""}${IMAGE_PATHS.big_earth_mp4.path}`, // NOTE: Node will throw exception when using "/" path
164+
cover: COVER_VIDEO_16X9,
165+
});
166+
167+
slide.addMedia({
168+
x: 6.83,
169+
y: 2.0,
170+
w: 6,
171+
h: 3.38,
172+
type: "video",
173+
path: `${typeof window === "undefined" ? ".." : ""}${IMAGE_PATHS.big_earth_mp4.path}`, // NOTE: Node will throw exception when using "/" path
174+
});
175+
}

‎demos/modules/enums.mjs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,7 @@ export const IMAGE_PATHS = {
6161
path: "https://raw.githubusercontent.com/gitbrent/PptxGenJS/master/demos/common/images/chicago_bean_bohne.jpg?op=paramTest&ampersandTest",
6262
},
6363
sydneyBridge: {
64-
path:
65-
"https://raw.githubusercontent.com/gitbrent/PptxGenJS/master/demos/common/images/sydney_harbour_bridge_night.jpg?op=paramTest&ampersandTest&fileType=.jpg",
64+
path: "https://raw.githubusercontent.com/gitbrent/PptxGenJS/master/demos/common/images/sydney_harbour_bridge_night.jpg?op=paramTest&ampersandTest&fileType=.jpg",
6665
},
6766
tokyoSubway: { path: "https://raw.githubusercontent.com/gitbrent/PptxGenJS/master/demos/common/images/tokyo-subway-route-map.jpg" },
6867
sample_avi: { path: "https://raw.githubusercontent.com/gitbrent/PptxGenJS/master/demos/common/media/sample.avi" },
@@ -72,6 +71,7 @@ export const IMAGE_PATHS = {
7271
sample_mpg: { path: "https://raw.githubusercontent.com/gitbrent/PptxGenJS/master/demos/common/media/sample.mpg" },
7372
sample_mp3: { path: "https://raw.githubusercontent.com/gitbrent/PptxGenJS/master/demos/common/media/sample.mp3" },
7473
sample_wav: { path: "https://raw.githubusercontent.com/gitbrent/PptxGenJS/master/demos/common/media/sample.wav" },
74+
big_earth_mp4: { path: "/common/media/earth-big.mp4" },
7575
};
7676

7777
// LOREM IPSUM

‎demos/modules/media.mjs‎

Lines changed: 7 additions & 0 deletions
Large diffs are not rendered by default.

‎demos/node/package-lock.json‎

Lines changed: 152 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/node/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "pptxgenjs-demos-node",
3-
"version": "3.8.0",
3+
"version": "3.9.0",
44
"author": {
55
"name": "Brent Ely",
66
"url": "https://github.com/gitbrent/"
@@ -20,6 +20,6 @@
2020
},
2121
"license": "MIT",
2222
"dependencies": {
23-
"pptxgenjs": "^3.7.1"
23+
"pptxgenjs": "^3.8.0"
2424
}
2525
}

0 commit comments

Comments
 (0)